Ajax是一種強大的技術，它可以在不重新加載頁面的情況下與后臺交換數據。通過使用Ajax，我們可以輕松地獲取后臺的JSON數據，并將其用于網頁的動態展示和交互。本文將為你介紹如何使用Ajax獲取后臺JSON數據的源碼，并通過舉例說明其實際應用。

一、使用Ajax獲取后臺JSON數據的源碼

下面是一個示例的JavaScript代碼，通過使用Ajax獲取后臺的JSON數據：

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方式和請求地址
xhr.open('GET', 'backend.php', true);
// 設置響應數據類型為JSON
xhr.responseType = 'json';
// 監聽請求的狀態變化
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
// 請求成功，獲取并處理后臺返回的JSON數據
var jsonData = xhr.response;
// 處理JSON數據...
}
};
// 發送Ajax請求
xhr.send();

通過以上代碼，我們創建了一個XMLHttpRequest對象，設置了請求方式和請求地址，并且指定了數據類型為JSON。然后監聽XMLHttpRequest對象的狀態變化，當請求成功時，可以通過response屬性獲取后臺返回的JSON數據。這樣，我們就可以使用獲取到的JSON數據進行相應的處理。

二、使用Ajax獲取后臺JSON數據的實際應用

為了更好地理解如何使用Ajax獲取后臺JSON數據，我們以一個實際的例子來說明。假設我們正在開發一個在線商城的頁面，在該頁面上展示商品的信息。我們可以通過Ajax獲取后臺的商品數據，并將其展示在網頁上。

首先，我們需要準備一個后臺的數據接口，該接口返回商品的JSON數據。一個可能的后臺PHP代碼如下：

// 后臺代碼 backend.php
// 模擬商品數據
$products = array(
array(
'id' => 1,
'name' => 'Apple iPhone 12',
'price' => 9999
),
array(
'id' => 2,
'name' => 'Samsung Galaxy S21',
'price' => 8999
),
// 更多商品...
);
// 設置響應頭，指定數據類型為JSON
header('Content-Type: application/json');
// 輸出商品數據
echo json_encode($products);

在前端頁面的JavaScript代碼中，我們可以通過Ajax獲取到這些商品數據，并進行相應的展示：

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方式和請求地址
xhr.open('GET', 'backend.php', true);
// 設置響應數據類型為JSON
xhr.responseType = 'json';
// 監聽請求的狀態變化
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
// 請求成功，獲取并處理后臺返回的JSON數據
var products = xhr.response;
// 遍歷商品數據，展示在網頁上
for(var i = 0; i < products.length; i++) {
var product = products[i];
// 創建商品信息的DOM元素
var productElement = document.createElement('div');
productElement.innerHTML = '商品名稱：' + product.name + '，價格：' + product.price;
// 將商品信息添加到頁面中
document.body.appendChild(productElement);
}
}
};
// 發送Ajax請求
xhr.send();

通過以上代碼，我們先發送了一個Ajax請求，獲取到后臺返回的商品數據。然后，我們對商品數據進行遍歷，并創建相應的DOM元素，最后將其添加到網頁中。這樣，頁面就展示了從后臺獲取到的商品信息。

結論

Ajax是一種非常實用的技術，通過使用Ajax我們可以輕松地獲取后臺的JSON數據，并將其用于網頁的動態展示和交互。通過本文的示例代碼，你可以掌握使用Ajax獲取后臺JSON數據的方法，并在實際項目中靈活應用。

希望本文對你有所幫助，謝謝閱讀！