文档章节

jquery的ajax全局事件详解—明河谈jquery

dhole
 dhole
发布于 2013/02/04 15:50
字数 415
阅读 177
收藏 14

jquery在ajax方面是非常强大和方便的,以下是jquery进行ajax请求时方法模板:

  1. $.ajax({
  2.            type"get",
  3.            url"",
  4.                    data : {},
  5.            beforeSend : function(){
  6.  
  7.            },
  8.            success : function(data){
  9.  
  10.            },
  11.            complete : function(){
  12.  
  13.            }
  14.         });

关于$.ajax()方法的使用,不是明河写这篇文章的目的,今天明河主要讲解当进行ajax请求时整个完整的事件流程。

jquery的ajax方法的全部全局事件:

  • ajaxStart:ajax请求开始前
  • ajaxSend:ajax请求时
  • ajaxSuccess:ajax获取数据后
  • ajaxComplete:ajax请求完成时
  • ajaxError:ajax请求发生错误后
  • ajaxStop:ajax请求停止后

当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都会默认触发全局事件,只是通常不绑定全局事件,但实际上这些全局事件非常有用处。

ajax方法的全局事件的用处

ajax全局事件,有个典型的应用场合:
你的页面存在多个甚至为数不少的ajax请求,但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框,提示“正在读取数据“;ajax请求成功时提示框显示“数据获取成功”;ajax请求结束后隐藏提示框。
不使用全局事件的做法是:
给$.ajax()加上beforeSend、success、complete回调函数,在回调函数中加上处理提示框。
使用全局事件的做法是:

  1. $(document).ajaxStart(onStart)
  2.                .ajaxComplete(onComplete)
  3.                .ajaxSuccess(onSuccess);
  4.    
  5.     function onStart(event) {
  6.         //.....
  7.     }
  8.     function onComplete(eventxhrsettings) {
  9.         //.....
  10.     }
  11.     function onSuccess(eventxhrsettings) {
  12.         //.....
  13.     }

ajax方法完整事件流

为了更直观的说明,明河使用Axure画了二个流程图,画的不好还请见谅,O(∩_∩)O

本文转载自:http://www.36ria.com/2882

下一篇: tornado
dhole

dhole

粉丝 4
博文 48
码字总数 16998
作品 0
普陀
个人站长
私信 提问
jQuery零基础入门——(一)初识jQuery

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎来到我们新的课程。应部分读者的要求,为满足...

JandenMa
2018/06/29
0
0
Java程序员从笨鸟到菜鸟之(八十九)跟我学jquery(五)jquery中的ajax详解

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统...

长平狐
2012/11/12
293
0
分享26本关于Jquery的学习书籍(免费下载)

分享26本关于Jquery的学习书籍(免费下载) 1、精通JavaScript+jQuery 2、网友small6分享锋利的jQuery实例源码 3、网友small6分享jQuery权威指南配套源代码 4、犀利开发jQuery内核详解与实践...

邓剑彬
2012/11/30
3.3K
8
jQuery Ajax 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是...

李长春
2011/12/29
0
0
jQuery.noConflict() 函数详解

jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQuery("p")和$("p")是等价的。由于...

鱼煎
2015/07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

solidity智能合约中tx.origin的正确使用场景

简介 tx.origin是Solidity的一个全局变量,它遍历整个调用栈并返回最初发送调用(或事务)的帐户的地址。在智能合约中使用此变量进行身份验证会使合约容易受到类似网络钓鱼的攻击。 但针对t...

程序新视界
20分钟前
0
0
代码详解:基于Python建立任意层数的深度神经网络

全文共6359字,预计学习时长20分钟或更长 图片来源:pexels.com/@divinetechygir 在这篇指南中,我们将建立起一个任意层数的深度神经网络。这个神经网络可以应用于二元分类的监督学习问题。 ...

读芯术
22分钟前
0
0
使用mybatis-plus-gennretor代码生成器生成代码

1导入需要的jar包 <dependencies> <!-- mp依赖 mybaits-plus 会自动维护mybaits jar包 所以不用加入了 防止版本冲突 --> <dependency> <groupId>com.ba......

小小小施爷
40分钟前
0
0
巨杉Tech | 微服务趋势下的数据库设计与应用简析

上周五(7月12日)巨杉数据库参与了由得到App主办八里庄技术沙龙活动,分享主题是关于分布式数据库架构与实战。 以下就是根据巨杉数据库现场分享的内容进行的分享实录整理。 巨杉数据库简介 ...

巨杉数据库
55分钟前
68
0
借助URLOS快速安装AliSQL

环境需求 最低硬件配置:1核CPU,1G内存(1+1)提示:如果你的应用较多,而主机节点的硬件配置较低,建议在部署节点时开通虚拟虚拟内存; 生产环境建议使用2G或以上内存; 推荐安装系统:Ubu...

躲猫猫_007
56分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部