《1》
ajaxStart() 设置当前第一个AJAX请求开始时执行的处理函数。
ajaxSend() 设置在AJAX请求被发送前执行的处理函数。
ajaxComplete() 设置当AJAX请求完成(无论成功或失败)时执行的处理函数。
ajaxStop() 设置当前最后一个AJAX请求结束时执行的处理函数。
<html> <head> <title></title> <script src="jquery-1.11.2.js"></script> </head> <body> <label for="UserId">请输入用户的ID编号:</label><input type="text" id="UserId" name="UserId" style="width:20px" /> <input type="button" id="btnClick" value="提交" /> <div id="loadMes" style="display:none">我正在努力加载中哦.....</div> <div id="loadData"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> </head> <body> <label for="UserId">请输入用户的ID编号:</label><input type="text" id="UserId" name="UserId" style="width:20px" /> <input type="button" id="btnClick" value="提交" /> <div id="loadMes" style="display:none">我正在努力加载中哦.....</div> <div id="loadData"></div> </body> </html> <script type="text/javascript"> $(function () { $("#btnClick").click(function () { var id = $("#UserId").val(); $.get("loadHandler.ashx",{ id: id },function (data,status,jsXHR) {//为了测试error这里填写了一个找不到的URL地址 $("#loadData").text(data); }).error(function (XMLHttpRequest,textStatus,errorThrown) { alert(XMLHttpRequest.statusText) }).success(function (data,jsXHR) { alert(status) }); }); //--------------------------ajaxStart()与ajaxStop()这两个全局事件必须绑定在document元素上。 //在Ajax异步发送请求时,遇到网速比较慢的时候,就会出现请求比时间较长的问题,用户等的不耐烦就会关闭页面。而如果在请求期间能给用户一些提示。比如:正在努力加载中... 那么用户可能会等久一点,体验就业好一些了。 //jquery提供了两个全局事件,ajaxStart()和ajaxStop() 这两个全局事件,只要用户触发了Ajax,请求开始(仅仅是准备开始请求,还未完成请求)那么就会触发ajaxStart()这个事件。 当用户请求结束的时候就会触发ajaxStop()事件 $(document).ajaxStart(function () { $("#loadMes").show(); }).ajaxStop(function () { $("#loadMes").hide(); alert("加载完毕") }); //当然我们也可以分开来写 $(document).ajaxStart(function () { alert("我是start") }); $(document).ajaxStop(function () { $("#loadMes").hide(); alert("请求完毕") }) //----------------ajaxSend()与ajaxComplete()这两个全局事件必须绑定在document元素上。 //ajaxSend()函数用于设置当AJAX请求即将被发送时执行的回调函数。(它比ajaxStart()稍微慢一点。一般而言,连续执行多个AJAX请求,只有其中的第一个AJAX请求会触发ajaxStart事件。等到所有AJAX请求执行完毕后,再次连续执行多个AJAX请求,还是只有其中的第一个AJAX请求会触发ajaxStart事件。 ) //ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数。 $(document).ajaxSend(function () { $("#loadMes").show(); }).ajaxComplete(function () { $("#loadMes").hide(); }) //----------------------ajaxError()这个全局事件只能绑定在document元素上() //这是一个全局AJAX事件函数,用于为任何AJAX请求的ajaxError事件绑定事件处理函数 $(document).ajaxError(function (event,jsXHR,settings,errorType) { //第一个参数(事件对象) alert(event.type); //打印出:ajaxError 即:触发的事件 alert(event.target); //打印出:[object HTMLDocument] 即:触发事件的元素 //第二个参数 alert(jsXHR.statusText); //第二个参数是一个XMLHttpRequst对象 //第三个参数 详情请参照http://www.w3school.com.cn/jquery/ajax_ajax.asp for (var a in settings) { document.write(a + "<br/>") //通过打印得知:其实这个settings就是本次AJAX请求的所有参数设置:详情如下 /* url 注意:settings是一个对象。以下都是这个对象的属性或者方法 type isLocal global processData async contentType accepts contents responseFields converters flatOptions xhr jsonp jsonpCallback success dataTypes crossDomain hasContent */ } alert(settings.url); //打印出:loadHandler.ashx?id=v 即:发生错误的请求url alert(settings.type);//打印出:GET 即:发生错误的请求的请求方式 alert(settings.global) //打印出:true 即:是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件 alert(settings.async); //打印出:true 即请求为异步。 如果是false 表示请求为同步 alert(settings.dataTypes); //打印出:text,html 即:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断 */ for (var b in settings.contents) { //contents是一个对象 document.write(b + "<br/>") //打印出: xml,html,json,script } //第四个参数 (错误描述) alert(errorType); //打印出:Internal Server Error :即发生错误的类型 ,内部服务器错误 }) }) </script>