亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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前端工程師
手記
粉絲
250
獲贊與收藏
1274

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消