XMLHttpRequest 进阶指南：亲自动手构建原生 AJAX

2024-02-21 19:51:56

XMLHttpRequest：手写 AJAX 进阶指南

深入理解 AJAX 机制

AJAX（Asynchronous JavaScript and XML）是一种利用 JavaScript 与服务器进行异步通信的技术，无需刷新整个页面即可动态加载数据。这使得网页交互更加快速和高效。XMLHttpRequest 对象是 JavaScript 中用于发送和接收 HTTP 请求的关键工具。

使用 XMLHttpRequest 对象

要使用 XMLHttpRequest 对象，您需要按照以下步骤操作：

创建一个 XMLHttpRequest 对象。
配置请求参数，如请求方法（GET/POST）、URL、数据（用于 POST 请求）。
监听服务器响应。
处理服务器响应。

发送 HTTP 请求

使用 XMLHttpRequest 对象发送 HTTP 请求的语法如下：

var xhr = new XMLHttpRequest();
xhr.open(method, url, async);
xhr.send(data);

method：HTTP 请求方法，如 GET 或 POST。
url：请求的 URL。
async：是否异步发送请求。
data：要发送的数据（用于 POST 请求）。

接收服务器响应

当服务器响应时，XMLHttpRequest 对象会触发 readystatechange 事件。您可以通过 onreadystatechange 事件监听器来处理服务器响应。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理服务器响应
  }
};

readyState：请求的状态。
status：服务器响应的状态码。

处理服务器响应

服务器响应通常以字符串形式返回。您可以使用 responseText 属性获取服务器响应的文本内容。

var responseText = xhr.responseText;

如果服务器响应的是 JSON 数据，您可以使用 JSON.parse() 方法将其解析为 JavaScript 对象。

var jsonObject = JSON.parse(responseText);

原生 AJAX 示例

以下是一个使用 XMLHttpRequest 对象实现的原生 AJAX 示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = xhr.responseText;
    // 处理服务器响应
  }
};