Ajax如何獲取JSON數據

Ajax（Asynchronous JavaScript and XML）是一種在Web頁面中，使用異步傳輸數據技術的一個簡單方法。通過使用Ajax，可以通過不重新加載整個頁面的情況下，從服務器獲取數據并更新部分頁面內容。其中一種常見的數據格式是JSON（JavaScript Object Notation），它可以方便地表示結構化數據。本文將介紹如何使用Ajax從服務器獲取JSON數據。

假設我們有一個在線商店的網站，我們需要顯示最新的商品列表。我們可以使用Ajax來從服務器獲取最新的商品信息，然后在網頁上更新顯示。

首先，我們需要創建一個用于顯示商品的HTML元素。例如，我們可以使用一個div元素，并給它一個唯一的id，以便我們可以在JavaScript中通過id選擇該元素。

<div id="product-list"></div>

接下來，我們可以使用JavaScript中的XMLHttpRequest對象來發送請求并獲取JSON數據。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/products.json', true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
// 更新頁面上的商品列表
var productListElement = document.getElementById('product-list');
for(var i = 0; i < products.length; i++) {
var product = products[i];
var productElement = document.createElement('div');
productElement.textContent = product.name + ' - ' + product.price;
productListElement.appendChild(productElement);
}
}
};
xhr.send();

在上面的代碼中，我們首先創建了一個XMLHttpRequest對象，并使用open方法指定請求的類型（GET）、URL和是否為異步（true）。

然后，我們定義了一個回調函數xhr.onreadystatechange，該函數在請求的狀態發生變化時被調用。我們使用readyState屬性來檢查請求的狀態是否為4（已完成），并使用status屬性來檢查響應的HTTP狀態碼是否為200（請求成功）。

如果請求成功，我們使用JSON.parse方法將響應的文本數據解析為JavaScript對象。然后，我們遍歷商品數組，并為每個商品創建一個新的div元素，將商品的名稱和價格作為文本內容。最后，我們將商品元素添加到商品列表的div元素中。

通過這種方式，我們可以通過Ajax從服務器獲取JSON數據，并在頁面上動態顯示這些數據。

總結起來，Ajax是一種方便的技術，可以實現數據的異步獲取和局部更新。通過使用XMLHttpRequest對象和JSON數據格式，我們可以輕松地從服務器獲取JSON數據，并在網頁上進行展示和操作。這為開發者提供了更好的用戶體驗和交互性。