jQuery基础教程（第四版）读书笔记“通过Ajax发送数据“-原创手记-慕课网

一个Ajax解决方案中涉及如下技术
JavaScript：处理与用户及其他浏览器相关事件的交互，解释来自服务器的数据，并将其呈现在页面上。
 XMLHttpRequest：这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。
 文本文件：服务器提供的XML、HTML或JSON格式的文本数据。
 不刷新页面而从服务器加载数据；
 通过JavaScript在浏览器中向服务器发送数据；
 在客户端使用HTML、XML和JSON等数据；
 向用户反馈Ajax请求的状态。

$(document).ready(function() {
　$('#letter-a a').click(function(event) {
　　event.preventDefault();
　　$('#dictionary').load('a.html');
　});
});

将要加载的文件的URL作为参数传递给.load()方法，当单击第1个按钮时，这个文件就会被加载并插入到<div id="dictionary">内部。
而且，当插入完成后，浏览器会立即呈现新的HTML
异步加载意味着在发出取得HTML片段的HTTP请求后，会立即恢复脚本执行，无需等待。在之后的某个时刻，当浏览器收到服务器的响应时，再对响应的数据进行处理。这通常都是人们期望的行为，但它不会导致在等待数据返回期间锁定整个Web浏览器。对于必须要延迟到加载完成才能继续的操作，jQuery提供了一个回调函数。通过回调函数可以在某些效果完成之后执行操作。Ajax回调的功能与此类似，只不过是在数据从服务器返回后执行操作

以模仿JSON的例子来准备脚本代码，以便在脚本执行时将HTML插入到页面中。

var entries = [
{
"term": "CALAMITY",
"part": "n.",
"definition": "A more than commonly plain and..."
},
{
"term": "CANNIBAL",
"part": "n.",
"definition": "A gastronome of the old school who..."
},
{
"term": "CHILDHOOD",
"part": "n.",
"definition": "The period of human life intermediate..."
}
//省略的内容
];
var html = '';
$.each(entries, function() {
html += '<div class="entry">';
html += '<h3 class="term">' + this.term + '</h3>';
html += '<div class="part">' + this.part + '</div>';
html += '<div class="definition">' + this.definition + '</div>';
html += '</div>';
});
$('#dictionary').html(html);

我们已经领略过了jQuery强大的DOM遍历能力。遍历XML文档的方式同HTML文档一样，也可以使用常规的.find()、.filter()及其他遍历方法。jQuery可以使用任意XML标签名，如这里的entry和difinition，就和使用标准HTML标签一样方便。

现代浏览器调用原生的JSON.parse()就能解析json文件，所以读取JSON文件的速度非常快。
JSON文件中的错误可能会导致页面上的脚本静默地中止运行，甚至还会带来其他的负面影响。因此，这种数据必须由信得过的人仔细构建。