今天我們來討論一種前端技術——Ajax。Ajax（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術，通過在后臺與服務器進行少量數據交換，可以使網頁實現異步更新。這種技術的一個典型應用就是在不刷新整個網頁的情況下，實時更新部分頁面內容。在本文中，我們將通過一個具體的實例，來介紹Ajax的使用。

假設我們有一個網頁，需要實現一個按鈕，當用戶點擊按鈕后，向服務器發送一個請求，并將服務器返回的結果展示在頁面上。我們可以通過Ajax來實現這個功能。下面是一個使用Ajax請求實例的代碼：

// JavaScript代碼
function getData() {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽readyState改變事件
xhr.onreadystatechange = function() {
// 數據已經返回且請求成功完成
if (xhr.readyState === 4 && xhr.status === 200) {
var data = xhr.responseText;
// 更新頁面內容
document.getElementById("result").innerHTML = data;
}
};
// 發送GET請求
xhr.open("GET", "add2.php");
xhr.send();
}

在上述代碼中，我們首先創建了一個XMLHttpRequest對象，該對象用于向服務器發送請求并接收返回的數據。然后我們使用onreadystatechange事件監聽readyState的變化，當readyState為4（數據已成功返回）且status為200（請求成功）時，我們可以獲取服務器返回的數據并將其展示在頁面中。最后，我們使用open方法指定HTTP請求方式為GET，并通過send方法發送請求。

在這個例子中，我們假設服務器提供的add2.php頁面將傳入的數字加2后返回。當用戶點擊按鈕時，將會觸發getData函數，函數中的Ajax請求會向服務器發送一個GET請求到add2.php。服務器執行相應的操作后，返回加2后的結果。通過監聽readyState的改變，我們可以實現頁面內容的更新，將服務器返回的結果顯示在頁面上。

除了發送GET請求，我們還可以發送POST請求。下面是一個使用Ajax發送POST請求的示例代碼：

// JavaScript代碼
function postData() {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽readyState改變事件
xhr.onreadystatechange = function() {
// 數據已經返回且請求成功完成
if (xhr.readyState === 4 && xhr.status === 200) {
var data = xhr.responseText;
// 更新頁面內容
document.getElementById("result").innerHTML = data;
}
};
// 發送POST請求
xhr.open("POST", "add2.php");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("number=5");
}

在這個例子中，我們使用的是open方法的第一個參數是"POST"，并使用setRequestHeader方法設置請求頭信息，告訴服務器以表單形式傳遞數據。同時，我們通過send方法傳遞一個字符串，該字符串包含要傳遞給服務器的數據。服務器收到請求后，通過解析數據并執行相應的操作，返回結果給前端。

通過以上實例，我們可以看到使用Ajax可以方便地向服務器發送請求并實時更新頁面內容。無論是GET請求還是POST請求，我們都可以通過監聽readyState和status的改變來獲取服務器返回的數據，并將其展示在頁面上。Ajax技術的廣泛應用使得網頁的交互性大大提高，為用戶提供了更好的體驗。