Ajax异步通信与XMLhttpRequest对象的属性方法及事件

最新推荐文章于 2024-07-15 22:52:27 发布

Coding4u547

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量1k

点赞数 24

分类专栏：前端文章标签： ajax okhttp 前端 es6

本文链接：https://blog.csdn.net/qq_53018064/article/details/136514572

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

AJAX 的英文全称 Asynchronous JavaScript And XML，其中Asynchronous就是指的异步，这里异步指通过 AJAX 向服务器请求数据，在不刷新整个页面的情况下，更新页面上的部分内容。

通过使用Ajax，可以创建更动态和响应性的Web应用程序，因为它使得页面可以在后台与服务器进行数据交换，而无需打断用户的操作或重新加载整个页面。这种异步通信的能力使得网页可以在后台向服务器请求数据，然后根据这些数据更新页面的内容，从而提供更流畅和交互式的用户体验。

在使用Ajax时，常见的步骤包括创建XMLHttpRequest对象，发送请求到服务器，处理服务器响应并更新页面内容。现在主流的Ajax的JavaScript库和框架有jQuery、React、Vue等，简化了Ajax的使用并提供了更强大的功能和更方便的API。

XMLHttpRequest对象是用于在JavaScript中发起HTTP请求的核心对象。它具有一系列属性、方法和事件，可以控制HTTP请求的细节，以及在请求过程中的各种状态。以下是XMLHttpRequest对象的主要属性、方法和事件：

属性：

onreadystatechange：表示每当readyState属性改变时调用的事件处理程序的函数。这个属性通常用于指定一个回调函数，以便在XMLHttpRequest对象的状态发生变化时执行特定的操作。
readyState：表示XMLHttpRequest对象的状态，有以下数值：
- 0: 未初始化 - 对象已创建，但尚未调用open()方法。
- 1: 启动 - 已调用open()方法，但尚未调用send()方法。
- 2: 发送 - 已调用send()方法，但尚未接收到响应。
- 3: 接收 - 已接收到部分响应数据。
- 4: 完成 - 已接收到所有响应数据。
responseText：返回作为请求响应体接收的文本。如果请求未完成或失败，则该属性返回null。
responseXML：返回作为请求响应体接收的XML文档对象（如果响应的内容类型是"text/xml"或"application/xml"）。如果请求未完成或失败，则该属性返回null。
status：返回HTTP状态代码（例如200表示成功，404表示未找到，等等）。
statusText：返回HTTP状态消息（例如"OK"、"Not Found"等）。

方法：

open(method, url, async, user, password)：初始化请求。参数分别是HTTP方法、URL、是否异步、可选的用户名和密码。
send(data)：发送请求。可选地，可以传递数据作为请求体。
setRequestHeader(header, value)：设置HTTP请求头。
abort()：取消当前的HTTP请求。

事件：

onreadystatechange：每当readyState属性发生变化时触发。
onload：当请求成功完成时触发。
onerror：当请求失败时触发。
ontimeout：当请求超时时触发。
onprogress：在接收响应期间触发，用于跟踪下载进度。
onabort：当请求被取消时触发。

这些属性、方法和事件使得JavaScript可以控制HTTP请求的细节，并在请求过程中实时响应和处理各种状态。

下面是创建Ajax实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX 的使用</title>
    <script>
      window.onload = function () {
        if (window.XMLHttpRequest) {
          // Mozilla，Safari，IE7+ 等浏览器适用
          var httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
          // 兼容IE6及以下browser
          var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 规定发送请求要求
        httpRequest.open(
          "GET",
          "https://jsonplaceholder.typicode.com/users",
          true
        );
        // 发送请求到服务器
        httpRequest.send();
        httpRequest.onreadystatechange = function () {
          console.log(httpRequest.readyState);
          console.log(httpRequest.status);
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            // 请求成功
            document.getElementById("item").innerHTML = "请求成功";
          } else {
            // 请求失败
            document.getElementById("item").innerHTML = "请求失败";
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="item"></div>
  </body>
</html>

我们打开live serve到游览器控制台，可以看到以下状态码