jQuery教程(13)-ajax操作之追加 HTML

文章标签: jquery-ajax,jquery
2015-1-12 13:15:31     44 人阅读    


             Ajax应用程序通常只不过是一个针对HTML代码块的请求。这种被称作AHAH (Asynchronous HTTP and HTML,异步HTTP和HTML)的术,通过jQuery来实现只是小菜一碟。首先,需要一些供插人用的HTML,我们把这些HTML放在与主文档位于同一目录下的a.html文件中。第二 个HTML文件开始处的代码如下:

<div class="entry">
<h3 class=MtermM>ABDICATION</h3>
<div class="part">n.</div>
<div class="definition">
An act whereby a sovereign attests his sense of the high temperature of the throne.
<div class="quote">
<div class="quote-line">Poor Isabella's Dead, whose abdication</div>
<div class="quote-line">Set all tongues wagging in the Spanish nation.</div>
<div class="quote-line">For that performance 'twere unfair to scold her:</div>
<div class="quote-line">She wisely left a throne too hot to hold her.</div>
<div class="quote-line">To History she'll be no royal riddle &mdash; </div>
<div class="quote-line">Merely a plain parched pea that jumped the griddle.</div>
<div class="quote-author">G.J.</div>
</div>
</div>
</div>
<div class="entry">
<h3 class="term">ABSOLUTE</h3>
<div class="part">adj.</div>
<div class="definition">
Independent, irresponsible. An absolute monarchy is one in which the sovereign does as he pleases so long as he pleases the assassins. Not many absolute monarchies are left, most of them having been replaced by limited monarchies, where the sovereign's power for evil (and for good) is greatly curtailed, and by republics, which are governed by chance.
</div>
</div>

这个页面的HTML代码中还包含更多词条。单独查看这个文档,结果显示它非常简单,如图 6-2所示。
我们注意到,a.html并不是一个真正的HTML文档,它不包含<html>、<head>或者<body>, 只包含最基本的代码。通常,我们把这种文件叫做片段;它唯一目的就是供插人到其他HTML文 档中使用,插人的过程如代码清单6-1所示。
代码清单6-1

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


$('#dictionary').load('a.html');
});
});ajax追加 HTML

 

图6-2
其中,.load()方法替我们完成了所有烦琐复杂的工作!这里,我们通过常规的jQuery选择 符为HTML片段指定了目标位置,然后将要加载的文件的URL作为参数传递给.load()方法。现 在,当单击第1个按钮时,这个文件就会被加载并插人到<div id="dictionary">内部。而且, 当插人完成后,浏览器会立即呈现新的HTML,如图6-3所示。

 Ajax应用程序通常只不过是一个针对HTML代码块的请求

图6-3

从图6-3中可以看出,虽然这个HTML片段之前没有样式,但现在已经应用了样式。这些样式 是主文档中的CSS规则所添加的,即当新HTML片段插人时,相应的CSS规则也会立即应用到它 的标签上。
测试这个例子:当单击按钮时,字典中的解释会立即出现。这只是在本地运行应用程序的一
种特殊情况。如果通过网络来传递相同的文档,那么需要多长的时间延迟或中断是很难估计的。 下面我们添加一个警告框,使其在加载完解释内容后立即显示,参见代码清单6-2。
代码清单6-2

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


根据代码中的结构,你可能会认为警告框只有在加载过程完成后才会显示。因为JavaScript 通常以同步方式执行代码,即严格按照顺序逐行执行。
然而,当我们在运行中的服务器上测试上面这些代码时,由于网络延迟,警告框很可能先于 加载完成就出现了。这是因为所有Ajax请求在默认情况下都是异步的,否则,我们就要称它为Sjax 了①,而后者显然难以与Ajax相提并论②!
异步加载意味着在发出取得HTML片段的HTTP请求后,会立即恢复脚本执行,无需等待。 在之后的某个时刻,当浏览器收到服务器的响应时,再对响应的数据进行处理。这通常都是人们 期望的行为,但它不会导致在等待数据返回期间锁定整个Web浏览器。
对于必须要延迟到加载完成才能继续的操作,jQuery提供了一个回调函数。我们在第4章就 已经使用过回调函数了。通过回调函数可以在某些效果完成之后执行操作。Ajax回调的功能与此 类似,只不过是在数据从服务器返回后执行操作。本章后面将会在学习从服务器加载JSON数据 时展示使用回调函数的例子。


原文地址:http://www.itmmd.com/201501/478.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

javax.persistence + hibernate 创建对象类没法数据库自动建表   上一篇
下一篇  jQuery教程(12)-ajax操作之基于请求加载数据

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!