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 中請求的不同就緒狀態的詳細內容，更多請關注www.92cms.cn其它相關文章！
