JavaScript 从 URL 读取 JSON 教程展示了如何从提供的 URL 读取 JSON 格式的数据。我们使用 JQuery、Fetch API 和 XMLHttpRequest。
网址
统一资源定位符 (URL) 是对 Web 资源的引用，它指定了它在计算机网络上的位置和检索它的机制。网络资源是可以通过网络获取的任何数据，例如 HTML 文档、PDF 文件、PNG 图像、JSON 数据或纯文本。
通用 URL 具有以下形式：
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]
方括号表示该部分是可选的。方案是一种寻址资源的方式，例如 http、ftp、mailto 或文件。
两条斜杠后面的部分称为权限部分。权限部分包含 1) 用户名和密码的可选身份验证部分，用冒号分隔，后跟 at 符号 (@) 2) 主机，可以是主机名或 IP 地址，3) 可选端口数字，与主机用冒号分隔。
路径是通往主机上资源的道路。它可能类似于也可能不完全映射到文件系统路径。查询字符串用于添加一些条件以请求资源。它通常是一系列键/值对。 finalpart 是一个可选的片段，它指向辅助资源，例如标题。它通过散列 (#) 与查询字符串分隔。
JSON
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。它易于人类读写和机器解析和生成。JSON 的官方互联网媒体类型是# ##.JSON文件扩展名为application/json。
在我们的示例中，我们使用来自http://time.jsontest.com 的 JSON 数据。
{
"time": "11:27:26 AM",
"milliseconds_since_epoch": 1494934046126,
"date": "05-16-2017"
}
GET 请求返回此 JSON 字符串。
使用 JQuery 读取 JSON
jQuery 是一个用于操作 DOM 的 JavaScript 库。使用 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 是上述调用的简写。
<!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数据，返回的对象具有三个属性：date、time、unix epoch。
var text = `Date: ${data.date}<br>
Time: ${data.time}<br>
Unix time: ${data.milliseconds_since_epoch}`
我们使用 JavaScript 模板字符串构建消息。
$(".mypanel").html(text);
使用 JQuery 的html 方法，我们将文本附加到div 标记。
在图中我们可以看到当前的日期、时间和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 方法采用一个强制参数，即我们要获取的资源的路径。它返回一个解决请求响应的承诺。
使用 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 数据。
列出所有 JavaScript 教程。
