AJAX引入JSON數據

當我們需要在網頁上動態顯示數據時，AJAX（Asynchronous Javascript And XML）是一種非常強大的技術。它通過無需刷新整個頁面的方式，從服務器獲取數據并將其呈現在網頁上，使用戶能夠實時獲取最新的信息。JSON（JavaScript Object Notation）是一種常用的用于數據交換的格式，它簡單易讀且易于解析。結合AJAX和JSON的使用，我們可以輕松地引入JSON數據到我們的網頁中。

假設我們正在開發一個電商網站，我們希望在網頁上實時展示商品的價格和庫存信息。為了實現這個功能，我們可以使用AJAX和JSON進行以下操作。

首先，我們需要編寫一個服務端的腳本來獲取商品信息并將其以JSON格式返回給網頁。以PHP為例，我們可以使用以下代碼來獲取商品信息的JSON數據：

<?php
$product_id = $_GET['product_id']; // 獲取商品ID
// 通過商品ID查詢數據庫，獲取商品的價格和庫存信息
$price = 19.99;
$stock = 100;
// 將商品信息以JSON格式返回給網頁
$response = array(
'price' => $price,
'stock' => $stock
);
header('Content-Type: application/json');
echo json_encode($response);
?>

在上述代碼中，我們首先通過$_GET['product_id']獲取網頁傳遞過來的商品ID。然后，我們查詢數據庫獲取商品的價格和庫存信息，并將它們存儲在$response數組中。最后，我們使用header函數設置響應的Content-Type為application/json，并使用json_encode函數將$response數組轉換為JSON格式的字符串并返回給網頁。

在網頁上，我們可以使用AJAX來獲取并處理JSON數據。以下是一個使用原生JavaScript來實現AJAX請求和處理JSON數據的示例：

<script>
var product_id = '123'; // 商品ID
var xhr = new XMLHttpRequest();
xhr.open('GET', 'get_product_info.php?product_id=' + product_id, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var price = response.price;
var stock = response.stock;
// 更新網頁上的價格和庫存信息
document.getElementById('price').innerHTML = price;
document.getElementById('stock').innerHTML = stock;
}
};
xhr.send();
</script>

在上述代碼中，我們首先創建一個XMLHttpRequest對象，并使用open方法指定請求的方法、URL和是否異步。然后，我們定義xhr.onreadystatechange函數來監聽請求狀態的變化。當readyState為4（請求已完成）且status為200（請求成功）時，我們使用JSON.parse函數將響應的JSON字符串轉換為JavaScript對象，然后根據對象的屬性獲取商品的價格和庫存信息，并將其更新到網頁上。

通過結合AJAX和JSON，我們能夠輕松地引入JSON數據到網頁中，實現動態展示和實時更新的效果。無論是電商網站、社交媒體還是其他類型的網站，這項技術都能夠為用戶提供更好的體驗。