怎样用JavaScript处理AJAX请求？

在JavaScript中处理AJAX请求主要有两种常用方式，分别是使用XMLHttpRequest对象和使用Fetch API，两种方案各有适用场景，开发者可以根据项目需求选择使用。

一、使用XMLHttpRequest处理AJAX请求

XMLHttpRequest是早期浏览器提供的原生AJAX实现方案，兼容性较好，支持所有主流浏览器，适合需要兼容旧版本浏览器的项目。

1. 基本GET请求示例

下面是一个发送GET请求获取数据的简单示例：

// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 配置请求方法和地址，这里使用模拟接口地址
xhr.open('GET', 'https://ipipp.com/api/getData?id=1');
// 监听请求状态变化
xhr.onreadystatechange = function() {
    // readyState为4表示请求完成，status为200表示请求成功
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 解析响应数据，假设返回的是JSON格式
        const responseData = JSON.parse(xhr.responseText);
        console.log('请求成功，返回数据：', responseData);
    } else if (xhr.readyState === 4) {
        // 请求完成但状态不是200，说明请求失败
        console.log('请求失败，状态码：', xhr.status);
    }
};
// 发送请求
xhr.send();

2. 发送POST请求示例

如果需要向服务端提交数据，可以使用POST请求，示例代码如下：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://ipipp.com/api/submitData');
// 设置请求头，告诉服务端发送的是JSON格式数据
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const result = JSON.parse(xhr.responseText);
        console.log('提交成功，返回结果：', result);
    } else if (xhr.readyState === 4) {
        console.log('提交失败，状态码：', xhr.status);
    }
};
// 准备要发送的数据，转换为JSON字符串
const postData = {
    name: '张三',
    age: 25
};
xhr.send(JSON.stringify(postData));

二、使用Fetch API处理AJAX请求

Fetch API是基于Promise设计的新一代AJAX方案，语法更简洁，支持链式调用，是现代前端项目的首选方案，不过不兼容IE浏览器。

1. 基本GET请求示例

使用Fetch发送GET请求的代码比XMLHttpRequest更简洁：

// fetch返回Promise对象，可以直接用then处理响应
fetch('https://ipipp.com/api/getData?id=2')
    .then(response => {
        // 先判断响应状态是否成功
        if (!response.ok) {
            throw new Error('请求失败，状态码：' + response.status);
        }
        // 解析响应为JSON格式，也支持response.text()等方法
        return response.json();
    })
    .then(data => {
        console.log('请求成功，返回数据：', data);
    })
    .catch(error => {
        // 捕获请求过程中的错误
        console.log('请求出错：', error.message);
    });

2. 发送POST请求示例

Fetch发送POST请求时，需要在第二个参数中配置请求方法和请求体：

fetch('https://ipipp.com/api/submitData', {
    method: 'POST',
    // 设置请求头
    headers: {
        'Content-Type': 'application/json'
    },
    // 请求体数据，需要转换为JSON字符串
    body: JSON.stringify({
        name: '李四',
        age: 30
    })
})
    .then(response => {
        if (!response.ok) {
            throw new Error('提交失败，状态码：' + response.status);
        }
        return response.json();
    })
    .then(result => {
        console.log('提交成功，返回结果：', result);
    })
    .catch(error => {
        console.log('提交出错：', error.message);
    });

三、两种方案的对比

可以通过以下表格快速了解两种方案的区别：

四、使用async/await优化Fetch请求

Fetch搭配async/await语法可以让异步代码看起来更像同步代码，可读性更好：

// 定义异步函数
async function getData() {
    try {
        const response = await fetch('https://ipipp.com/api/getData?id=3');
        if (!response.ok) {
            throw new Error('请求失败，状态码：' + response.status);
        }
        const data = await response.json();
        console.log('请求成功，返回数据：', data);
    } catch (error) {
        console.log('请求出错：', error.message);
    }
}
// 调用函数
getData();

实际开发中，还可以把AJAX请求封装成公共函数，统一处理请求头、错误提示等逻辑，提高代码复用性。如果是需要上传文件或者监听上传下载进度，XMLHttpRequest会更合适，因为Fetch目前还不支持进度监听相关功能。

JavaScriptAJAXXMLHttpRequestFetch_API异步请求修改时间：2026-06-07 03:12:50