在前端開發中，Ajax是非常常見的技術。它可以讓網頁實現異步更新，提升用戶體驗。而Ajax的state狀態則是用來表示請求的不同階段的，它有5種狀態。下面將對這5種狀態進行詳細介紹，并舉例說明。

1. 0未初始化狀態（UNSENT）

var xhr = new XMLHttpRequest();
console.log(xhr.readyState);  // 輸出結果為0

在這個階段，XMLHttpRequest對象已經創建，但是還沒有調用open方法。我們可以將其理解為一封信已經準備好，但是還沒有填寫收件人地址。

2. 1載入（OPENED）

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.com", true);
console.log(xhr.readyState);  // 輸出結果為1

在這個階段，open方法已經被調用，但是還沒有調用send方法。這個階段主要用來設置請求的一些參數，例如請求的類型和URL地址。可以理解為信信封已經填寫完畢，準備投遞。

3. 2載入完成（HEADERS_RECEIVED）

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.com", true);
xhr.send();
console.log(xhr.readyState);  // 輸出結果為2

在這個階段，send方法已經被調用，并且已經接收到了響應的頭信息。可以理解為信已經投遞給收件人，收件人已經接收到信件。

4. 3交互中（LOADING）

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.com", true);
xhr.send();
xhr.onreadystatechange = function() {
console.log(xhr.readyState);  // 輸出結果為3
}

在這個階段，數據正在傳輸中，我們可以通過onreadystatechange事件來監視數據的傳輸進度。可以將其理解為信封中的信件正在傳遞過程中。

5. 4完成（DONE）

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.com", true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.readyState);  // 輸出結果為4
}
}

在這個階段，請求已經完成，數據傳輸成功。我們可以在這個階段獲取到完整的響應數據。可以將其理解為收件人已經閱讀了信件，完成了一次請求。

綜上所述，Ajax的state狀態共有5種。通過這5種狀態，我們可以了解到請求的不同階段，從而可以在不同的階段進行相應的處理。熟悉這些狀態是進行Ajax開發的基礎，希望本文的介紹對大家有所幫助。