本篇文章主要的介绍了关于ajax的全局事件引用方式以及各个事件执行顺序,现在我们一起来阅读本篇文章吧
jquery的ajax方法的全部全局事件:
ajaxstart:ajax请求开始前
ajaxsend:ajax请求时
ajaxsuccess:ajax获取数据后
ajaxcomplete:ajax请求完成时
ajaxerror:ajax请求发生错误后
ajaxstop:ajax请求停止后
ajax方法的全局事件的用处当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getjson()等都会默认触发全局事件,只是通常不绑定全局事件,但实际上这些全局事件非常有用处。
ajax全局事件,有个典型的应用场合:你的页面存在多个甚至为数不少的ajax请求,但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框,提示“正在读取数据“;ajax请求成功时提示框显示“数据获取成功”;ajax请求结束后隐藏提示框。不使用全局事件的做法是:给$.ajax()加上beforesend、success、complete回调函数,在回调函数中加上处理提示框。使用全局事件的做法是:
$(document).ajaxstart(onstart) .ajaxcomplete(oncomplete) .ajaxsuccess(onsuccess);function onstart(event) { //.....}function oncomplete(event, xhr, settings) { //.....}function onsuccess(event, xhr, settings) { //.....}
jquery中各个事件执行顺序如下1.ajaxstart(全局事件)
2.beforesend(局部事件)
3.ajaxsend(全局事件)
4.success(局部事件)
5.ajaxsuccess(全局事件)
6.error(局部事件)
7.ajaxerror (全局事件)
8.complete(局部事件)
9.ajaxcomplete(全局事件)
10.ajaxstop(全局事件)
示例<!doctype html><html> <head> <meta charset="utf-8" /> </head> <body> <input type="button" value="点击触发ajax请求" id="ajaxreuqestid" /> <p id="ajaxstateid"></p> <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(function() { //点击按钮,并执行ajax请求 $(document).ajaxstart(function() { $(#ajaxstateid).append(ajaxstart + <br/>); alert(ajaxstart); }).ajaxsend(function() { $(#ajaxstateid).append(ajaxsend + <br/>); alert(ajaxsend); }).ajaxsuccess(function() { $(#ajaxstateid).append(ajaxsuccess + <br/>); alert(ajaxsuccess); }).ajaxerror(function() { $(#ajaxstateid).append(ajaxerror + <br/>); alert(ajaxerror); }).ajaxcomplete(function() { $(#ajaxstateid).append(ajaxcomplete + <br/>); alert(ajaxcomplete); }).ajaxstop(function() { $(#ajaxstateid).append(ajaxstop + <br/>); alert(ajaxstop); }); $(#ajaxreuqestid).click(function() { $.ajax({ url: server/ajaxtxt.txt, global: true, beforesend: function() { $(#ajaxstateid).append(berforesend + <br/>); alert(berforesend); }, success: function() { $(#ajaxstateid).append(success + <br/>); alert(success); }, error: function() { $(#ajaxstateid).append(error + <br/>); alert(error); }, complete: function() { $(#ajaxstateid).append(complete + <br/>); alert(complete); } }); }); }); </script> </body></html>
以上就是ajax全局事件引用方式以及各个事件(全局/局部)执行顺序的详细内容。