Ajax（Asynchronous JavaScript and XML）是一種用于創建交互式和動態網頁的技術，它通過在后臺與服務器進行少量數據的交換，實現了頁面的無刷新更新。Ajax的實現依賴于多個關鍵對象，包括XMLHttpRequest對象，數據交互對象和回調函數。這些關鍵對象的組合使用，使得開發者能夠通過Ajax技術實現各種功能，例如動態加載內容、實時搜索、表單驗證等。本文將詳細介紹這些關鍵對象及其應用。

XMLHttpRequest對象

XMLHttpRequest對象是Ajax技術的核心，它負責與服務器進行數據交互。通過XMLHttpRequest對象，開發者可以向服務器發送請求并接收響應數據，而不需要重新加載整個頁面。以下是一個使用XMLHttpRequest對象實現動態加載內容的例子：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.html", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("content").innerHTML = xhr.responseText;
}
};
xhr.send();

上述代碼通過XMLHttpRequest對象發送GET請求獲取data.html文件的內容，并將返回的響應數據更新到頁面中的一個元素（id為“content”）中。這樣，頁面的內容就可以實現動態更新，而不需要刷新整個頁面。

數據交互對象

數據交互對象負責處理數據的發送和接收，它可以是XML、JSON等格式。例如，如果服務器返回的是JSON格式的數據，我們可以使用數據交互對象將其解析為JavaScript對象，并對其進行處理：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 對數據進行處理
}
};
xhr.send();

上述代碼使用XMLHttpRequest對象發送GET請求獲取data.json文件中的數據，并將返回的響應數據解析為JavaScript對象。在數據解析完成后，我們可以對其進行各種操作，如渲染到頁面上、進行計算等。

回調函數

回調函數用于處理服務器返回的數據。在Ajax請求完成后，如果服務器返回了響應數據，瀏覽器會調用回調函數來處理這些數據。以下是一個使用回調函數實現實時搜索的例子：

function search(keyword) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
// 處理搜索結果
}
};
xhr.send();
}
document.getElementById("input").addEventListener("input", function() {
var keyword = this.value;
// 調用search函數進行搜索
search(keyword);
});

上述代碼中，我們通過addEventListener函數為輸入框添加了一個input事件監聽器。當輸入框內容發生變化時，回調函數search將被調用，并根據輸入的關鍵字發送Ajax請求，并處理服務器返回的搜索結果。這樣的實時搜索功能能夠在用戶輸入內容時，動態地顯示搜索建議或搜索結果。

通過使用XMLHttpRequest對象、數據交互對象和回調函數，我們可以實現各種功能，從而提升網頁的交互性和用戶體驗。無論是動態加載內容、實時搜索還是表單驗證，都可以借助Ajax技術實現，并且不需要刷新整個頁面。