极客教程解释AJAX中请求的不同准备状态
AJAX是异步JavaScript和XML的缩写。它是一套网络开发技术，用于创建交互式网络应用程序。AJAX允许网页与服务器通信而不需要重新加载页面。
准备状态是处理AJAX请求的一个重要部分。请求的就绪状态向服务器表明请求的状态，并允许客户端跟踪请求的进展。
在下文中，我们详细介绍了AJAX的不同准备状态。
UNSENT STATE (0)
这是AJAX的第一个准备状态。使用AJAX请求时，在调用send()方法之前，请求被认为处于 “未发送 “状态。这意味着请求还没有被发送到服务器上，说明请求还需要被发送。这种状态也被称为XMLHttpRequest.UNSENT。
语法
http.onreadystatechange = function () {
if (this.readyState == 0) {
//put your code here
console.log('This is UNSET state')
}
}
OPENED 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 STATE (2)
这是AJAX的第三个准备状态。它由整数2表示。Headers Received是AJAX中请求的一个状态，当请求被发送后，服务器用它的头文件进行响应。服务器已经收到了请求，正在准备响应，表示已经收到了响应头信息。
例如，当用户发送请求查看一个网页时，服务器将通过发回页面头信息来回应。这些标头包含的信息有：内容类型、页面长度和页面最后修改的日期。
另一个例子是，当用户向服务器发送一个下载文件的请求。服务器将通过发回文件头来回应，如文件的大小和类型以及最后修改的日期。
语法
http.onreadystatechange = function () {
if (this.readyState == 2) {
//put your code here
console.log('This is HEADERS_RECEIVED state')
}
}
LOADING STATE (3)
AJAX中请求的加载状态是指请求被发送到服务器并收到响应。在这段时间内，请求的状态是 “加载”，表示正在接收响应体。
例如，当用户点击按钮提交表单时，加载状态是指表单提交时和从服务器返回响应（例如，成功或错误信息）时。
另一个例子是当用户点击一个链接来浏览一个新的页面。加载状态是当链接被点击后，新页面被加载。
语法
http.onreadystatechange = function () {
if (this.readyState == 3) {
//put your code here
console.log('This is LOADING state')
}
}
DONE 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请求的进度和适当地处理响应很有用。