数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律学解释 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')
}
}
已接收头部状态 (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 请求的进度并适当地处理响应。
2K+ 阅读量
