[译文]Ajax/jQuery.getJSON 简单示例
在这篇文章中我们将探讨JSON的重要性，为什么要在我们的应用中使用它。我们会看到，jQuery给我们提供了一个非常便利的功能。
JSON是什么？
JSON是JavaScript对象符号。简单来说，JSON是一种数据格式，例如，在网络上传输它。在这篇文章中我们将看到使用HTTP GET请求（也可以使用其他方法，比如POST）加载JSON数据。
与XML比较，我们为什么会选择JSON？JSON和XML一个很大的区别在于有效数据率，JSON较少的冗长和杂乱，导致更少的字节和更快的解析过程。这使得JSON能够比XML发送更多的消息。
现在让我们看看jQuery是如何能够帮我们从远程数据源上加载JSON编码数据的。如果你没有足够的耐心查看文字，文章的最后有个demo可以查看。
JSON jQuery 语法
如果你不需要太多的额外的配置，$.getJSON()方法就是一个非常方便的辅助工具。从本质上讲，它算是将$.ajax()的部分配置选项隐藏后的封装方法。语法如下：
$.getJSON(url, data, success);
除了必须的URL参数，还有2个可选参数。一个代表发送到服务器的数据，另一个是服务器成功响应后触发的回调。
所以这三个参数对应的是：
- url是一个字符串，其中包含请求发送的地址。
- 可选参数data是一个对象或一个被请求发送到服务器的字符串。
- 可选参数success(data, textStatus, jqXHR)是一个在请求成功后执行的回调函数。
在最简单的场景中，我们只关心返回的对象。在这种情况下，成功回调将看起来像这样：
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。
- 准备NodeJS包管理和分发工具（NPM）。
- 一个全局安装的http-server的安装包。
前两点和平台相关。如果你需要一些关于他们中任何一个的设置，可能需要看看教程。
第三点可以在你的终端运行如下代码：
npm install http-server -g
一旦满足这些要求，我们可以把以下三个文件放在一个新的文件夹里：
- example.js是请求数据的JavaScript文件。
- example.json是代表对象的示例JSON文件。
- index.html是调用JavaScript和显示数据的HTML文件。
在命令提示符里，我们可以很简单的在新建文件夹里调用http-server。现在使用http://localhost:8080运行demo。
JavaScript示例
下面的代码是完整的客户端逻辑。等待DOMContentLoaded事件加载完成之前附加一个从ID元素的单击事件中获取数据的事件处理程序。当这个元素被点击时我们使用$.getJSON()尝试着从服务器中加载JSON，处理响应并显示在屏幕上。
$(document).ready(function () { $('#get-data').click(function () { var showData = $('#show-data'); $.getJSON('example.json', function (data) { console.log(data); var items = data.items.map(function (item) { return item.key + ': ' + item.value; }); showData.empty(); if (items.length) { var content = '<li>' + items.join('</li><li>') + '</li>'; var list = $('<ul />').html(content); showData.append(list); } }); showData.text('Loading the JSON file.'); });});
除 了在一个无序列表里转换了部分对象，完整的对象也被打印在浏览器的调试控制台。结果会输出在对应ID的<DIV>元素里。尽管每次请求都会重 置这个元素，我们只在得到JSON对象包含的所有项目时填充它。当然，对于我们的例子来说，数据是固定的，但是，在一般的情况下任何响应都是有可能的。
请 注意，我们在<DIV>里还设置了一些文本的显示。如果我们为JSON检索插入一些（人工）延迟，我们将看到它总是会在JSON显示任何结果 之前被执行。原因很简单：$.getJSON是非阻塞的，也就是说是异步的。因此，回调将在某个较晚的（未知）时间点上被执行。
精简关键信息，代码如下：
$('#get-data').click(function () { $.getJSON('example.json', function (data) { console.log(data); });});
在这里我们只关注在调试控制台打印返回的对象之前触发的$.getJSON。
JSON示例
JSON示例文件比我们关心的部分要大得多。然而，示例是按照这样的构造方式，显示更多的JSON语法。结构如下：
{ "items": [ { "key": "First", "value": 100 },{ "key": "Second", "value": false },{ "key": "Last", "value": "Mixed" } ], "obj": { "number": 1.2345e-6, "enabled": true }, "message": "Strings have to be in double-quotes."}
JavaScript 示例中，我们只使用了与items相关的数组中的key。对比普通的JavaScript，JSON要求我们在key上使用双引号。此外，我们不能在对象 或者数组的结尾使用逗号。然而，与普通的JavaScript数组的区别是，我们可以插入不同类型的对象。
网页示例
我们已经看到脚本和JSON示例文件。剩下的就是调用JavaScript来触发和显示JSON的网页部分。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Request JSON Test</title> </head> <body> <a href="#" id="get-data">Get JSON data</a> <div id="show-data"></div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="example.js"></script> </body></html>
这里没什么多说的。我们使用从官方网页得到压缩后的jQuery（旧版1.9.1，对于我们而言这肯定是足够的）。然后，引入负责逻辑的脚本。
注意：我们应该在正确的位置（</body>关闭标签之前）引入我们的JavaScript文件。这样$(document).ready()回调就不再是必要的，因为这个时候文档已经按定义做好准备了。
Demo
这就是我们最终的成果。
更常见的方法
正 如前面提到的，$.Ajax方法在任何情况下（不仅是JSON相关的Web请求）是最根本的解决办法。这种方法使我们能够显式的设置我们所关心的所有选 项。如果我们希望这个回调在同一时间和其他代码同时运行，我们可以调整async为true，设置它为false将阻止其他代码运行直到它下载完成。
$.ajax({ type: 'GET', url: filename, data: data, async: false, beforeSend: function (xhr) { if (xhr && xhr.overrideMimeType) { xhr.overrideMimeType('application/json;charset=utf-8'); } }, dataType: 'json', success: function (data) { //Do stuff with the JSON data }});
overrideMimeType方法（重置服务器返回的MIME类型）仅为演示。一般来说，jQuery会自动根据其使用的数据类型调整MIME类型。
在我们继续介绍JSON验证概念之前，让我们先看一个更现实的例子。通常，我们不会使用静态的JSON文件，而是加载动态生成的JSON（例如调用API）。我们需要事先提供一些生成JSON所依赖的参数。
var url = 'https://api.github.com/v1/...';var data = { q: 'search', text: 'my text'};$.getJSON(url, data, function (data, status) { if (status === 200) { //Do stuff with the JSON data }});
在这里，我们监测status来确保该结果是一个成功请求返回的对象，而不是一些包含错误信息的对象。确切的状态码是依赖于接口的，然而，对于大多数的请求，通常的状态码为200。
data是以对象的形式提供给jQuery创建查询字符串（或发送请求）。
JSON验证
不要忘记JSON数据验证！在线的JSON验证器工具JSONLint，可以用来验证JSON文件。相比JavaScript，JSON有非常严格的格式要求，不能有偏差，比如结尾逗号或写关键字的方法（/，没有引号等等）。
所以，让我们来讨论一些在处理JSON时遇到的常见错误。
常见的$.getJSON错误
Silent failures on $.getJSON calls：有可能会发生这种情况，比如，函数json1234()不存在的时候，定义jsoncallback = json1234。这种情况下$.getJSON会silently error。因此我们应该使用jsoncallback = ? 让jQuery自动处理初始回调。
最好使用JSON（而不是JSONP）（无论是在自己的服务器还是通过CORS）。这可以避免因为引入JSONP而可能导致的错误。需要注意的问题是：服务器/API支持JSONP吗？使用JSONP有任何限制吗？
Uncaught syntax error:Unexpected token (in Chrome) or invalid label (in Firefox). 这个错误可以通过JSON数据的JavaScript回调来确定。总的来说，这是个关于JSON格式不正确的强大指示器。考虑使用前文提到的 JSONLint工具解决。
最大的问题是：在传输JSON的时候如果发生了错误，我们如何检测？
如何解决JSON错误
在开始JSON相关调试的时候，应该注意三点：
- 我们必须确保JSON服务器使用正确的格式返回正确的MIME类型。
- 当服务器返回无效的JSON时，我们可以尝试使用$.get代替$.getJSON。如果JSON.parse()在返回文本中失败的话，那么我们立即知道JSON是罪魁祸首。
- 我们可以通过控制台来检查返回的数据。这应该是更深入的研究。
调试应该在使用JSONLint工具之后开始。
结论
JSON是一种轻量级的数据交换格式。jQuery的$.getJSON()方法给我们提供了一个很好的辅助工具用来处理在几乎任何场景涉及到JSON格式的数据请求。在这篇文章中，我们调查的一些方法和可能性，以此来方便的帮手。
你是不是也有关于$.getJSON()的最佳实践呢？
原文地址：http://www.sitepoint.com/ajaxjquery-getjson-simple-example/
