ajax调用本地json数据

在Web开发中，调用本地JSON数据是一个常见的需求。而Ajax是一个非常方便实现此需求的方法。下面我们来学习如何使用Ajax调用本地JSON数据。

首先，在本地创建一个JSON文件，例如data.json，里面存放我们需要的数据，例如:

{
  "name": "张三","age": 22,"address": "北京市朝阳区"
}

然后我们来看一下如何使用Ajax调用这个JSON数据。

//创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//设置请求方法和请求地址
xhr.open('GET','data.json',true);

//设置响应类型为JSON
xhr.responseType = 'json';

//发送请求
xhr.send();

//监听请求的状态
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    //成功获取到数据后的操作
    var data = xhr.response;
    console.log(data.name);
  }
}

在代码中，我们创建了一个XMLHttpRequest对象，并设置请求的方法和请求地址，然后设置响应类型为JSON，并发送请求。最后，我们监听请求的状态，如果成功获取到数据，就可以对数据进行操作。

以上是使用Ajax调用本地JSON数据的方法，希望对你有所帮助。