Ajax是一種在Web開發中非常常見的技術，它可以通過異步請求從服務器獲取頁面內容，而無需刷新整個頁面。這種技術在用戶體驗和頁面性能方面都有很大的優勢。本文將詳細介紹如何使用Ajax獲取頁面內容，并給出一些具體的應用舉例。

要使用Ajax獲取頁面內容，首先我們需要創建一個XMLHttpRequest對象。這個對象可以用來向服務器發送請求，并接收服務器返回的數據。我們可以使用JavaScript中的XMLHttpRequest對象來完成這個任務。

var xhr = new XMLHttpRequest();

接下來，我們需要使用xhr對象的open方法來設置請求的方式、請求的URL和是否采用異步方式。請求方式可以是GET或者POST，請求URL是指向服務器資源的URL。異步方式意味著瀏覽器在發送請求后不會等待服務器的響應，而是繼續執行后續代碼。異步請求是Ajax的核心特性，它使得網頁可以同時處理多個用戶請求，提高了用戶體驗。

xhr.open("GET", "http://www.example.com/page.html", true);

在設置請求方式、URL和異步方式后，我們可以使用xhr對象的send方法來發送請求。如果是GET請求，send方法不需要傳遞參數；如果是POST請求，我們可以將參數作為send方法的參數。

xhr.send();

當服務器返回響應后，我們可以通過xhr對象的responseText屬性獲取返回的文本內容。這個文本內容可以是HTML、XML或者純文本等，具體取決于服務器返回的數據類型。

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
console.log(response);
}
};

通過上面的代碼，我們可以在控制臺中打印出從服務器返回的頁面內容。

下面我們來舉一個具體的例子，假設我們有一個基于Ajax的搜索功能，用戶輸入關鍵字后，我們需要向服務器發送請求，并將返回的搜索結果顯示在頁面上。我們可以通過以下代碼來實現：

var searchInput = document.getElementById("search-input");
var searchButton = document.getElementById("search-button");
var searchResults = document.getElementById("search-results");
searchButton.addEventListener("click", function() {
var keyword = searchInput.value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.com/search?keyword=" + keyword, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
searchResults.innerHTML = response;
}
};
});

在上面的例子中，我們首先獲取了輸入框、搜索按鈕和搜索結果的元素。當用戶點擊搜索按鈕后，我們獲取用戶輸入的關鍵字，然后使用XMLHttpRequest對象發送GET請求，并將關鍵字作為URL參數傳遞給服務器。當服務器返回響應后，我們將返回的內容賦值給搜索結果的元素。

Ajax的應用場景非常廣泛，除了搜索功能之外，它還可以用于動態加載頁面內容、提交表單數據、實時聊天等等。通過使用Ajax，我們可以提供更加流暢和高效的網頁體驗，提升用戶的滿意度。

總之，Ajax是一種強大的技術，它可以通過異步請求從服務器獲取頁面內容，而無需刷新整個頁面。我們可以使用JavaScript中的XMLHttpRequest對象來實現這個功能，并在收到服務器響應后處理返回的數據。通過實際的例子，我們可以看到Ajax在Web開發中的重要作用。