为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础教程(第四版)读书笔记“通过Ajax发送数据“

标签:
JQuery

一个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文件中的错误可能会导致页面上的脚本静默地中止运行,甚至还会带来其他的负面影响。因此,这种数据必须由信得过的人仔细构建。

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
251
获赞与收藏
1274

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消