AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，与服务器交换数据和更新部分网页的技术。XMLHTTPRequest是AJAX的核心，它允许JavaScript在后台与服务器交换数据。本文将带你轻松入门XMLHTTPRequest，让你掌握AJAX的基本使用方法。
一、什么是XMLHTTPRequest？
XMLHTTPRequest对象是JavaScript内置的一个对象，它允许你使用JavaScript向服务器发送请求并接收响应。使用XMLHTTPRequest，你可以实现以下功能：
发送HTTP请求
接收服务器响应
不刷新页面更新网页内容
二、XMLHTTPRequest的基本用法
1. 创建XMLHTTPRequest对象
在JavaScript中，首先需要创建一个XMLHTTPRequest对象。以下是创建XMLHTTPRequest对象的代码示例：
var xhr = new XMLHttpRequest();
2. 配置请求
接下来，需要配置请求的参数，包括请求类型、请求URL和异步模式。以下是配置请求的代码示例：
xhr.open(‘GET’, ‘http://example.com/data.json’, true);
在这个例子中，我们使用
open
方法配置了一个GET请求，请求的URL是
http://example.com/data.json
，异步模式为
true
。
3. 设置请求完成后的回调函数
当请求完成时，需要设置一个回调函数来处理响应。以下是设置回调函数的代码示例：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，处理响应数据
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
在这个例子中，我们使用
onreadystatechange
事件来监听请求的状态变化。当请求完成（
readyState
为4）且状态码为200（表示请求成功）时，执行回调函数，处理响应数据。
4. 发送请求
最后，使用
send
方法发送请求。以下是发送请求的代码示例：
xhr.send();
5. 关闭XMLHTTPRequest对象
请求完成后，建议关闭XMLHTTPRequest对象，以释放资源。以下是关闭XMLHTTPRequest对象的代码示例：
xhr.abort();
xhr = null;
三、XMLHTTPRequest的高级用法
1. 设置请求头
可以使用
setRequestHeader
方法设置请求头。以下是设置请求头的代码示例：
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);
在这个例子中，我们设置了请求头
Content-Type
为
application/json
，表示发送的数据类型为JSON。
2. 发送POST请求
要发送POST请求，需要使用
send
方法传递数据。以下是发送POST请求的代码示例：
xhr.open(‘POST’, ‘http://example.com/data.json’, true);
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);
xhr.send(JSON.stringify({ key: ‘value’ }));
在这个例子中，我们发送了一个包含JSON数据的POST请求。
3. 使用JSONP
JSONP（JSON with Padding）是一种在XMLHTTPRequest中实现跨域请求的技术。以下是使用JSONP的代码示例：
function handleResponse(data) {
console.log(data);
}
var script = document.createElement(‘script’);
script.src = ‘http://example.com/data.json?callback=handleResponse’;
document.body.appendChild(script);
在这个例子中，我们创建了一个