ajax 加载json

AJAX是一种把客户端（浏览器端）和服务器端进行异步交互的技术，它可以实现不刷新整个页面的情况下，局部更新数据，给用户带来良好的体验。其中，加载JSON数据是AJAX的一个常见的应用。

在加载JSON数据时，我们需要使用XMLHttpRequest对象来实现异步请求，并对返回的JSON数据进行处理。下面我们来演示一个加载JSON数据，并将其展示在页面上的例子：

<script>
// 创建XMLHttpRequest对象并设置请求的方式、路径和异步标志
var xhr = new XMLHttpRequest();
xhr.open('get','data.json',true);

// 监听onreadystatechange事件，获取服务器响应信息并处理数据
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      // 处理返回的JSON数据，并将其展示在页面上
      var str = '<ul>';
      data.forEach(function(item,index) {
        str += '<li>' + item.name + '</li>';
      });
      str += '</ul>';
      document.querySelector('.demo').innerHTML = str;
    } else {
      alert('请求失败');
    }
  }
};

// 发送异步请求
xhr.send(null);
</script>

以上代码中，我们使用XMLHttpRequest对象来进行异步请求，并监听其onreadystatechange事件。当readyState为4时，说明请求已经完成，此时我们可以通过status判断请求的状态是否为200，如果为200，则说明请求成功。接下来，我们将返回的JSON数据解析成JavaScript对象，并对其进行处理，最终将处理结果展示在页面上。