AJAX (Asynchronous JavaScript and XML) 是一種用于創建交互式網頁的技術。它能夠使網頁不必重新加載即可更新部分內容，提高用戶體驗和網頁加載速度。本文將介紹使用原生的AJAX的幾個步驟，包括創建XMLHttpRequest對象、發送請求、接收響應以及更新網頁內容，并通過舉例說明其應用。

第一步是創建XMLHttpRequest對象。該對象用于與服務器進行交互，并可以發送和接收數據。通過調用其構造函數，我們可以創建一個新的XMLHttpRequest對象。以下是一個示例：

var xhttp = new XMLHttpRequest();

第二步是發送請求。一旦創建了XMLHttpRequest對象，我們可以使用open()和send()方法來發送請求。open()方法用于指定請求的類型（GET或POST）以及要請求的URL。send()方法用于發送請求。以下是一個示例：

xhttp.open("GET", "example.php", true);
xhttp.send();

第三步是接收響應。當服務器返回響應時，我們需要使用onreadystatechange事件來處理響應。onreadystatechange事件會在readyState屬性發生變化時觸發。可以使用readyState屬性來檢查請求的狀態，status屬性來檢查響應的狀態。以下是一個示例：

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 處理響應的代碼
}
};

第四步是更新網頁內容。一旦接收到響應，我們可以使用responseText屬性來獲取響應的內容，并將其用于更新網頁的特定部分。例如，我們可以將響應的內容顯示在一個

document.getElementById("mydiv").innerHTML = xhttp.responseText;

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp.responseText);
var list = "";
for (var i = 0; i< response.length; i++) {
list += "
" + response[i] + "
";
}
document.getElementById("mylist").innerHTML = list;
}
};
xhttp.open("GET", "data.php", true);
xhttp.send();