初探原生 AJAX 编程：轻松封装、便捷请求、灵活动态

2023-12-31 16:08:44

在现代 Web 开发中，Asynchronous JavaScript and XML (AJAX) 扮演着至关重要的角色，它使 Web 应用程序能够在不刷新整个页面的情况下与服务器进行交互。本文将带领您深入原生 AJAX 的世界，为您提供一个简单易懂的封装方案，并通过实际案例演示如何使用它来发起请求和控制超时。

封装原生 AJAX

原生 AJAX 的封装并不是一件复杂的事情。以下是封装的代码：

function createXHR() {
  try {
    return new XMLHttpRequest();
  } catch (e) {
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
}

这个封装函数为不同浏览器提供了兼容的 XMLHttpRequest 对象，确保了代码的跨浏览器兼容性。

发起 AJAX 请求

有了封装函数，发起 AJAX 请求就变得非常简单：

const xhr = createXHR();
xhr.open("GET", "https://example.com/api/data", true);
xhr.send();

这里，我们创建了一个 GET 请求，它的目标 URL 是 "https://example.com/api/data"。

处理响应

请求发送后，我们可以通过监听 xhr.onload 事件来处理响应：

xhr.onload = function() {
  if (xhr.status === 200) {
    // 处理成功响应
  } else {
    // 处理失败响应
  }
};

在成功的情况下，xhr.status 为 200，您可以访问 xhr.response 来获取响应数据。

超时控制

在某些情况下，您可能需要控制请求的超时时间。原生 AJAX 提供了以下方法：

xhr.timeout = 10000; // 设置超时时间为 10 秒
xhr.ontimeout = function() {
  // 超时处理逻辑
};

如果请求在指定的超时时间内没有收到响应，则会触发 xhr.ontimeout 事件。

实际案例

以下是一个使用封装和超时控制的实际案例：

const xhr = createXHR();
xhr.open("POST", "https://example.com/api/submit", true);
xhr.timeout = 10000;
xhr.ontimeout = function() {
  alert("请求超时，请重试");
};
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.response);
    // 处理成功的响应
  } else {
    alert("请求失败，请重试");
  }
};
xhr.send(JSON.stringify({ name: "John Doe", email: "john.doe@example.com" }));