jQuery教程(21)-jquery ajax 回调函数

文章标签: jquery,jquery-ajax
2015-1-15 22:15:31     21 人阅读    

            到现在为止,我们已经学习了如何调用Ajax方法,并且始终都在处理响应。然而,有时候多了解一些调用Ajax方法过程中的HTTP请求也会给我们带来方便。为满足这种需求,jQuery提供 了一组函数,通过它们能够为各种与Ajax相关的事件注册回调函数。

          其中ajaxStart()和.ajaxStop()方法就是这些“观察员”函数中的两个例子,可以把 它们添加给任何jQuety对象。当Ajax请求开始且尚未进行其他传输时,会触发.ajaxStart()的 回调函数。相反,当最后一次活动请求终止时,则会执行通过.ajaxStop()注册的回调函数。 所有这些“观察员”都是全局性的,因为无论创建它们的代码位于何处,当Ajax通信发生时都需 要调用它们。而且这些方法都与.ready()方法一样,只能由$(document)调用。
         在网络连接的速度比较慢时,可以通过这些方法为用户提供一些反馈。页面中用作反馈的 HTML可以包含适当的Loading...(加载中)信息,例如:

<div id="loading">
Loading...
</div>


            反馈信息就是一个HTML片段,比如可以包含用作动态指示器的一幅动态GIF图像。此时, 可以在CSS文件中添加一些简单的样式,这样当显示该信息时,页面的外观如图6-11所示。


           但是,依照渐进增强的原则,我们并没有把HTML标记直接放在页面中。因为这段信息只能 在JavaScript有效的情况下使用,所以应该通过jQueiy来插人它:

$(document).ready(function() {
$('<div id="loading">Loading...</div>')
.insertBefore('#dictionary')
});

            而在CSS文件中,我们为这个<div>添加了一条display:none;样式规则,以便在初始时隐 藏这条信息。要在恰当的时机显示这条信息,只需通过.ajaxStart()将它注册为一个“观察员” 即可:

$(document).ready(function() {
var $loading = $('<div id="loading">Loading...</div>') .insertBefore('#dictionary');
$(document).ajaxStart(function() { $loading.show();
});
});

           而且,可以在此基础上继续连缀相应的隐藏行为: 代码清单6-15

$(document).ready(function() {
var $loading = $('<div id="loading">Loading...</div>') .insertBefore('#dictionary');
$(document).ajaxStart(function() { $loading.show();
}).ajaxStop(function() {
$loading.hide();
});
});


            好的!我们的加载反馈系统已经就位了。


            同样,我们注意到,这两个方法没有通过特别的方式与Ajax通信的开始建立联系。链接A上 的.load()和链接B上的.getJSON()都可以导致反馈操作发生。


           在这种情况下,全局行为是有必要的。假如我们想要建立具体的联系,也有一些可控的选项。 某些观察员方法,如.ajaxError(),会向它们的回调函数发送一个对XMLHttpRequest对象的 引用。这样就可以做到区别不同的请求来提供不同的行为。其他更具体的处理可以通过使用低级 的$.ajax()函数来完成。


          不过,与请求最常见的交互方式(我们已经介绍过了),是成功(success)回调函数。在前 面的几个例子中,我们就是使用这个回调函数来解析从服务器返回的数据,然后将结果填充到页面上。当然,也可以使用其他回调函数。现在,仍然以代码清单6-沖使用的.load()方法为例:

$(document).ready(function() {

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


           此时,通过使加载的内容淡人视图而不是突然出现,可以从视觉上加人一些增强的效果。.load()方法可以接受一个加载完成时触发的回调函数,参见代码清单6-16。
代码清单6-16

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


         以上代码首先隐藏了目标元素,然后开始加载。当加载完成时,又通过回调函数以淡人方式 逐渐显示出新生成的元素。


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

jQuery教程(22)-ajax操作之错误处理   上一篇
下一篇  jQuery教程(20)-jquery ajax + php 操作之为Ajax请求提供不同的内容

精彩回复
发表评论
姓名:       

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