ajax读取json中的数据

AJAX是一种在Web应用程序中使用的技术，它可以在不重新加载整个页面的情况下对特定部分进行更新。其中之一特别常见的应用就是通过AJAX读取JSON中的数据，下面来介绍一下:

首先，在HTML文件中需要定义一个要显示JSON数据的元素:

<div id="json-data"></div>

然后，使用XMLHttpRequest对象来获取服务端返回的JSON数据:

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        let json_data = JSON.parse(xhr.responseText);
        // 在这里可以对获取到的JSON数据进行处理
    }
}
xhr.open("GET","example.json",true);
xhr.send();

代码中，XMLHttpRequest对象被定义，并设置onreadystatechange事件，当状态改变时，该函数会被调用。如果读取成功（状态码为200），则JSON.parse()将返回一个JavaScript对象。现在，可以在回调函数中对获取到的数据进行操作。

例如，下面的代码会将JSON数据中的每一个名称（name）放入列表中：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        let json_data = JSON.parse(xhr.responseText);
        let names = json_data.map(function(obj) {
            return obj.name;
        });
        let list = document.createElement("ul");
        for (let i = 0; i < names.length; i++) {
            let item = document.createElement("li");
            item.textContent = names[i];
            list.appendChild(item);
        }
        document.getElementById("json-data").appendChild(list);
    }
}
xhr.open("GET",true);
xhr.send();

在这个示例中，map()方法用于从JSON对象中提取每一个名称，并将其放入一个名为names的数组中。接着，使用createElement()方法创建一个ul元素，将每个名称的li元素添加到列表中，最后将整个列表添加到显示JSON数据的div元素中。

总结：AJAX读取JSON数据是一种广泛应用的技术，它可以帮助Web应用程序快速、轻松地从服务端获取数据，并通过JavaScript操作显示信息。