ajax使用本地json文件

AJAX是一种常用的基于JavaScript的技术，它可以实现页面的异步更新，节省了服务器的带宽，提升了用户的体验。在AJAX中，通过XMLHttpRequest对象获取数据是常见的方式。但是是否知道AJAX也可以使用本地json文件来获取数据呢？下面我们来详细介绍一下：

ajax使用本地json文件

首先，在html文件中引入json文件：

<script src="example.json"></script>

接着，在JavaScript代码中通过XMLHttpRequest对象获取json文件数据：

var xhr = new XMLHttpRequest();
xhr.open('GET','example.json',true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);   
        console.log(data); // 打印获取到的json数据
    }
};
xhr.send();

以上代码中，我们首先创建了一个XMLHttpRequest对象，并使用open()方法指定请求方式、请求路径和是否异步。然后通过onreadystatechange事件监听XHR对象状态的变化，当状态为4（已完成）且响应状态为200（成功）时，我们使用JSON.parse()方法将json字符串转换为json对象，并将其输出到console中。

AJAX使用本地json文件获取数据的好处在于： - 不需要访问服务器，请求速度更快。 - 代码实现简单，不需要复杂的服务器配置。 - 适用于简单的数据传递，不需要考虑跨域问题。

当然，需要注意的是本地json文件只能在本地文件基础上读取，我们无法通过网络访问其他网站的json文件。

ajax使用本地json文件

相关文章