李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

XMLHttpRequest 对象 ​

XMLHttpRequest 对象是一种在 JavaScript 中用于在浏览器和服务器之间交换数据的 API。它提供了向服务器发送请求和解析服务器响应的能力，并在客户端进行处理。它通常用于实现 AJAX（异步 JavaScript 和 XML）。

1. 创建 XMLHttpRequest 对象 ​

javascript
var xhr = new XMLHttpRequest();

2. 配置 XMLHttpRequest 对象 ​

在发送请求之前，需要配置 XMLHttpRequest 对象，设置请求类型、请求的 URL 和是否异步处理。

javascript
xhr.open("GET", "http://www.example.com/api/resource", true);
  • 第一个参数是请求的方法，例如 GET 或 POST。
  • 第二个参数是请求的 URL。
  • 第三个参数决定请求是否为异步，true 表示异步，false 表示同步。

3. 发送请求 ​

配置好对象后，可以使用 send 方法来发送请求。

javascript
xhr.send();

如果是 POST 请求，则可以在 send 方法中传递数据：

javascript
xhr.send("key1=value1&key2=value2");

4. 接收响应 ​

XMLHttpRequest 对象接收到响应后，会自动填充其属性，例如 status（状态码）和 responseText（响应体的文本）。

可以使用 onload 事件处理器来处理成功的响应：

javascript
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  } else {
    console.error("Request failed with status:", xhr.status);
  }
};

5. 处理异步请求 ​

由于 XMLHttpRequest 通常用于异步请求，因此需要设置一个事件监听器来监听请求的完成状态。最常用的是 onreadystatechange 事件。

javascript
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log(xhr.responseText);
    } else {
      console.error("Request failed with status:", xhr.status);
    }
  }
};
  • readyState：表示请求/响应过程的当前活动阶段，其中 4 表示操作已完成。
  • status：HTTP 响应状态码。

总结 ​

通过使用 XMLHttpRequest 对象，可以在不刷新整个页面的情况下，对页面的某一部分进行更新。这在创建动态、用户友好的网页应用时非常有用，允许开发者创建流畅、无缝的用户体验。