AJAX（Asynchronous JavaScript And XML）是一種通過JavaScript和XML來實現網頁異步通信的技術。在Web開發中，使用AJAX能夠實現無需刷新整個頁面的情況下，只更新局部內容的目的。本文將以一個在線商城為例，介紹如何利用AJAX異步加載頁面的商品信息。

假設我們有一個在線商城的首頁，其中包含了多個商品的縮略圖、價格和名稱。傳統的做法是在頁面加載時將所有的商品信息一次性加載完畢并顯示在頁面上。這樣的做法存在一些問題。首先，如果商品信息很多，加載時間會很長，影響用戶的體驗。其次，如果網站的商品信息需要經常更新，每次更新都需要刷新整個頁面。而通過使用AJAX，我們可以實現只在用戶需要時加載商品信息，大大提升用戶體驗。

$.ajax({
url: 'get_product_info.php',
type: 'GET',
dataType: 'json',
success: function(data) {
for(var i=0; i<data.length; i++) {
var product = data[i];
var thumbnail = $('<img>').attr('src', product.thumbnail);
var price = $('<p>').text('價格：' + product.price);
var name = $('<p>').text('商品名稱：' + product.name);
var productInfo = $('<div>').append(thumbnail, price, name);
$('.product-container').append(productInfo);
}
}
});

以上代碼是一個簡單的AJAX請求示例。我們通過調用jQuery的$.ajax()方法發送一個GET請求到get_product_info.php頁面，該頁面返回一個JSON格式的商品信息數組。當請求成功后，success函數將會被調用。我們遍歷返回的商品信息數組，然后動態創建圖片、價格和名稱的DOM元素，并將其添加到類名為product-container的容器中。

當用戶訪問我們的首頁時，初始時只會看到商品的縮略圖，價格和名稱是隱藏的。當用戶點擊某個商品的縮略圖時，我們將會通過AJAX請求加載對應商品的詳細信息。

$('.thumbnail').click(function() {
var productId = $(this).data('id');
$.ajax({
url: 'get_product_detail.php',
type: 'GET',
dataType: 'json',
data: {id: productId},
success: function(product) {
var description = $('<p>').text('商品描述：' + product.description);
var rating = $('<p>').text('評分：' + product.rating);
$('.product-detail').empty().append(description, rating).show();
}
});
});

以上代碼是一個商品詳細信息的加載示例。當用戶點擊某個商品的縮略圖時，click事件將會被觸發。我們從點擊的縮略圖中獲取到商品的ID，然后將其作為參數發送到get_product_detail.php頁面。該頁面返回一個JSON格式的商品詳細信息。當請求成功后，success函數將會被調用。我們在函數中動態創建商品描述和評分的DOM元素，并將其添加到類名為product-detail的容器中。

通過上述示例，我們可以看到如何利用AJAX實現頁面的異步加載。在實際的商城網站中，我們可以利用AJAX來實現多種功能，例如異步加載商品評論、購物車的局部更新、搜索結果的動態加載等。AJAX的應用不僅可以提升用戶體驗，同時也減輕了服務器的負載。

總而言之，AJAX的異步加載能夠在不刷新整個頁面的情況下實現局部內容的更新。通過以上示例，我們可以看到AJAX在加載頁面的商品信息方面的應用。使用AJAX能夠大大提升用戶體驗，并為商城網站的開發帶來更多的可能性。