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

很酷的站长

于 2023-01-06 23:07:47 发布

阅读量226

点赞数

分类专栏：编程笔记文章标签： ajax javascript 前端

原文链接：https://s.10zhan.com/art/182.html

版权

编程笔记专栏收录该内容

554 篇文章 21 订阅

订阅专栏

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 中请求的加载状态是将请求发送到服务器并收到响应的时间。在此期间，请求的状态为“正在加载”，表示正在接收响应正文。

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

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

语法

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 调用并查看不同的就绪状态。我们将更新不同州的网页，说明其当前状态。我们无法执行未发送状态，因为此状态仅在我们发送 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 请求的进度并适当地处理响应。