在这篇文章中,我们将研究JSON的重要性以及为什么我们应该在我们的应用程序中使用它。我们将看到,jQuery已经为我们提供了一个非常好的便利功能。
什么是JSON?
JSON是JavaScript Object Notation的缩写。它是一种独立于语言、基于文本的格式,通常用于在网络应用中传输数据。在这篇文章中,我们将看看如何使用HTTP GET请求加载JSON数据(我们也可以使用其他动词,如POST)。
为什么我们会选择JSON而不是XML?使用JSON的关键优势是效率。JSON不那么冗长和杂乱,导致字节数更少,解析过程更快。这使我们能够处理更多的以JSON形式发送的消息,而不是XML形式。此外,JSON有一个非常有效和自然的对象表示,导致BSON等格式,其中类似JSON的对象是以二进制格式存储的。
现在,让我们看看jQuery如何帮助我们从一个远程源加载JSON编码的数据。对于没有耐心的人来说,在文章的最后有一个演示。
JSON jQuery语法
$.getJSON()
方法是一个方便的助手,如果你不需要太多的额外配置,可以直接使用JSON。从本质上讲,它归结为更一般的$.ajax()助手,正确的选项被隐式使用。该方法的签名是。
$.getJSON(url, data, success);
除了必要的URL参数,我们可以传入两个可选参数。一个代表要发送给服务器的数据;另一个代表在成功响应的情况下要触发的回调。
因此,这三个参数对应于。
url
参数,它是一个字符串,包含请求被发送到的URL- 可选的
data
参数,它是一个对象或一个字符串,与请求一起发送到服务器。 - 可选的
success(data, textStatus, jqXHR)
参数,这是一个只有在请求成功时才会执行的回调函数。
在最简单的情况下,我们只关心返回的对象。在这种情况下,一个潜在的success
回调会是这样的。
function success(data) {
// do something with data, which is an object
}
如前所述,同样的请求可以通过更粗略的$.ajax()
调用来触发。这里我们将使用。
$.ajax({
dataType: 'json',
url: url,
data: data,
success: success
});
让我们用一个小的演示来看看这一点的实践。
一个示例应用程序
我们将启动一个本地服务器,提供一个静态JSON文件。这个文件所代表的对象将被我们的JavaScript代码所获取和处理。在我们的演示中,我们将使用Node.js来提供服务器(尽管任何服务器都可以)。这意味着我们将需要以下三样东西。
- 一个工作中的Node.js的安装
- node软件包管理器(npm)
- 全局性的Live-server软件包的安装
前两点是与平台有关的。要安装Node,请前往项目的下载页面,为你的系统获取相关的二进制文件。另外,你也可以考虑使用一个版本管理器,如 "使用nvm安装多个版本的Node.js"中所述。
npm与Node捆绑在一起,所以不需要安装任何东西。然而,如果你需要任何帮助来启动和运行,请参考我们的教程《npm初学者指南--Node包管理器》。
第三点可以通过从你的终端运行以下内容来实现。
npm install -g live-server
如果你发现自己需要一个sudo
前缀(-nix系统)或一个升高的命令提示符来执行这个全局安装,你应该考虑改变全局包的位置。
一旦这些要求得到满足,我们就可以在一个新的文件夹中创建以下三个文件。
main.js
, 这是请求数据的JavaScript文件example.json
, 这是JSON文件的例子index.html
, 这是用于调用JavaScript并显示数据的HTML页面。
在命令提示符下,我们可以简单地在新文件夹中调用live-server
。这将在一个新的浏览器标签中打开我们的演示,运行在http://localhost:8080[。](http://localhost:8080)
JavaScript样本
下面的代码是完整的客户端逻辑。它等待DOMContentLoaded
加载事件的发生,然后抓取两个DOM元素的引用--$showData
,在这里我们将显示解析后的响应,以及$raw
,在这里我们将显示完整的响应。
然后我们将一个事件处理程序附加到ID为get-data
的元素的click
事件上。当这个元素被点击时,我们尝试使用$.getJSON()
,从服务器加载JSON,然后处理响应并在屏幕上显示。
$(document).ready(() => {
const $showData = $('#show-data');
const $raw = $('pre');
$('#get-data').on('click', (e) => {
e.preventDefault();
$showData.text('Loading the JSON file.');
$.getJSON('example.json', (data) => {
const markup = data.items
.map(item => `<li>${item.key}: ${item.value}</li>`)
.join('');
const list = $('<ul />').html(markup);
$showData.html(list);
$raw.text(JSON.stringify(data, undefined, 2));
});
});
});
除了将对象的一部分转换为无序列表外,完整的对象也被字符串化并显示在屏幕上。无序列表被添加到一个ID为show-data
的<div>
元素中,JSON字符串被添加到一个<pre>
标签中,这样它就被很好地格式化。当然,在我们的例子中,数据是固定的,但在一般情况下,任何类型的响应都是可能的。
请注意,我们还为输出设置了一些文本<div>
。如果我们为JSON检索插入一些(人为的)延迟(例如,在你的浏览器的开发工具中),我们会看到,这实际上是在显示$.getJSON
请求的任何结果之前执行的。原因很简单:默认情况下,$.getJSON
是非阻塞的,也就是说,是异步的。因此,回调将在某个(未知)时间点上执行。
为了获得关键的信息,对源文件进行了提炼,产生了下面的块。
$('#get-data').on('click', () => {
$.getJSON('example.json', (data) => {
console.log(data);
});
});
在这里,我们只连接了链接,以触发$.getJSON
帮助器的启动,然后在调试控制台中打印返回的对象。