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对象，并对其进行处理，最终将处理结果展示在页面上。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！