AJAX（Asynchronous JavaScript and XML）是一种用于创建快速、动态交互式网页的技术。它通过在后台与服务器进行异步通信，可以在不重新加载整个页面的情况下更新部分网页内容。传递请求是 AJAX 的核心功能之一，它能够向服务器发送请求并接收响应，从而实现动态更新网页的效果。
使用 AJAX 传递请求可以极大地提升用户体验，因为页面不需要重新加载，而是实时加载数据，这样用户在与页面交互时会感到更加流畅。这个过程就好像我们在购物网站上浏览商品时，点击加入购物车按钮，页面不会立即刷新，而是通过 AJAX 请求将商品信息发送给服务器，并接收到服务器返回的响应结果，然后在页面中动态地显示购物车的更新情况。这样用户可以轻松地在页面上进行操作，而不会中断他们的浏览体验。
为了向服务器发送请求并获取响应，JavaScript 提供了一个 XMLHttpRequest 对象。以下是一个使用 AJAX 传递请求的示例：
var xhr = new XMLHttpRequest();
xhr.open("GET","example.com/data",true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = xhr.responseText;
// 处理接收到的响应数据
}
};
xhr.send();
在这个示例中，我们创建了一个 XMLHttpRequest 对象，并使用 open() 方法指定请求的类型（GET）和 URL（example.com/data）。然后，我们使用 onreadystatechange 事件处理程序来监听请求状态的变化。当请求状态为 4（已完成）且状态码为 200（成功）时，我们可以使用 responseText 属性来获取服务器返回的响应数据，然后进行处理。
除了 GET 请求外，我们还可以使用 POST 请求发送数据给服务器。例如，在一个简单的登录页面中，用户输入用户名和密码后，我们可以使用 AJAX 传递请求将这些数据发送给服务器进行验证，并接收服务器返回的验证结果。
var xhr = new XMLHttpRequest();
xhr.open("POST","example.com/login",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
// 登录成功
} else {
// 登录失败
}
}
};
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
xhr.send(data);
在这个示例中，我们使用了 POST 请求将用户名和密码发送到 example.com/login。我们还通过 setRequestHeader() 方法设置了请求头的 Content-type，告诉服务器我们发送的数据是经过 URL 编码的表单数据。然后，我们通过 responseText 属性获取服务器返回的 JSON 格式的响应数据，并解析成 JavaScript 对象。根据服务器返回的验证结果，我们可以做出相应的响应。
总之，使用 AJAX 传递请求可以极大地提升网页的交互性和用户体验。通过向服务器发送请求并接收响应，我们可以动态更新网页内容，从而实现无需刷新整个页面的效果。无论是购物网站上的实时更新购物车，还是登录页面中的用户验证，AJAX 都是一个强大的工具，可以轻松地实现这些功能。
