在现代的网站开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛应用于实现页面异步加载和动态更新。其中最常见的应用便是通过AJAX获取JSON数据，并将其展示在网页上。AJAX获取JSON数据的优势在于可以在不刷新整个页面的情况下，实时获取后台数据库中的数据并更新到网页上，从而提升用户体验。

举个例子，假设我们正在开发一个电商网站，并且需要实时更新商品的库存数量。在传统的网页开发中，若要获取库存数量，需要每次刷新整个页面，这会造成不必要的延迟和资源浪费。然而，借助AJAX技术，我们只需向后台请求获取JSON数据，并将其展示在特定的位置，就能在用户浏览商品时实时更新库存数量。这样，用户可以及时知道商品是否有货，提高了购物的便捷性和效率。

下面我们来看一下如何使用AJAX获取JSON数据。在JavaScript中，首先我们需要创建一个XMLHttpRequest对象，用来与后台进行数据交互。示例代码如下：

var xhr = new XMLHttpRequest();

然后，我们需要指定请求的方法和URL，并设置回调函数以处理接收到的JSON数据。假设我们要获取商品列表的JSON数据，并将其展示在页面上：

xhr.open('GET', 'http://example.com/products', true);
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 对JSON数据进行处理，并将其展示在页面上
// ...
}
};
xhr.send();

在上述代码中，我们通过调用xhr.open方法指定了请求的方法（GET）和URL（http://example.com/products）。我们还传入了一个布尔值true作为第三个参数，表示请求是异步的。接着，我们通过设置xhr.onload回调函数来处理接收到的JSON数据。当请求成功返回（状态码为200）时，我们使用JSON.parse方法将接收到的JSON字符串转换为JavaScript对象，并进行相应的处理。

值得一提的是，AJAX获取JSON数据还可以使用各种前端框架和库，如jQuery、axios等，这些工具可以极大地简化我们的代码，并提供更多的便利功能。举个例子，使用jQuery可以用以下简洁的代码实现相同的功能：

$.ajax({
url: 'http://example.com/products',
method: 'GET',
success: function(response) {
// 对JSON数据进行处理，并将其展示在页面上
// ...
}
});

总结来说，AJAX获取JSON数据在现代网站开发中发挥着重要作用。它可以实现页面的异步加载和动态更新，提升用户体验。通过向后台请求获取JSON数据，并将其展示在页面上，我们可以实时获取后台数据库中的数据并进行相应的处理。不论是电商网站的商品库存更新，还是社交网站的实时消息推送，AJAX获取JSON数据都能为我们带来便捷和效率。