ajax请求json本地数据

在Web开发中，AJAX已经成为了不可或缺的技术，能够通过异步请求获取服务器端的数据并动态更新页面，让Web应用更加交互性和友好性。而请求JSON格式数据更是AJAX请求的一种重要方式，本文将介绍如何使用AJAX请求本地JSON数据。

首先，需要构建JSON格式数据。在本例中，我们将构建一个JSON数组，里面包含两个JSON对象，每个对象包含一个id和一个name属性。如下所示：

var data = [
     { "id": "1","name": "张三" },{ "id": "2","name": "李四" }
];

接着，在页面中定义一个按钮元素，在按钮的点击事件中编写AJAX请求的代码：

<button id="btnGetData">获取数据</button>
<script>
document.getElementById('btnGetData').addEventListener('click',function() {
     var xhr = new XMLHttpRequest();
     xhr.open("GET","data.json",true);
     xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
               var data = JSON.parse(xhr.responseText);
               console.log(data);
          }
     };
     xhr.send();
});
</script>

以上代码中，我们使用XMLHttpRequest对象发送一个GET请求，请求的是当前目录下的data.json文件。当请求成功并且状态码为200时，我们将响应的文本通过JSON.parse方法转换为JSON对象，并将其输出到控制台。

最后，在当前目录下创建一个data.json文件，并写入之前定义的JSON数组，如下所示：

[
     { "id": "1","name": "李四" }
]

如果一切正常，当我们点击“获取数据”按钮后，就可以通过AJAX请求获取到JSON数据，并显示在控制台中。