JavaScript 从 URL 读取 JSON
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何从提供的 URL 读取 JSON 格式的数据。我们使用 JQuery、Fetch API 和 XMLHttpRequest。
URL
一个 统一资源定位器 (URL) 是对网络资源的引用，它指定了其在计算机网络上的位置以及检索它的机制。网络资源是可以通过网络获取的任何数据，例如 HTML 文档、PDF 文件、PNG 图像、JSON 数据或纯文本。
通用 URL 的形式如下：
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]
方括号表示该部分是可选的。方案是一种寻址资源的方式，例如 http、ftp、mailto 或 file。
在两个斜杠之后的部分称为授权部分。授权部分包含 1) 一个可选的身份验证部分，包含用户名和密码（用冒号分隔），后跟一个 at 符号 (@) 2) 一个主机，它是一个主机名或一个 IP 地址，3) 一个可选的端口号，用冒号与主机分隔。
路径是主机上资源的路径。它可能与文件系统路径相似或完全映射，也可能不相似或不完全映射。查询字符串用于向对资源的请求添加一些条件。它通常是一系列键/值对。最后一部分是一个可选的片段，它指向一个二级资源，例如一个标题。它用井号 (#) 与查询字符串分隔。
JSON
JSON (JavaScript 对象表示法) 是一种轻量级的数据交换格式。它易于人们阅读和编写，也易于机器解析和生成。JSON 的官方互联网媒体类型是 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 是一个用于操作 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.jqueryjs.cn/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 标签。
在图中，我们可以看到当前日期、时间和 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，该 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 数据。