ajax读json文件下载

ajax是一种在网页中发送和接收数据的技术，它可以异步地与服务器通信，并使用户在不刷新页面的情况下获取新数据。json文件是一种轻量级的数据交换格式，它由JavaScript对象表示，易于阅读，且可以跨语言传输。下面我们将介绍使用ajax读取json文件并将其下载到本地的方法。

首先，我们需要创建一个按钮或其他用户操作触发读取json文件的事件，并为其添加一个onclick方法。

<button onclick="downloadJson()">Download JSON</button>

接下来，我们需要编写downloadJson()函数，这个函数将使用ajax读取指定的json文件并将其下载到本地。

function downloadJson() {
    // 创建ajax对象
    var xhr = new XMLHttpRequest();

    // 设置文件路径
    var url = "example.json";

    // 发送请求，异步读取json文件
    xhr.open("GET",url,true);

    // 设置响应类型为json格式
    xhr.setRequestHeader("Content-Type","application/json");

    // 当文件加载成功后执行的函数
    xhr.onload = function () {

        // 检查请求状态
        if (xhr.status === 200) {

            // 将json文件内容保存到变量中
            var data = JSON.parse(xhr.responseText);

            // 创建下载链接
            var element = document.createElement("a");

            // 获取json文件名和后缀
            var filename = url.split('/').pop().split('.')[0] + ".json";

            // 设置下载链接属性
            element.setAttribute("href","data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data)));
            element.setAttribute("download",filename);

            // 触发下载
            element.click();
        }
    };

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

最后，我们将使用ajax读取json文件并将其下载到本地。该代码使用的是XMLHttpRequest对象，它可以异步读取指定的文件，并根据需要返回响应。我们还使用了JSON.parse()函数，将json文件转换为JavaScript对象，并使用encodeURIComponent()函数将其编码为一个可下载的字符串。最后，我们创建了一个下载链接，并触发了它的点击事件以将json文件下载到本地。