js读取json文件|极客笔记

js读取json文件

在Web开发中，我们经常需要从服务器获取JSON文件数据以供页面展示和处理。在JavaScript中，有多种方法可以读取JSON文件并将其转换为JavaScript对象。本文将介绍如何使用纯JavaScript和Ajax来读取JSON文件。

使用Ajax读取JSON文件

Ajax是一种在不重新加载整个页面的情况下，可以向服务器发送请求和接收数据的技术。我们可以使用Ajax来读取JSON文件并将其转换为JavaScript对象。

下面是一个使用纯JavaScript和Ajax读取JSON文件的示例代码：

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

// 配置请求方法、URL和是否异步
xhr.open('GET', 'data.json', true);

// 监听请求状态变化
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，将返回的JSON数据转换为JavaScript对象
        var jsonData = JSON.parse(xhr.responseText);

        // 处理获取到的数据
        console.log(jsonData);
    } else if (xhr.status !== 200) {
        // 请求失败
        console.error('Failed to fetch data.json');
    }
};

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

在上面的代码中，我们首先创建了一个新的XMLHttpRequest对象，并通过open方法配置了请求方法、URL和是否异步。然后我们监听onreadystatechange事件，当请求状态变为4（完成）且状态码为200（成功）时，我们使用JSON.parse方法将返回的JSON数据转换为JavaScript对象，并对其进行处理。

请注意，上面的代码需要在Web服务器环境下运行，否则会受到同源策略的限制。如果需要在本地环境下测试，可以使用一些开发工具（如VS Code的Live Server插件）来模拟Web服务器环境。

使用Fetch API读取JSON文件

除了Ajax，我们还可以使用ES6提供的Fetch API来读取JSON文件。Fetch API提供了一种更现代化和简洁的方式来发送网络请求，并支持Promises，使得异步操作更加方便。

下面是一个使用Fetch API读取JSON文件的示例代码：

fetch('data.json')
    .then(response => {
        if (!response.ok) {
            throw new Error('Failed to fetch data.json');
        }
        return response.json();
    })
    .then(jsonData => {
        // 处理获取到的数据
        console.log(jsonData);
    })
    .catch(error => {
        console.error(error.message);
    });

在上面的代码中，我们使用fetch函数发送了一个GET请求，如果请求成功，则通过json方法将返回的Response对象转换为JavaScript对象。如果请求失败，则会通过catch捕获到错误，并输出错误信息。

fetch函数返回一个Promise对象，我们可以通过then方法链式处理响应数据和错误信息。