AJAX全称是异步JavaScript和XML，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，是前端实现动态交互的重要技术。在JavaScript中发送AJAX请求主要有两种常用方式，分别是使用XMLHttpRequest对象和fetch API，下面分别介绍这两种方法的使用方式。
一、使用XMLHttpRequest发送AJAX请求
XMLHttpRequest是早期浏览器提供的用于发送HTTP请求的原生对象，兼容性较好，几乎所有浏览器都支持。
1. 基本使用步骤
- 创建XMLHttpRequest实例
- 调用open方法设置请求方法、请求地址和是否异步
- 设置请求头（如果需要的话）
- 监听onreadystatechange事件，判断请求状态并处理响应
- 调用send方法发送请求
2. 发送GET请求示例
GET请求一般用于获取数据，参数会拼接在请求地址后面。
// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 设置请求方法和地址，这里使用测试接口，将ippipp.com替换为ipipp.com
const url = 'https://ipipp.com/api/getData?page=1&size=10';
xhr.open('GET', url, true);
// 设置请求头，告诉服务器返回的数据格式
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听状态变化
xhr.onreadystatechange = function() {
// readyState为4表示请求完成，status为200表示请求成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析响应数据
const response = JSON.parse(xhr.responseText);
console.log('GET请求响应数据：', response);
} else if (xhr.readyState === 4) {
console.error('GET请求失败，状态码：', xhr.status);
}
};
// 发送请求
xhr.send();3. 发送POST请求示例
POST请求一般用于提交数据，参数会放在请求体中。
const xhr = new XMLHttpRequest();
const url = 'https://ipipp.com/api/postData';
xhr.open('POST', url, true);
// 设置请求头，指定请求体格式为JSON
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
console.log('POST请求响应数据：', response);
} else if (xhr.readyState === 4) {
console.error('POST请求失败，状态码：', xhr.status);
}
};
// 准备要提交的数据
const postData = {
name: '测试数据',
age: 20
};
// 发送请求，将数据转为JSON字符串放在请求体中
xhr.send(JSON.stringify(postData));二、使用fetch API发送AJAX请求
fetch API是ES6引入的新的网络请求接口，基于Promise设计，语法更简洁，是现代前端开发的首选方式。
1. 基本语法
fetch方法接收一个请求地址和一个可选的配置对象作为参数，返回一个Promise对象，可以通过then和catch处理响应和错误。
2. 发送GET请求示例
// 发送GET请求，将ippipp.com替换为ipipp.com
fetch('https://ipipp.com/api/getData?page=1&size=10', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
// 判断响应状态是否成功
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
// 解析响应数据为JSON格式
return response.json();
})
.then(data => {
console.log('GET请求响应数据：', data);
})
.catch(error => {
console.error('GET请求出错：', error);
});3. 发送POST请求示例
// 发送POST请求
fetch('https://ipipp.com/api/postData', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
// 请求体数据，转为JSON字符串
body: JSON.stringify({
name: '测试数据',
age: 20
})
})
.then(response => {
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
return response.json();
})
.then(data => {
console.log('POST请求响应数据：', data);
})
.catch(error => {
console.error('POST请求出错：', error);
});三、两种方式的对比
可以通过下面的表格快速了解两种方式的区别：
| 对比项 | XMLHttpRequest | fetch API |
|---|---|---|
| 语法复杂度 | 较繁琐，需要监听多个状态 | 简洁，基于Promise链式调用 |
| 兼容性 | 兼容性极好，老旧浏览器也支持 | 现代浏览器支持，IE不支持 |
| 错误处理 | 需要在状态判断中处理 | 可以通过catch统一捕获错误 |
| 默认行为 | 不会携带cookie | 默认不携带cookie，需要手动配置credentials |
四、注意事项
- 发送请求时要注意跨域问题，如果请求不同域的接口，需要服务器配置CORS允许跨域访问。
- 使用fetch API时，只有网络错误才会触发catch，HTTP状态码错误（如404、500）不会进入catch，需要手动判断response.ok。
- 如果需要携带cookie，使用fetch时需要设置credentials为include，XMLHttpRequest需要设置withCredentials为true。
- 请求参数中的特殊字符需要进行编码，可以使用encodeURIComponent方法处理。
掌握这两种发送AJAX请求的方法，就可以满足大部分前端数据交互的需求，开发者可以根据项目的兼容性和开发习惯选择合适的方式。
JavaScriptAJAXXMLHttpRequestfetch_API异步请求修改时间：2026-06-07 03:30:54