解释 AJAX 中请求的不同就绪状态

AJAX 代表异步 JavaScript 和 XML。它是一组用于创建交互式 Web 应用程序的 Web 开发技术。 AJAX 允许网页与服务器通信，而无需重新加载页面。

就绪状态是处理 AJAX 请求的重要部分。请求的就绪状态向服务器指示请求的状态，并允许客户端跟踪请求的进度。

下面我们详细介绍了 AJAX 的不同就绪状态。

未发送状态（0）

这是 AJAX 的第一个就绪状态。它用整数 0 表示。当使用 AJAX 请求时，请求处于“未发送”状态，直到调用 send() 方法为止。这意味着请求还没有发送到服务器，说明请求还需要发送。此状态也称为 XMLHttpRequest.UNSENT。

语法

http.onreadystatechange = function () {
   if (this.readyState == 0) {
      
      //put your code here
      console.log('This is UNSET state')
   }
}

打开状态（1）

这是 AJAX 的第二个就绪状态。用整数1表示。AJAX请求的打开状态是当请求发送到服务器，但尚未收到响应时。这通常是 AJAX 请求周期的第一步，通常由用户操作（例如按钮单击或表单提交）触发。这表明请求已打开并且请求标头已发送。

例如，当用户单击按钮提交表单时，AJAX 请求将发送到服务器，服务器然后处理该请求并发回响应。然后，浏览器处理该响应，并相应地更新页面。另一个例子是，当用户单击链接加载更多内容时，AJAX 请求将发送到服务器以获取附加内容，然后将其显示在页面上。

语法

http.onreadystatechange = function () {
   if (this.readyState == 1) {
      
      //put your code here
      console.log('This is OPENED state')
   }
}

HEADERS_RECEIVED 状态 (2)

这是 AJAX 的第三个就绪状态。它用整数 2 表示。已接收标头是 AJAX 中请求的一种状态，在发送请求并且服务器用其标头进行响应时发生。服务器已收到请求并正在准备响应，表明已收到响应标头。

例如，当用户发送查看网页的请求时，服务器将通过发回页面标头进行响应。这些标头包含内容类型、页面长度以及页面上次修改日期等信息。

另一个示例是用户向服务器发送下载文件的请求。服务器将通过发回文件头进行响应，例如文件的大小和类型以及上次修改的日期。

语法

http.onreadystatechange = function () {
   if (this.readyState == 2) {
      
      //put your code here
      console.log('This is HEADERS_RECEIVED state')
   }
}

加载状态（3）

AJAX 中请求的加载状态是指将请求发送到服务器并收到响应时。在此期间，请求的状态为“loading”，表示正在接收响应正文。

例如，当用户单击按钮提交表单时，加载状态是指表单提交并从服务器返回响应（例如成功或错误消息）时。

另一个示例是当用户单击链接来导航新页面时。加载状态是指单击链接并加载新页面时。

语法

http.onreadystatechange = function () {
   if (this.readyState == 3) {
      
      //put your code here
      console.log('This is LOADING state')
   }
}

完成状态 (4)

AJAX 中请求的完成状态是指请求已完成并收到响应时。此时服务器已响应请求，并且数据可用于进一步处理。这表明请求已完成并且已收到响应。

语法

http.onreadystatechange = function () {
   if (this.readyState == 4) {
      
      //put your code here
      console.log('This is DONE state')
   }
}

示例

在此示例中，我们将执行 AJAX 调用并查看不同的就绪状态。我们将更新不同州的网页，说明其当前状态。我们无法执行 UNSENT 状态，因为此状态仅在发送 AJAX 调用之前可用。我们使用按钮单击事件处理程序来触发 AJAX 调用。

<html>
<body>
   <h2>Different <i>Ready State</i> of AJAX</h2>
   <button onclick = "ajaxCall()">Trigger AJAX Call</button>
   <div id = "root" style = "border: 1px solid black; padding: 1%"></div>
   <script>
      let root = document.getElementById('root')
      function ajaxCall() {
         root.innerHTML = 'AJAX Call Started! <br /><br />'
            
         //AJAX Call
         let http = new XMLHttpRequest()
         http.onreadystatechange = function () {
            if (this.readyState == 1) {
               root.innerHTML += 'This is OPENED state <br />'
            }
            if (this.readyState == 2) {
               root.innerHTML += 'This is HEADERS_RECEIVED state <br />'
            }
            if (this.readyState == 3) {
               root.innerHTML += 'This is LOADING state <br />'
            }
            if (this.readyState == 4) {
               root.innerHTML += 'This is DONE state <br />'
            }
         }
         http.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true)
         http.onload = function () {
            root.innerHTML += '<br />AJAX Call Completed!'
         }
         http.send()
      }
   </script>
</body>
</html>

结论

在 JavaScript 中，AJAX 请求有四种不同的就绪状态：未发送、打开、收到标头和完成。未发送状态是指请求尚未发送到服务器。打开状态是当请求已发送到服务器但尚未收到响应时。标头接收状态是服务器已使用其标头进行响应并正在准备响应时的状态。完成状态是指请求已完成并且已收到响应。这些就绪状态中的每一个都可以通过 XMLHttpRequest 对象的readyState 属性来访问。它们对于跟踪 AJAX 请求的进度并适当处理响应非常有用。

以上就是解释 AJAX 中请求的不同就绪状态的详细内容，更多请关注编程之家其它相关文章！