五个步骤
第一步：创建 XMLHttpRequest对象
var ajax = new XMLHttpRequest()
第二步：规定请求的类型、URL 以及是否异步处理请求
ajax.open('GET',url,true)
第三步：发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded")
第四步：发送请求
ajax.send(null);
第五步：接受服务器响应数据
ajax.onreadystatechange = function () {if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)){}}
实现：
在原生JavaScript中实现完整的AJAX请求，通常涉及以下几个步骤：
1. 创建XMLHttpRequest对象
首先，你需要创建一个XMLHttpRequest对象。这是所有AJAX请求的基础。
var xhr = new XMLHttpRequest();
2. 配置请求
接下来，使用open方法配置请求。这个方法需要三个参数：请求类型（如GET或POST）、请求的URL，以及是否异步执行（通常是true）。
xhr.open('GET', 'https://api.example.com/data', true);
3. 设置请求头（可选）
如果需要设置请求头（例如，指定内容类型），可以在发送请求之前通过setRequestHeader方法设置。例如，当发送POST请求时，通常需要设置Content-Type为application/json。
xhr.setRequestHeader('Content-Type', 'application/json');
4. 发送请求
配置好请求后，使用send方法发送请求。对于GET请求，通常不需要传递任何参数到send方法；对于POST请求，你需要传递相应的数据。
// GET请求
xhr.send();
// POST请求，传递数据
xhr.send(JSON.stringify({ key: 'value' }));
5. 处理响应
在发送请求后，你需要在XMLHttpRequest对象上设置事件处理函数来处理响应。常用的有onreadystatechange和onload。
使用onreadystatechange事件处理函数：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，处理响应数据
console.log(xhr.responseText); // 或者 xhr.responseJSON（如果设置了正确的Content-Type）
} else if (xhr.readyState === 4) {
// 请求失败，处理错误情况
console.error('Request failed:', xhr.statusText);
}
};
使用onload事件处理函数（更简洁）：
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功，处理响应数据
console.log(xhr.responseText); // 或者 xhr.responseJSON（如果设置了正确的Content-Type）
} else {
// 请求失败，处理错误情况
console.error('Request failed:', xhr.statusText);
}
};
6. 处理错误（可选）
为了提高健壮性，你也可以设置一个错误处理函数来捕获传输错误：
xhr.onerror = function() {
console.error('Network error'); // 处理网络错误情况
};
完整示例代码：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText); // 处理成功响应数据
} else {
console.error('Request failed:', xhr.statusText); // 处理失败情况
}
}
};
xhr.send(); // 发送请求
或者使用更简洁的onload:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) { // 检查HTTP响应状态码是否表示成功响应（2xx）
console.log(xhr.responseText); // 处理成功响应数据
} else { // 如果状态码表示其他类型的响应（如4xx或5xx）则处理错误情况。例如：404 Not Found 或 500 Internal Server Error。 你可以根据需要添加更详细的错误处理逻辑。 例如：console.error('Request failed:', xhr.statusText);
// 处理失败情况。你也可以在这里添加更详细的错误信息。例如：console.error('Request failed with status:', xhr.status, 'message:', xhr.statusText);
}
};
xhr.onerror = function() {
console.error('Network error'); // 处理网络错误情况
};
xhr.send();