資料結構
網路
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+ 閱讀量
