ajax如何请求json

使用Ajax请求JSON数据的完整指南

在现代Web开发中，Ajax（Asynchronous JavaScript and XML）技术是实现异步数据交互的核心，而JSON（JavaScript Object Notation）因其轻量级、易解析的特性，已成为Web API前后端数据交换的主流格式，本文将详细介绍如何使用Ajax请求JSON数据，从基础概念到代码实现，再到常见问题解决,助你这一关键技能。

Ajax与JSON：数据交互的“黄金组合”

什么是Ajax？

Ajax（异步JavaScript和XML）并非单一技术，而是利用浏览器内置的XMLHttpRequest对象（或现代的fetch API），在不刷新整个页面的情况下，与服务器进行异步数据交换，并动态更新页面内容的技术，其核心优势是“异步性”——用户在请求数据时仍可操作页面,提升体验。

什么是JSON？

JSON是一种轻量级的数据交换格式，以键值对（"key": value）的形式组织数据，结构清晰，易于人阅读和机器解析，它与JavaScript对象语法高度相似，可直接通过JSON.parse()转换为JavaScript对象，或通过JSON.stringify()转换为JSON字符串,是Ajax数据传输的理想载体。

核心方法：使用XMLHttpRequest请求JSON

XMLHttpRequest（简称XHR）是Ajax技术的传统实现方式，所有现代浏览器均支持,以下是使用XHR请求JSON的详细步骤：

创建XHR对象

需创建XMLHttpRequest对象，由于不同浏览器存在兼容性差异，需通过window.XMLHttpRequest或ActiveXObject（IE5/6）判断：

var xhr;
if (window.XMLHttpRequest) {
    // 现代浏览器
    xhr = new XMLHttpRequest();
} else {
    // IE5/6
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

配置请求参数

通过open()方法配置请求的参数，包括请求方法（GET/POST等）、URL地址及是否异步（默认为true）：

// GET请求示例：请求一个公开的JSON API
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

• 请求方法：GET（适用于查询数据，参数在URL中）、POST（适用于提交数据，参数在请求体中）。
• URL：目标API的地址，需确保跨域权限（若涉及跨域，需服务器配置CORS）。
• 异步：true表示异步请求,避免阻塞页面。

设置响应数据类型（可选）

通过setRequestHeader()设置请求头，明确告诉服务器期望返回JSON数据,或指定响应内容的解析方式：

// 告诉服务器客户端能接收JSON数据
xhr.setRequestHeader('Accept', 'application/json');

若服务器返回的响应头中包含Content-Type: application/json,浏览器会自动按JSON格式解析响应内容。

发送请求

调用send()方法发送请求，GET请求的参数可直接拼接在URL中，POST请求需在send()中传入请求体数据（如JSON字符串）：

xhr.send(); // GET请求无需参数
// POST请求示例（需先设置请求头）
// xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.send(JSON.stringify({ name: '张三', age: 18 }));

监听请求状态变化并处理响应

通过onreadystatechange事件监听XHR对象的状态变化，或使用现代浏览器的onload（请求完成时触发）：

xhr.onreadystatechange = function() {
    // readyState: 0-未初始化, 1-已配置, 2-已发送, 3-接收中, 4-已完成
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 请求成功，响应内容已自动解析为字符串（若为JSON）
            try {
                var data = JSON.parse(xhr.responseText); // 手动解析JSON字符串
                console.log('请求成功，数据：', data);
                // 在页面上展示数据（示例）
                document.getElementById('result').innerHTML = `
                    <h3>${data.title}</h3>
                    <p>${data.body}</p>
                `;
            } catch (e) {
                console.error('JSON解析失败：', e);
            }
        } else {
            // 请求失败（如404、500等）
            console.error('请求失败，状态码：', xhr.status);
        }
    }
};

关键参数说明：

• readyState：XHR对象的状态，4表示请求已完成。
• status：HTTP状态码，200表示成功，404表示资源不存在，500表示服务器错误等。

现代方法：使用fetch API请求JSON

fetch是ES2015引入的现代Web API，基于Promise设计，语法更简洁，是替代XHR的新标准，以下是使用fetch请求JSON的步骤：

基本语法

fetch()接收一个URL参数，返回一个Promise对象，通过.then()处理成功响应，.catch()捕获错误：

// GET请求示例
fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        // 检查HTTP状态码（fetch不会自动抛出HTTP错误，需手动判断）
        if (!response.ok) {
            throw new Error(`HTTP错误！状态码：${response.status}`);
        }
        // 将响应体解析为JSON（返回一个Promise）
        return response.json();
    })
    .then(data => {
        console.log('请求成功，数据：', data);
        // 页面展示数据
        document.getElementById('result').innerHTML = `
            <h3>${data.title}</h3>
            <p>${data.body}</p>
        `;
    })
    .catch(error => {
        console.error('请求失败：', error);
    });

fetch的核心特点

• Promise-based：避免回调地狱,链式调用更清晰。
• 响应流处理：支持response.body流式读取,适合大文件处理。
• 默认不发送Cookie：需设置credentials: 'include'（跨域请求时需服务器配置Access-Control-Allow-Credentials）。
• 请求头设置：通过第二个参数配置：

  fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({ name: '李四', age: 20 }),
      credentials: 'include' // 发送Cookie
  })

跨域请求：CORS机制与解决方案

Ajax请求若涉及跨域（如前端http://a.com请求后端http://b.com），会因浏览器的同源策略（Same-Origin Policy）被拦截，解决跨域的核心是CORS（Cross-Origin Resource Sharing）,需服务器配合配置。

服务器配置CORS

服务器需在响应头中添加允许跨域的字段，

Access-Control-Allow-Origin: *  // 允许所有域名访问（开发环境可用）
// 或指定具体域名
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

不同后端语言的配置示例：

• Node.js (Express)：

  const express = require('express');
  const app = express();
  app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
      res.header('Access-Control-Allow-Methods', 'GET, POST');
      res.header('Access-Control-Allow-Headers', 'Content-Type');
      next();
  });

• PHP：

  header('Access-Control-Allow-Origin: http://localhost:8080');
  header('Access-Control-Allow-Methods: GET, POST');
  header('Access-Control-Allow-Headers: Content-Type');

前端注意事项

• 简单请求与非简单请求：
  • 简单请求（GET/POST + 头部为Accept/Content-Type/Origin等默认值）会直接发送请求,服务器通过CORS头响应。
  • 非简单请求（如PUT/DELETE、自定义头部）会先发送一个OPTIONS预检请求，确认服务器是否允许跨域,再发送实际请求。
• 携带Cookie：前端需设置withCredentials: true（XHR）或credentials: 'include'（fetch），服务器需配置Access-Control-Allow-Credentials: true。

错误处理：从网络异常到数据解析

Ajax请求的错误可分为三类,需针对性处理：

网络错误（如断网、域名不存在）

通过try-catch捕获fetch的Promise拒绝，或XHR的onerror事件：

// fetch示例
fetch('https://non-existent-domain