// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求：指定请求的类型和URL，以及是否异步
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
// 设置回调函数，处理请求完成后的操作
xhr.onload = function() {
if (xhr.status === 200) {
// 请求成功，处理响应数据
var responseData = JSON.parse(xhr.responseText);
console.log('Response Data:', responseData);
} else {
// 请求失败，处理错误信息
console.error('Request failed. Status:', xhr.status);
}
};
// 设置请求发生错误时的回调函数
xhr.onerror = function() {
console.error('Network error occurred');
};
// 发送请求
xhr.send();
在上述代码中，xhr.onload 事件处理函数中，我们首先检查响应的状态码（xhr.status）。如果状态码为 200（HTTP OK），则说明请求成功，我们可以通过 xhr.responseText 获取服务器返回的原始文本数据，通常是 JSON 格式的数据。在这个例子中，我们使用 JSON.parse 将 JSON 格式的文本转换成 JavaScript 对象。
如果状态码不是 200，表示请求失败，我们通过 console.error 输出错误信息。
在实际应用中，你可能需要根据服务器返回的数据类型（如 JSON、XML、HTML）使用不同的处理方式。此外，你还可以使用 xhr.responseType 属性指定服务器返回的数据类型，如 'json'、'text' 等。
以下是一个处理响应类型为 JSON 的例子：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.responseType = 'json'; // 设置响应类型为 JSON
xhr.onload = function() {
if (xhr.status === 200) {
// 请求成功，直接使用 xhr.response 获取解析后的 JSON 数据
var responseData = xhr.response;
console.log('Response Data:', responseData);
} else {
console.error('Request failed. Status:', xhr.status);
}
};
xhr.onerror = function() {
console.error('Network error occurred');
};
xhr.send();
在这个例子中，我们使用 xhr.responseType = 'json' 将响应类型设置为 JSON，然后直接通过 xhr.response 获取解析后的 JSON 数据。
转载请注明出处：http://www.zyzy.cn/article/detail/13181/AJAX