XMLHttpRequest 对象全能解读：跨时代浏览器兼容的请求利器

2023-03-25 00:47:03

XMLHttpRequest：增强 Web 应用响应能力和交互性的关键

什么是 XMLHttpRequest？

XMLHttpRequest（XHR）是一个 JavaScript 对象，使 web 应用程序能够与服务器通信而无需重新加载页面。它构成了 AJAX（异步 JavaScript 和 XML）技术的基础，该技术以其提高交互性、响应性和应用程序性能而闻名。

为何使用 XMLHttpRequest？

XMLHttpRequest 提供了以下主要优势：

异步通信： 允许应用程序在不干扰页面渲染的情况下向服务器发送请求，从而提高了响应能力。
跨浏览器兼容性： XHR 在所有主要浏览器中都受支持，简化了跨平台开发。
请求定制： XHR 允许您设置请求头、指定数据格式以及处理响应结果的不同方式。
增强用户体验： 通过异步请求更新页面元素，XHR 提供了更流畅、更动态的用户体验。

创建和使用 XMLHttpRequest

创建 XMLHttpRequest 对象很简单：

var request = new XMLHttpRequest();

然后，您可以使用以下步骤向服务器发送请求：

使用 open() 方法指定请求类型和 URL。
使用 send() 方法发送请求。
使用 onreadystatechange 事件侦听器监控请求状态。
在 onreadystatechange 事件侦听器中，检查 readyState 和 status 属性以获取请求状态和响应状态。
如果请求成功，可以使用 responseText 属性检索响应文本。

XMLHttpRequest 属性和方法

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

属性：

readyState：表示请求的当前状态。
status：指示响应状态。
responseText：包含服务器响应的文本。

方法：

open()：初始化请求。
send()：发送请求。
abort()：中止当前请求。

示例代码

以下代码展示了如何使用 XMLHttpRequest 向服务器发送 GET 请求并更新页面上的元素：

<script>
  var btn = document.getElementById("btn");
  var result = document.getElementById("result");

  btn.addEventListener("click", function() {
    var request = new XMLHttpRequest();
    request.open("GET", "data.json");
    request.send();

    request.onreadystatechange = function() {
      if (request.readyState === 4 && request.status === 200) {
        var data = JSON.parse(request.responseText);
        result.innerHTML = data.message;
      }
    };
  });
</script>