AJAX 代表異步 JavaScript 和 XML。它是一組用于創(chuàng)建交互式 Web 應(yīng)用程序的 Web 開發(fā)技術(shù)。 AJAX 允許網(wǎng)頁與服務(wù)器通信，而無需重新加載頁面。
就緒狀態(tài)是處理 AJAX 請求的重要部分。請求的就緒狀態(tài)向服務(wù)器指示請求的狀態(tài)，并允許客戶端跟蹤請求的進度。
下面我們詳細介紹了 AJAX 的不同就緒狀態(tài)。
未發(fā)送狀態(tài)（0）
這是 AJAX 的第一個就緒狀態(tài)。它用整數(shù) 0 表示。當(dāng)使用 AJAX 請求時，請求處于“未發(fā)送”狀態(tài)，直到調(diào)用 send() 方法為止。這意味著請求還沒有發(fā)送到服務(wù)器，說明請求還需要發(fā)送。此狀態(tài)也稱為 XMLHttpRequest.UNSENT。
語法
http.onreadystatechange = function () {
if (this.readyState == 0) {
//put your code here
console.log('This is UNSET state')
}
}
登錄后復(fù)制
打開狀態(tài)（1）
這是 AJAX 的第二個就緒狀態(tài)。用整數(shù)1表示。AJAX請求的打開狀態(tài)是當(dāng)請求發(fā)送到服務(wù)器，但尚未收到響應(yīng)時。這通常是 AJAX 請求周期的第一步，通常由用戶操作（例如按鈕單擊或表單提交）觸發(fā)。這表明請求已打開并且請求標(biāo)頭已發(fā)送。
例如，當(dāng)用戶單擊按鈕提交表單時，AJAX 請求將發(fā)送到服務(wù)器，服務(wù)器然后處理該請求并發(fā)回響應(yīng)。然后，瀏覽器處理該響應(yīng)，并相應(yīng)地更新頁面。另一個例子是，當(dāng)用戶單擊鏈接加載更多內(nèi)容時，AJAX 請求將發(fā)送到服務(wù)器以獲取附加內(nèi)容，然后將其顯示在頁面上。
語法
http.onreadystatechange = function () {
if (this.readyState == 1) {
//put your code here
console.log('This is OPENED state')
}
}
登錄后復(fù)制
HEADERS_RECEIVED 狀態(tài) (2)
這是 AJAX 的第三個就緒狀態(tài)。它用整數(shù) 2 表示。 已接收標(biāo)頭是 AJAX 中請求的一種狀態(tài)，在發(fā)送請求并且服務(wù)器用其標(biāo)頭進行響應(yīng)時發(fā)生。服務(wù)器已收到請求并正在準(zhǔn)備響應(yīng)，表明已收到響應(yīng)標(biāo)頭。
例如，當(dāng)用戶發(fā)送查看網(wǎng)頁的請求時，服務(wù)器將通過發(fā)回頁面標(biāo)頭進行響應(yīng)。這些標(biāo)頭包含內(nèi)容類型、頁面長度以及頁面上次修改日期等信息。
另一個示例是用戶向服務(wù)器發(fā)送下載文件的請求。服務(wù)器將通過發(fā)回文件頭進行響應(yīng)，例如文件的大小和類型以及上次修改的日期。
語法
http.onreadystatechange = function () {
if (this.readyState == 2) {
//put your code here
console.log('This is HEADERS_RECEIVED state')
}
}
登錄后復(fù)制
加載狀態(tài)（3）
AJAX 中請求的加載狀態(tài)是指將請求發(fā)送到服務(wù)器并收到響應(yīng)時。在此期間，請求的狀態(tài)為“l(fā)oading”，表示正在接收響應(yīng)正文。
例如，當(dāng)用戶單擊按鈕提交表單時，加載狀態(tài)是指表單提交并從服務(wù)器返回響應(yīng)（例如成功或錯誤消息）時。
另一個示例是當(dāng)用戶單擊鏈接來導(dǎo)航新頁面時。加載狀態(tài)是指單擊鏈接并加載新頁面時。
語法
http.onreadystatechange = function () {
if (this.readyState == 3) {
//put your code here
console.log('This is LOADING state')
}
}
登錄后復(fù)制
完成狀態(tài) (4)
AJAX 中請求的完成狀態(tài)是指請求已完成并收到響應(yīng)時。此時服務(wù)器已響應(yīng)請求，并且數(shù)據(jù)可用于進一步處理。這表明請求已完成并且已收到響應(yīng)。
語法
http.onreadystatechange = function () {
if (this.readyState == 4) {
//put your code here
console.log('This is DONE state')
}
}
登錄后復(fù)制
示例
在此示例中，我們將執(zhí)行 AJAX 調(diào)用并查看不同的就緒狀態(tài)。我們將更新不同州的網(wǎng)頁，說明其當(dāng)前狀態(tài)。我們無法執(zhí)行 UNSENT 狀態(tài)，因為此狀態(tài)僅在發(fā)送 AJAX 調(diào)用之前可用。我們使用按鈕單擊事件處理程序來觸發(fā) AJAX 調(diào)用。
<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>
登錄后復(fù)制
結(jié)論
在 JavaScript 中，AJAX 請求有四種不同的就緒狀態(tài)：未發(fā)送、打開、收到標(biāo)頭和完成。未發(fā)送狀態(tài)是指請求尚未發(fā)送到服務(wù)器。打開狀態(tài)是當(dāng)請求已發(fā)送到服務(wù)器但尚未收到響應(yīng)時。標(biāo)頭接收狀態(tài)是服務(wù)器已使用其標(biāo)頭進行響應(yīng)并正在準(zhǔn)備響應(yīng)時的狀態(tài)。完成狀態(tài)是指請求已完成并且已收到響應(yīng)。這些就緒狀態(tài)中的每一個都可以通過 XMLHttpRequest 對象的readyState 屬性來訪問。它們對于跟蹤 AJAX 請求的進度并適當(dāng)處理響應(yīng)非常有用。
以上就是解釋 AJAX 中請求的不同就緒狀態(tài)的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
