如何使用json异步请求

如何使用JSON异步请求：从基础到实践的完整指南

在Web开发中,异步请求是提升用户体验的核心技术——它能让页面在不刷新的情况下与后端交互，实现数据的动态加载与实时更新，而JSON（JavaScript Object Notation）因其轻量、易读、易解析的特性，已成为异步请求中最主流的数据交换格式，本文将手把手教你如何使用JSON进行异步请求，从基础概念到代码实践，再到常见问题解决，助你快速这一技能。

异步请求与JSON：为什么它们是“黄金搭档”？

1 什么是异步请求？

传统的Web请求是“同步”的：浏览器发送请求后，会等待服务器响应，期间页面完全冻结，用户无法进行任何操作，而异步请求则不同——浏览器发送请求后，不会阻塞页面渲染，而是继续执行后续代码，待服务器响应返回后，再通过回调函数或Promise处理数据。

优势：用户体验流畅（无需等待页面刷新）、资源利用率高（浏览器可同时处理多个请求）。

2 为什么选择JSON？

JSON是一种轻量级的数据交换格式,以“键值对”的形式组织数据，结构清晰易读（类似JavaScript对象），相比XML（另一种早期常用格式），JSON的优势更明显：

体积小：无冗余标签，数据传输效率更高；
解析快：原生支持JavaScript的JSON.parse()和JSON.stringify()，无需额外解析库；
兼容性强：几乎所有编程语言都支持JSON的解析与生成。

JSON与异步请求（如AJAX、Fetch API）天然契合，成为现代Web开发的标准组合。

核心工具：两种实现异步请求的方式

实现JSON异步请求的主流技术有两种：XMLHttpRequest（XHR）和Fetch API，前者是传统方案，兼容性极好；后者是现代浏览器推荐的标准API，更简洁、强大。

1 方案一：XMLHttpRequest（XHR）—— 异步请求的“老牌选手”

XHR是早期AJAX技术的核心,通过创建XMLHttpRequest对象发送HTTP请求，并通过监听事件获取响应数据。

基本步骤：

创建XHR对象：const xhr = new XMLHttpRequest();
初始化请求：xhr.open(method, url, async);（async设为true表示异步）
设置请求头：指定数据格式为JSON（如需发送JSON数据）
发送请求：xhr.send(data);（GET请求传null，POST/PUT传JSON字符串）
监听响应：通过onreadystatechange或onload事件处理返回数据

代码示例（GET请求）：

// 1. 创建XHR对象
const xhr = new XMLHttpRequest();
// 2. 初始化异步GET请求（第三个参数true表示异步）
xhr.open('GET', 'https://api.example.com/users', true);
// 3. 设置响应数据类型为JSON（可选，帮助自动解析）
xhr.responseType = 'json';
// 4. 监听请求完成事件
xhr.onload = function() {
    if (xhr.status === 200) {
        // 请求成功，xhr.response已自动解析为JavaScript对象
        console.log('用户数据：', xhr.response);
        // 渲染数据到页面
        const userList = document.getElementById('user-list');
        xhr.response.forEach(user => {
            const li = document.createElement('li');
            li.textContent = `${user.name} (${user.email})`;
            userList.appendChild(li);
        });
    } else {
        console.error('请求失败，状态码：', xhr.status);
    }
};
// 5. 监听网络错误（如跨域、断网）
xhr.onerror = function() {
    console.error('网络请求异常');
};
// 6. 发送请求
xhr.send();

代码示例（POST请求，发送JSON数据）：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/users', true);
// 设置请求头：告诉服务器发送的是JSON数据
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听响应
xhr.onload = function() {
    if (xhr.status === 201) { // 201表示资源创建成功
        console.log('创建用户成功：', xhr.response);
    } else {
        console.error('创建失败：', xhr.status);
    }
};
// 将JavaScript对象转换为JSON字符串并发送
const userData = { name: '张三', email: 'zhangsan@example.com' };
xhr.send(JSON.stringify(userData));

特点：

兼容性：支持所有浏览器（包括IE10+）；
缺点：API较繁琐（需手动设置事件监听），代码冗余。

2 方案二：Fetch API —— 现代浏览器推荐的标准

Fetch API是ES2015引入的新一代网络请求接口，基于Promise设计，语法更简洁，功能更强大（如支持请求/响应流、更灵活的选项配置）。

基本语法：

fetch(url, options)
    .then(response => response.json()) // 解析响应数据为JSON
    .then(data => console.log(data))
    .catch(error => console.error('请求失败：', error));

关键参数：

url：请求的地址（字符串）；
options：可选配置对象，包含方法（method）、请求头（headers）、数据（body）等。

代码示例（GET请求）：

// 发送GET请求获取用户数据
fetch('https://api.example.com/users')
    .then(response => {
        // 检查响应状态（如200、404等）
        if (!response.ok) {
            throw new Error(`HTTP错误！状态码：${response.status}`);
        }
        // 将响应体解析为JSON（返回Promise）
        return response.json();
    })
    .then(data => {
        console.log('用户数据：', data);
        // 渲染到页面
        const userList = document.getElementById('user-list');
        data.forEach(user => {
            const li = document.createElement('li');
            li.textContent = `${user.name} (${user.email})`;
            userList.appendChild(li);
        });
    })
    .catch(error => {
        console.error('请求出错：', error);
    });

代码示例（POST请求，发送JSON数据）：

// 准备要发送的JSON数据
const userData = { name: '李四', email: 'lisi@example.com' };
// 配置请求选项
const options = {
    method: 'POST', // 请求方法
    headers: {
        'Content-Type': 'application/json', // 告诉服务器发送JSON数据
    },
    body: JSON.stringify(userData), // 将对象转为JSON字符串
};
// 发送请求
fetch('https://api.example.com/users', options)
    .then(response => {
        if (!response.ok) {
            throw new Error(`创建失败，状态码：${response.status}`);
        }
        return response.json(); // 解析返回的JSON数据
    })
    .then(data => {
        console.log('创建成功：', data);
    })
    .catch(error => {
        console.error('请求异常：', error);
    });

特点：

语法简洁：基于Promise，避免回调地狱；
功能强大：支持请求中止（AbortController）、流式处理等；
缺点：默认不发送跨域凭证（如cookies），需手动设置credentials: 'include'；IE浏览器不支持（需polyfill）。

进阶技巧：处理跨域请求与错误

1 跨域请求（CORS）的注意事项

当请求的域名、端口或协议与当前页面不同时，浏览器会触发“跨域资源共享”（CORS）机制，服务器必须返回特定的响应头，否则浏览器会拦截请求：

服务器需返回的响应头：

Access-Control-Allow-Origin: * // 允许所有域名访问（或指定具体域名，如https://yourdomain.com）
Access-Control-Allow-Methods: GET, POST, PUT, DELETE // 允许的请求方法
Access-Control-Allow-Headers: Content-Type // 允许的请求头

前端如何配合？

使用Fetch时,若需发送凭证（如cookies），需设置：

fetch('https://api.example.com/data', {
    credentials: 'include', // 发送cookies
});

XHR同理：
```
xhr.withCredentials = true;
```

2 错误处理：区分“网络错误”与“业务错误”

异步请求的错误分为两类：

网络错误：如断网、域名不存在（通过catch捕获）；
业务错误：如状态码404（资源不存在）、500（服务器错误），需通过检查response.status判断。

通用错误处理模板（Fetch）：

async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok

企鹅直播企鹅直播足球直播爱奇艺直播爱奇艺足球直播足球直播足球直播

正文

如何使用json异步请求