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 数据的传递有所帮助。