在 JavaScript 中从 URL 读取 JSON

使用 JQuery 读取 JSON
使用 Fetch API 读取 JSON
使用XMLHttpRequest读取 JSON

原文： http://zetcode.com/articles/javascriptjsonurl/

在 JavaScript 教程的“从 URL 读取 JSON”中，我们从提供的 URL 中读取 JSON 格式的数据。我们使用 JQuery，Fetch API 和XMLHttpRequest。

统一资源定位符（URL）是对 Web 资源的引用，该资源指定了它在计算机网络上的位置以及用于检索它的机制。网络资源是可以通过网络获取的任何数据，例如 HTML 文档，PDF 文件，PNG 图像，JSON 数据或纯文本。

JSON（JavaScript 对象表示法）是一种轻量级的数据交换格式。人类很容易读写，机器也很容易解析和生成。 JSON 的官方 Internet 媒体类型为application/json。 JSON 文件扩展名是.json。

在我们的示例中，我们使用http://time.jsontest.com中的 JSON 数据。

{
   "time": "11:27:26 AM",
   "milliseconds_since_epoch": 1494934046126,
   "date": "05-16-2017"
}

GET 请求返回此 JSON 字符串。

使用 JQuery 读取 JSON

jQuery 是一个 JavaScript 库，用于处理 DOM。使用 jQuery，我们可以查找，选择，遍历和操作 HTML 文档的各个部分。

JQuery $.getJSON()方法使用 GET HTTP 请求从服务器加载 JSON 编码的数据。

jQuery.getJSON( url [, data ] [, success ] )

这是方法签名。 url参数是一个字符串，其中包含将请求发送到的 URL。 data是随请求发送到服务器的普通对象或字符串。 success是一个回调函数，如果请求成功，则执行该函数。

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

$.getJSON()是上述调用的简写。

js_read_json_url.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="mypanel"></div>
    <script>
    $.getJSON('http://time.jsontest.com', function(data) {
        var text = `Date: ${data.date}<br>
                    Time: ${data.time}<br>
                    Unix time: ${data.milliseconds_since_epoch}`
        $(".mypanel").html(text);
    });
    </script>
</body>
</html>

在示例中，我们从http://time.jsontest.com读取 JSON 数据。返回的对象具有三个属性：日期，时间和 unix 纪元。

var text = `Date: ${data.date}<br>
            Time: ${data.time}<br>
            Unix time: ${data.milliseconds_since_epoch}`

我们使用 JavaScript 模板字符串构建消息。

$(".mypanel").html(text);

使用 JQuery 的html()方法，我们将文本附加到div标签。

在 JavaScript 中从 URL 读取 JSON - 图1

图：使用 JQuery 从 URL 读取 JSON

在图中，我们可以看到当前日期，时间和 Unix 时间。

使用 Fetch API 读取 JSON

Fetch API 是用于提取资源的接口。它类似于XMLHttpRequest，但其 API 提供了更强大和灵活的功能集。

<script>
fetch('http://time.jsontest.com')
    .then(res => res.json())
    .then((out) => {
        console.log('Output: ', out);
}).catch(err => console.error(err));
</script>

该示例使用 Fetch API 读取 JSON 数据，并将返回的数据打印到控制台。要查看输出，我们需要激活浏览器的开发者控制台。

fetch()方法采用一个强制性参数，即我们要获取的资源的路径。它返回一个解析为请求响应的promise。

使用`XMLHttpRequest`读取 JSON

XMLHttpRequest API 提供了用于在客户端和服务器之间传输数据的客户端功能。它提供了一种从 URL 检索数据的简便方法，而无需刷新整个页面。结果，网页必须仅更新页面的一部分而不破坏用户正在做的事情。 XMLHttpRequest在 AJAX 编程中大量使用。

<script>
var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
        var status = xhr.status;
        if (status == 200) {
            callback(null, xhr.response);
        } else {
            callback(status);
        }
    };
    xhr.send();
};
getJSON('http://time.jsontest.com',  function(err, data) {
    if (err != null) {
        console.error(err);
    } else {
        var text = `Date: ${data.date}
Time: ${data.time}
Unix time: ${data.milliseconds_since_epoch}`
        console.log(text);
    }
});
</script>

本示例使用XMLHttpRequest读取 JSON 数据。

var xhr = new XMLHttpRequest();

创建了XMLHttpRequest的新实例。

xhr.open('GET', url, true);

open()方法初始化一个请求。

xhr.responseType = 'json';

responseType值定义响应类型。

xhr.onload = function() {
    var status = xhr.status;
    if (status == 200) {
        callback(null, xhr.response);
    } else {
        callback(status);
    }
};

在onload()方法中，我们等待服务器的响应。

xhr.send();

send()方法发送请求；默认情况下，该请求是异步的。

在本教程中，我们已经使用 JQuery，Fetch API 和XMLHttpRequest在 JavaScript 中读取了 JSON 数据。

您可能也对以下相关教程感兴趣： JQuery 教程， JavaScript Mustache 教程， JavaScript 中的 JSON 数组循环， jQuery 自动完成教程或使用 jQuery DatePicker 。

使用 JQuery 读取 JSON

使用 Fetch API 读取 JSON

使用XMLHttpRequest读取 JSON

使用`XMLHttpRequest`读取 JSON