js怎么请求json数据

从零开始：JavaScript 如何请求 JSON 数据详解**

在现代 Web 开发中，前端与后端的数据交互是核心环节之一，JSON（JavaScript Object Notation）因其轻量级、易读易写的特性，已成为最常用的数据交换格式，JavaScript 究该如何高效地请求 JSON 数据呢？本文将详细介绍几种主流的方法，从基础的 XMLHttpRequest 到现代的 Fetch API,并辅以实例说明。

为什么选择 JSON？

在请求方法之前，简单回顾一下 JSON 的优势：

轻量级：相比 XML，JSON 更小,传输更快。
易于解析：JavaScript 可以直接通过 JSON.parse() 方法将 JSON 字符串转换为对象,无需额外的解析器。
语言无关：虽然源自 JavaScript，但 JSON 是一种独立于语言的数据格式,几乎所有编程语言都支持其解析和生成。

核心方法 1：使用 XMLHttpRequest (XHR)

XMLHttpRequest 是最早在浏览器中实现 AJAX 功能的对象，它允许 JavaScript 向服务器发送 HTTP 请求并接收响应。

基本步骤：

创建 XHR 对象：
```
const xhr = new XMLHttpRequest();
```
初始化请求：使用 open() 方法指定请求方法（如 'GET' 或 'POST'）、URL 和是否异步。
```
xhr.open('GET', 'https://api.example.com/data.json', true);
```

设置回调函数：当请求状态发生变化时，会触发 onreadystatechange 事件，我们通常在这里检查请求是否完成（readyState === 4）且成功（status === 200）。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应
    const data = JSON.parse(xhr.responseText);
    console.log('获取到的 JSON 数据:', data);
  } else if (xhr.readyState === 4) {
    // 请求失败
    console.error('请求失败，状态码:', xhr.status);
  }
};

发送请求：使用 send() 方法发送请求，对于 GET 请求，可以不传参数或传 null；对于 POST 请求,可以在这里发送请求体数据。
```
xhr.send();
```

完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">XHR 请求 JSON</title>
</head>
<body>
  <button id="fetchBtn">使用 XHR 获取 JSON 数据</button>
  <div id="result"></div>
  <script>
    document.getElementById('fetchBtn').addEventListener('click', function() {
      const xhr = new XMLHttpRequest();
      const url = 'https://jsonplaceholder.typicode.com/posts/1'; // 一个公开的 JSON API
      xhr.open('GET', url, true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            try {
              const data = JSON.parse(xhr.responseText);
              document.getElementById('result').innerHTML = `
                <h2>数据获取成功！</h2>
                <p><strong>标题:</strong> ${data.title}</p>
                <p><strong>内容:</strong> ${data.body}</p>
              `;
            } catch (e) {
              document.getElementById('result').innerHTML = `<p>JSON 解析错误: ${e.message}</p>`;
            }
          } else {
            document.getElementById('result').innerHTML = `<p>请求失败，状态码: ${xhr.status}</p>`;
          }
        }
      };
      xhr.onerror = function() {
        document.getElementById('result').innerHTML = '<p>网络错误，请求未发送</p>';
      };
      xhr.send();
    });
  </script>
</body>
</html>

特点：

优点：兼容性极好,支持所有浏览器。
缺点：API 较为繁琐，需要手动处理状态码和 JSON 解析,回调地狱问题在复杂场景下较明显。

核心方法 2：使用 Fetch API

Fetch API 是现代浏览器提供的一个更强大、更灵活、更符合 Promise 风格的网络请求 API，它旨在取代 XMLHttpRequest。

基本用法：

Fetch API 返回一个 Promise 对象,这使得异步代码更易于编写和理解。

fetch('https://api.example.com/data.json')
  .then(response => {
    // 检查响应是否成功
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }
    // 将响应体解析为 JSON
    return response.json();
  })
  .then(data => {
    // 处理解析后的 JSON 数据
    console.log('获取到的 JSON 数据:', data);
  })
  .catch(error => {
    // 捕获网络错误或解析错误
    console.error('请求或解析出错:', error);
  });

代码解析：

fetch(url)：发起请求，返回一个 Promise。
response.json()：response 对象有一个 json() 方法，它也会返回一个 Promise，用于将响应体解析为 JSON 对象。注意：response.json() 是异步操作。
.then()：处理 Promise 的成功结果。
.catch()：捕获 Promise 链中发生的任何错误。

使用 async/await 优化（推荐）：

结合 async/await 语法，可以让异步代码看起来更像同步代码,可读性更高。

async function fetchJsonData() {
  try {
    const response = await fetch('https://json.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }
    const data = await response.json();
    console.log('获取到的 JSON 数据:', data);
    // 在这里使用 data 进行后续操作
    return data;
  } catch (error) {
    console.error('请求或解析出错:', error);
    // 可以在这里进行错误处理，比如显示错误信息给用户
  }
}
// 调用函数
fetchJsonData();

Fetch 示例（基于之前的 HTML）：

document.getElementById('fetchBtn').addEventListener('click', async function() {
  const url = 'https://jsonplaceholder.typicode.com/posts/1';
  const resultDiv = document.getElementById('result');
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }
    const data = await response.json();
    resultDiv.innerHTML = `
      <h2>数据获取成功！</h2>
      <p><strong>标题:</strong> ${data.title}</p>
      <p><strong>内容:</strong> ${data.body}</p>
    `;
  } catch (error) {
    resultDiv.innerHTML = `<p>出错: ${error.message}</p>`;
  }
});

特点：

优点：API 更简洁，基于 Promise，天然支持 async/await,避免了回调地狱。
缺点：兼容性相对较差（不支持 IE 浏览器），默认不拒绝 HTTP 错误状态（如 404, 500），需要手动检查 response.ok。

跨域资源共享 (CORS) 注意事项

当你使用 JavaScript 请求一个不同域名、不同端口或不同协议的资源时，会触发浏览器的同源策略，导致请求被阻止，为了解决这个问题，服务器需要启用 CORS (Cross-Origin Resource Sharing)。

服务器端：服务器需要在响应头中添加 Access-Control-Allow-Origin 等字段，以告知浏览器哪些来源的请求是被允许的。

Access-Control-Allow-Origin: * // 允许所有来源（不推荐用于敏感数据）
// 或
Access-Control-Allow-Origin: https://your-frontend-domain.com // 允许特定来源

客户端：作为前端开发者，你只需要确保请求的 URL 是正确的，并且服务器已正确配置 CORS，浏览器会自动处理 CORS 协议的握手过程。

如果服务器未正确配置 CORS，浏览器控制台会报类似 No 'Access-Control-Allow-Origin' header is present on the requested resource. 的错误。

第三方库：Axios

虽然 Fetch API 已经很强大，但许多开发者仍然选择使用像 Axios 这样的第三方 HTTP 客户端库,它提供了以下便利：

自动转换 JSON：Axios 会自动将请求和响应数据转换为 JSON，无需手动调用 JSON.parse() 或 JSON.stringify()。
请求/响应拦截器：可以在请求发送前或响应接收后进行统一的处理（如添加 token、错误处理）。
更好的错误处理：HTTP 错误状态码（如 404, 500）会自动触发 reject Promise。
取消请求、超时控制等高级