首页 > js学习 > js基础知识 > jQuery中Ajax的局部方法
2016
12-16

jQuery中Ajax的局部方法

一.加载请求

在Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题。如果在请求期间能给用户一些提示,比如:正在努力加载中...,那么相同的请求时间会让用户体验更加的好一些。jQuery 提供了两个全局事件,.ajaxStart()和.ajaxStop()。这两个全局事件,只要用户触发了Ajax,请求开始时(未完成其他请求)激活.ajaxStart(),请求结束时(所有请求都结束了)激活.ajaxStop()。

这两个方法都必须绑定在document元素上。

$(document).ajaxStart(function () {

$('.loading').show();//触发ajax后.loading元素将隐藏

}).ajaxStop(function () {

$('.loading').hide();//ajax结束后.loading元素将显示

});

$.ajax({timeout : 500});//如果请求时间太长,可以设置超时

$.ajax({global : false});//如果某个 ajax 不想触发全局事件,可以设置取消

二.错误处理

Ajax 异步提交时,不可能所有情况都是成功完成的,也有因为代码异步文件错误、网络错误导致提交失败的。这时,我们应该把错误报告出来,提醒用户重新提交或提示开发者进行修补。

在之前高层封装中是没有回调错误处理的,比如$.get()、$.post()和.load()。所以,早期的方法通过全局.ajaxError()事件方法来返回错误信息。而在 jQuery1.5之后,可以通过连缀处理使用局部.error()方法即可。而对于$.ajax()方法,不但可以用这两种方法,还有自己的属性方法error : function () {}。

$.ajax({ //$.ajax()使用属性提示错误

url : 'test1.php',

data : $('form').serialize(),

error : function (xhr, errorText, errorStatus) {alert(xhr.status + ':' + xhr.statusText);}

});

$.post()使用连缀.error()方法提示错误,连缀方法将被.fail()取代

$.post('test1.php').error(function (xhr, status, info) {alert(xhr.status + ':' +xhr.statusText);});

$.post()使用全局.ajaxError()事件提示错误

$(document).ajaxError(function (event, xhr, settings, infoError) {alert(xhr.status + ':' +xhr.statusText);});

三.请求全局事件

jQuery 对于 Ajax操作提供了很多全局事件方法,.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他们都属于请求时触发的全局事件,除了这些,还有一些其他全局事件:

.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。

.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。

.ajaxSend(),没有对应的局部方法,只有属性 beforeSend,请求发送之前要绑定的函数。

注意:全局事件方法是所有 Ajax 请求都会触发到,并且只能绑定在document上。而局部方法,则针对某个Ajax。

对于一些全局事件方法的参数,大部分为对象,而这些对象有哪些属性或方法能调用,可以通过遍历方法得到。

$(document).ajaxSuccess(function (event, xhr, settings) {

for (var i in settings) {alert(i);}//遍历 settings 对象的属性

});

$.ajax()方法,可以直接通过属性设置即可实现全局事件功能:

$.ajax({

url : 'test.php',

data : $('form').serialize(),

success : function (response, status, xhr) {$('#box').html(response);},

complete : function (xhr, status) {alert('完成' + ' - ' + xhr.responseText + ' - ' + status);},

beforeSend : function (xhr, settings) {alert('请求之前' + ' - ' + xhr.readyState + ' - ' + settings.url);}

});

在 jQuery1.5版本以后,使用.success()、.error()和.complete()连缀的方法,分别用.done()、.fail()和.always()取代。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。