返回介绍

6.7 jQuery 中的 Ajax 全局事件

发布于 2024-08-20 01:10:33 字数 2470 浏览 0 评论 0 收藏 0

jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面,而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。通过jQuery提供的一些自定义全局函数,能够为各种与Ajax相关的事件注册回调函数。例如当Ajax请求开始时,会触发ajaxStart()方法的回调函数;当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们。在前面例子中,远程读取Flickr.com网站的图片速度可能会比较慢,如果在加载的过程中,不给用户提供一些提示和反馈信息,很容易让用户误认为按钮单击无用,使用户对网站失去信心。

此时,就需要为网页添加一个提示信息,常用的提示信息是加载中…,代码如下:

然后用CSS控制元素隐藏,当Ajax请求开始的时候,将此元素显示,用来提示用户Ajax请求正在进行。当Ajax请求结束后,将此元素隐藏。代码如下:

这样一来,在Ajax请求过程中,只要图片还未加载完毕,就会一直显示加载中…的提示信息,看似很简单的一个改进,却将极大地改善用户的体验。效果如图6-13所示。

如果在此页面中的其他地方也使用Ajax,该提示信息仍然有效,因为它是全局的。如图6-14所示。

图6-13 显示"加载中…"的提示信息

图6-14 demo2也使用同一个提示信息

jQuery的Ajax全局事件中还有几个方法,也可以在使用Ajax方法的过程中为其带来方便。如表6-4所示。

表6-4 另外几个方法

方 法 名 称

说  明

ajaxComplete(callback)

Ajax请求完成时执行的函数

ajaxError(callback)

Ajax请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递

ajaxSend(callback)

Ajax请求发送前执行的函数

ajaxSuccess(callback)

Ajax请求成功时执行的函数

注意:1,如果想使某个Ajax请求不受全局方法的影响,那么可以在使用$.ajax(options)方法时,将参数中的global设置为false,jQuery代码如下:

2,在jQuery1.5版本之后,如果Ajax请求不触发全局方法,那么可以设置:

具体原因请查看:http://bugs.jquery.com/ticket/8338

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文