隨著 Web 應用程序越來越復雜，單純依靠 HTML、CSS 和 JavaScript 的交互機制已經顯得力不從心。這時候，我們需要借助一些現代技術，比如：Ajax（Asynchronous JavaScript and XML，異步的 JavaScript 和 XML）。今天我們就來學習一下 Ajax。

假設有一個簡單的頁面，頁面上有一個按鈕和一個區域用于顯示獲取到的數據。在傳統的 Web 開發方式中，點擊按鈕之后需要重新刷新整個頁面才能更新數據。但是在使用 Ajax 的情況下，我們可以做到只更新需要更新的部分而不需要重新加載整個頁面。

// HTML 代碼
<button id="fetch-data">獲取數據</button>
<div id="data-container"></div>
// JavaScript 代碼
let button = document.getElementById('fetch-data');
let container = document.getElementById('data-container');
button.addEventListener('click', function() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'get-data.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
container.innerHTML = xhr.responseText;
}
};
xhr.send();
});

上面的代碼中，我們使用了 XMLHttpRequest 對象來發起 HTTP 請求，并在響應完成后更新頁面。其中，xhr.open() 方法指定了請求類型（GET、POST、PUT、DELETE 等）、請求的 URL 和是否要使用異步模式。xhr.onload() 方法在服務器響應后被調用，可以用來處理服務器返回的數據。

在實際開發中，我們還可以將數據以 JSON 格式返回并用 JavaScript 來解析。比如：

// PHP 代碼
$data = array(
array(
'name' =>'Alice',
'age' =>20
),
array(
'name' =>'Bob',
'age' =>25
)
);
echo json_encode($data);
// JavaScript 代碼
xhr.onload = function() {
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
let html = '';
for (let i = 0; i< data.length; i++) {
let name = data[i].name;
let age = data[i].age;
html += '<p>姓名：' + name + '，年齡：' + age + '</p>';
}
container.innerHTML = html;
}
};

通過將數據以 JSON 格式返回，我們可以更方便地在前端進行數據處理。

Ajax 技術使得 Web 開發更加靈活和高效，它可以實現與服務器的異步通信，并且只更新需要更新的部分，同時還可以處理多種格式的數據。如果你想要寫出更加優秀的 Web 應用程序，那么一定要掌握 Ajax。