js 常用的 XMLHttpRequest API

XMLHttpRequest（XHR）是一种用于在浏览器中发送异步HTTP请求的JavaScript API。它允许通过JavaScript代码与服务器进行通信，从而获取数据并更新网页内容，而无需刷新整个页面。XHR API的使用广泛，是构建现代Web应用程序和实现AJAX（Asynchronous JavaScript and XML）的重要工具。通过XHR对象，您可以设置请求参数、发送请求、监听状态变化并获取服务器的响应。XHR API的简单易用性和可靠性使得它成为处理异步数据交互的常用工具之一。

XMLHttpRequest API（简称XHR API）是一种用于在浏览器中发送异步 HTTP 请求的 JavaScript API。通过使用XHR API，您可以从服务器获取数据，而无需刷新整个页面。

以下是XHR API的主要方法和属性：

1. 创建XHR对象：

   var xhr = new XMLHttpRequest();
   

2. 设置请求：

   xhr.open(method, url, async);
   

   • method：请求方法，如"GET"、"POST"等。
   • url：请求的URL。
   • async：可选参数，指示请求是否为异步，默认为true。

3. 设置请求头：

   xhr.setRequestHeader(header, value);
   

   • header：请求头的名称。
   • value：请求头的值。

4. 发送请求：

   xhr.send(data);
   

   • data：可选参数，要发送的数据。

5. 监听请求状态变化：

   xhr.onreadystatechange = function() {
     if (xhr.readyState === XMLHttpRequest.DONE) {
       // 请求完成后的处理逻辑
       if (xhr.status === 200) {
         // 请求成功的处理逻辑
       } else {
         // 请求失败的处理逻辑
       }
     }
   };
   

   xhr.readyState 属性表示请求的状态，XMLHttpRequest.DONE 表示请求已完成。

6. 获取服务器响应：

   xhr.responseText // 响应的文本内容
   xhr.responseXML // 响应的 XML 内容
   xhr.status // 响应的状态码
   xhr.statusText // 响应的状态文本
   

XHR API还提供其他一些方法和属性，例如abort()（取消请求）、getAllResponseHeaders()（获取所有响应头）、timeout（设置请求超时时间）等。

下面是一个完整的XMLHttpRequest API请求数据的示例代码：

var xhr = new XMLHttpRequest(); // 创建XHR对象

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 请求成功的处理逻辑
      var responseData = xhr.responseText; // 获取响应的文本内容
      console.log(responseData);
    } else {
      // 请求失败的处理逻辑
      console.log('请求失败：' + xhr.status);
    }
  }
};

xhr.open('GET', 'https://api.example.com/data', true); // 设置请求方法、URL和是否异步

xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头

xhr.send(); // 发送请求

上述代码使用GET方法向https://api.example.com/data发送异步请求，并在请求状态变化时处理响应。如果请求成功（状态码为200），将打印响应的文本内容；否则，将打印请求失败的状态码。

请注意，这只是一个基本的示例，实际使用中您可能需要根据具体需求进行适当的修改和扩展，比如处理POST请求、发送数据、处理错误等。此外，您可能还需要对跨域请求、安全性和异步操作进行更多的处理和配置。

注意：为了兼容性和更现代的方式，您还可以考虑使用Fetch API作为XHR API的替代方案。Fetch API提供了更简洁和强大的功能，并支持Promise和async/await。