AJAX 是一種用于創建交互式網頁的技術，可以在網頁加載的過程中無需刷新整個頁面而獲取、發送和處理數據。其中，AJAX GET 請求是一種常用的獲取數據的方式，而 JSON 是一種常用的數據格式。在這篇文章中，我們將探討如何使用 AJAX GET 請求傳遞 JSON 數據，并通過一些例子進行說明。

什么是 AJAX GET 請求

AJAX GET 請求是一種使用瀏覽器的 XMLHttpRequest 對象向服務器發送請求并獲取數據的方法。它允許我們使用 JavaScript 動態地向服務器請求數據，并在收到數據后將其插入到網頁的特定位置，而無需刷新整個頁面。

下面是一個示例，展示了如何使用 AJAX GET 請求獲取一個名為 "example.json" 的 JSON 文件：

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();

在這個示例中，我們首先創建了一個 XMLHttpRequest 對象，然后使用open()方法指定請求的類型、URL 和異步標志。接下來，我們定義了一個回調函數onreadystatechange，它在 readyState 改變時被觸發。當 readyState 等于 4 且 status 等于 200 時，表示請求已成功返回，我們可以通過responseText屬性獲取服務器的響應。最后，我們使用JSON.parse()方法將響應的文本解析為 JSON 對象，并輸出到控制臺。

使用 AJAX GET 請求傳遞 JSON 數據

使用 AJAX GET 請求傳遞 JSON 數據的過程與上述示例類似。我們可以通過將 JSON 數據作為查詢參數附加到 URL 上來傳遞數據。

下面是一個示例，展示了如何使用 AJAX GET 請求傳遞 JSON 數據：

var data = {
name: "John",
age: 30,
city: "New York"
};
var queryString = Object.keys(data).map(key =>key + "=" + encodeURIComponent(data[key])).join("&");
var url = "example.php?" + queryString;
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();

在這個示例中，我們首先創建了一個名為 "data" 的 JSON 對象，其中包含了名為 "name"、"age" 和 "city" 的屬性。接下來，我們使用Object.keys()方法獲取 "data" 對象的所有鍵，并使用map()方法將其與對應的值一起編碼為查詢參數。然后，我們使用join()方法將所有參數連接起來，并附加到 URL 上。最后，我們使用 AJAX GET 請求發送帶有 JSON 數據的 URL，并在成功返回后將響應解析為 JSON 對象。

結論

AJAX GET 請求是一種常用的獲取數據的方式，而 JSON 是一種常用的數據格式。通過使用 AJAX GET 請求傳遞 JSON 數據，我們可以動態地向服務器請求數據，并將其插入到網頁的特定位置，而無需刷新整個頁面。在本文中，我們通過一些示例詳細說明了如何使用 AJAX GET 請求傳遞 JSON 數據。希望這篇文章對你理解 AJAX GET 請求以及 JSON 數據的傳遞有所幫助。