AJAX（Asynchronous JavaScript and XML）是一種通過在后臺與服務器進行少量數據交換，而不影響頁面當前顯示和行為的方式來更新網頁的技術。它可以實現網頁的異步加載，提升用戶體驗和頁面的響應速度。本文將通過幾個案例來展示如何使用AJAX完成異步加載。

案例一：實時搜索

假設我們有一個商品列表頁面，用戶可以通過輸入關鍵字來搜索商品。在傳統的方法中，用戶需要點擊搜索按鈕并等待頁面加載，然后才能看到搜索結果。而使用AJAX可以實現實時搜索的功能，用戶每輸入一個字母，就會根據關鍵字動態加載對應的商品列表。

<input type="text" id="search" onkeyup="searchProduct()">
<script>
function searchProduct() {
var keyword = document.getElementById("search").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var productList = JSON.parse(xhr.responseText);
// 根據搜索結果更新頁面內容
}
};
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.send();
}
</script>

上述代碼中，我們監聽了輸入框的onkeyup事件，每次按鍵后會自動調用searchProduct函數。函數中，我們通過XMLHttpRequest對象創建了一個異步請求，通過GET方式發送給服務器，在URL中帶上關鍵字參數。當服務器返回響應時，我們可以根據搜索結果更新頁面的商品列表。

案例二：無需刷新頁面的表單提交

傳統的表單提交會導致頁面的刷新，用戶體驗較差。而使用AJAX，我們可以實現無需刷新頁面的表單提交。假設我們有一個評論系統，用戶在表單中輸入評論內容后，點擊提交按鈕即可實現評論的提交并顯示在頁面。

<form id="commentForm">
<input type="text" id="comment" name="comment">
<button type="button" onclick="submitComment()">提交評論</button>
</form>
<script>
function submitComment() {
var comment = document.getElementById("comment").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理評論提交成功后的邏輯
}
};
xhr.open("POST", "comment.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("comment=" + comment);
}
</script>

上述代碼中，我們監聽了提交按鈕的onclick事件，點擊按鈕后會自動調用submitComment函數。函數中，我們通過XMLHttpRequest對象創建了一個異步請求，通過POST方式發送給服務器，在請求頭中設置Content-type為application/x-www-form-urlencoded，并將評論內容作為請求體發送。當服務器返回響應時，我們可以處理評論提交成功后的邏輯。

案例三：無限滾動加載

對于比較長的頁面，用戶需要不斷地向下滾動以查看更多內容。使用AJAX可以實現無需手動點擊加載更多按鈕，當用戶滾動到頁面底部時，自動加載更多內容。

<div id="content"></div>
<script>
window.onscroll = function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
loadMoreContent();
}
};
function loadMoreContent() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var moreContent = xhr.responseText;
document.getElementById("content").innerHTML += moreContent;
}
};
xhr.open("GET", "more_content.php", true);
xhr.send();
}
</script>

上述代碼中，我們監聽了window對象的onscroll事件，每次滾動時會判斷是否已經滾動到頁面底部，如果是，則自動調用loadMoreContent函數。函數中，我們通過XMLHttpRequest對象創建了一個異步請求，通過GET方式發送給服務器。當服務器返回響應時，我們將響應內容追加到頁面的content元素中，實現無限滾動加載更多內容。

通過以上案例，我們可以看到AJAX的強大之處，它可以實現網頁的異步加載，提升用戶體驗和頁面的響應速度。無論是實時搜索、無需刷新頁面的表單提交還是無限滾動加載，都可以借助AJAX來實現。希望本文的案例能幫助讀者更好地理解和應用AJAX技術。