AJAX (Asynchronous JavaScript and XML) 是一種用于創建快速、動態、無刷新網頁的技術。它允許客戶端與服務器進行異步通信，從而無需重新加載整個頁面。其中一種常見的應用場景是使用 AJAX 異步獲取 JSON（JavaScript Object Notation）數據。JSON 是一種輕量級的數據交換格式，易于閱讀和編寫，常用于前后端數據交互。本文將介紹使用 AJAX 異步獲取 JSON 數據的方法，并通過舉例說明其實際應用。
首先，我們需要創建一個簡單的 HTML 頁面來實現 AJAX 異步獲取 JSON 數據的功能。在頁面頭部引入 jQuery 庫，以便使用其 AJAX 方法。然后，我們可以創建一個按鈕，當用戶點擊該按鈕時，觸發 AJAX 請求并獲取 JSON 數據。
<!DOCTYPE html>
<html>
<head>
<title>AJAX 異步獲取 JSON 數據</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>AJAX 異步獲取 JSON 數據</h1>
<button onclick="getData()">獲取數據</button>
<script>
function getData() {
$.ajax({
url: "data.json",
dataType: "json",
success: function(data) {
console.log(data);
},
error: function() {
console.log("獲取數據失敗");
}
});
}
</script>
</body>
</html>在上面的代碼中，我們定義了一個名為 getData 的 JavaScript 函數，該函數執行了一個 AJAX 請求。在 AJAX 請求中，我們指定了要獲取數據的 URL（"data.json"），并將數據類型設置為 JSON，以確保服務器返回的數據是符合 JSON 格式的。如果 AJAX 請求成功，我們將數據打印到控制臺；如果請求失敗，我們將顯示一條錯誤消息。
接下來，我們需要創建一個名為 data.json 的文件，并將一些 JSON 數據寫入其中。假設我們要獲取一個由學生信息組成的數據集，可以創建如下的 data.json 文件：
{
"students": [
{
"name": "Tom",
"age": 18,
"grade": "A"
},
{
"name": "Alice",
"age": 17,
"grade": "B"
},
...
]
}當用戶點擊頁面上的“獲取數據”按鈕時，會觸發 getData 函數，發送 AJAX 請求并獲取到 data.json 文件中的 JSON 數據。在本例中，我們將獲取到的學生信息打印到控制臺，供開發者調試和進一步處理。
根據需要，我們還可以使用獲取到的 JSON 數據進行其他操作，例如將數據展示在頁面上的表格中：
success: function(data) {
var html = "<table><tr><th>姓名</th><th>年齡</th><th>成績</th></tr>";
$.each(data.students, function(index, student) {
html += "<tr><td>" + student.name + "</td><td>" + student.age + "</td><td>" + student.grade + "</td></tr>";
});
html += "</table>";
$("body").append(html);
}在上述代碼中，我們使用 jQuery 的 each 方法遍歷獲取到的學生信息，并將其拼接為一個 HTML 表格。最后，我們通過 $("body").append(html) 方法將該表格添加到頁面的最后。
通過以上的示例，我們展示了如何使用 AJAX 異步獲取 JSON 數據，并在頁面中進行進一步的處理和展示。這種方法能夠提供更流暢的用戶體驗，避免了頁面重新加載的延遲，并且有效地實現了前后端數據交互。