AJAX（Asynchronous JavaScript and XML）是一種用于與服務器異步通信的技術。它允許網頁在不重新加載整個頁面的情況下更新部分內容，提供了更好的用戶體驗。在使用AJAX時，常常需要從服務器獲取JSON數據，然后在網頁上動態顯示。本文將介紹如何使用AJAX取得JSON數據，并通過舉例說明其使用方法。

首先，我們需要在網頁中引入jQuery庫。jQuery是一個功能強大且簡潔的JavaScript庫，提供了許多方便的功能和方法，其中包括用于處理AJAX請求的方法。通過在網頁中引入jQuery，我們可以簡化AJAX請求的代碼。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下來，我們可以使用jQuery的$.ajax()方法來發送AJAX請求，并獲取服務器返回的JSON數據。該方法接受一個配置對象作為參數，其中包含了請求的URL、請求方式、數據類型等信息。

$ .ajax({
url: 'https://example.com/api/data',
method: 'GET',
dataType: 'json',
success: function(response){
// 處理服務器返回的JSON數據
},
error: function(){
// 處理請求失敗的情況
}
});

在上面的代碼中，我們指定了請求的URL為https://example.com/api/data，請求方法為GET，數據類型為json。如果請求成功，服務器返回的JSON數據將作為response參數傳遞給success函數，并可以在函數中進行處理。如果請求失敗，可以在error函數中進行錯誤處理。

下面通過一個簡單的例子來說明如何使用AJAX取得JSON數據。假設我們有一個在線商店，需要從服務器獲取商品列表，并通過動態添加HTML元素來展示這些商品。

$ .ajax({
url: 'https://example.com/api/products',
method: 'GET',
dataType: 'json',
success: function(response){
// 處理服務器返回的JSON數據
response.forEach(function(product){
var html = '<div class="product">';
html += '<h3>' + product.name + '</h3>';
html += '<p>價格：' + product.price + '元</p>';
html += '</div>';
$('.product-list').append(html);
});
},
error: function(){
// 處理請求失敗的情況
}
});

在上面的代碼中，我們向https://example.com/api/products發送了一個GET請求，該請求返回了一個包含商品列表的JSON數據。在success函數中，我們遍歷了服務器返回的JSON數據，并根據每個商品的信息動態構建HTML元素，并通過append()方法添加到.product-list元素中。

通過以上的例子，我們可以看到如何使用AJAX取得JSON數據，并在網頁上動態顯示。AJAX使得在網頁上獲取和展示數據變得更加靈活和高效，為用戶提供了更好的交互體驗。