JS读取外部JSON文件

在Web应用程序中，JavaScript通常需要从外部文件读取JSON数据。本文将介绍如何使用JavaScript读取外部JSON文件。

读取JSON文件

使用XMLHttpRequest对象可以从服务器上读取JSON文件，然后将其转换为JavaScript对象。以下是一个示例：

function loadJSON(callback) {   

    let xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(JSON.parse(xobj.responseText));
        }
    };
    xobj.send(null);  
}

loadJSON(function (json) {
    console.log(json);
});

在这个例子中，我们定义了一个函数loadJSON，它接收一个回调函数作为参数。使用XMLHttpRequest对象获取JSON文件，然后将其传递给回调函数。

异步读取JSON文件

由于网络延迟等原因，从服务器读取JSON文件可能需要一段时间。为了避免JavaScript代码阻塞并等待JSON文件下载完成，我们可以使用异步方法。

function loadJSONAsync(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText));
            }
            else {
                reject(xhr.status);
            }
        };
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
    });
}

loadJSONAsync('my_data.json')
    .then(data => console.log(data))
    .catch(error => console.error(error));

在这个例子中，我们使用Promise包装XMLHttpRequest对象，以便我们可以轻松地使用.then()和.catch()方法来处理结果和错误。

JSONP

使用JSONP（JSON with Padding）可以在跨域请求的情况下从外部获取JSON文件。JSONP使用动态生成的<script>标签来加载JSON数据并执行回调函数。

以下是一个JSONP的例子：

function loadJSONP(url, callback) {
    let script = document.createElement('script');
    let prefix = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[prefix] = (data) => {
        callback(data);
        delete window[prefix];
        document.body.removeChild(script);
    };
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + prefix;
    document.body.appendChild(script);
}

loadJSONP('http://api.example.com/data.php', (data) => {
    console.log(data);
});

在这个例子中，我们定义一个函数loadJSONP，它接收一个URL和一个回调函数。我们生成一个唯一的前缀和回调函数，并将其附加到URL中。我们使用动态生成的<script>标签将其插入DOM，并在JSON数据加载完成后执行回调函数。

结论

在这篇文章中，我们介绍了通过JavaScript读取外部JSON文件的三种方法：使用XMLHttpRequest对象读取JSON文件、使用异步方法读取JSON文件以及使用JSONP获取JSON数据。您可以根据应用程序的要求选择最适合您的方法。