jquery API Ajax(1)

分类:Ajax


.ajaxComplete()

1.当Ajax请求完成后注册一个回调函数。这是一个 AjaxEvent。

HTML示例代码

 1 <!doctype html>

 2     <html>

 3      <head>

 4           <meta charset="utf-8">

 5           <title>jquery学习</title>

 6           <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

 7           <script src="js/custom.js"></script>

 8           <link type="text/css" rel="stylesheet" href="css/style.css"/>

 9      </head>

10      <body>

11      <div class="wrap">

12           <h1>hello ajax</h1>

13           <h2>.ajaxComplete()</h2>

14           <p>每当一个ajax请求完成时会触发ajaxComplete事件,在这个时间点所有处理函数会使用.ajaxComplete()方法注册并执行。</p>

15           <button type="button" class="trigger-binding">trigger-binding</button>

16           <button type="button" class="trigger-nobinding">trigger-nobinding</button>

17           <div class="result"></div>

18           <div class="result2"></div>

19           <div class="log"></div>

20           <div class="msg"></div>

21           <h2>.ajaxError()</h2>

22 

23          

24           <button type="button" class="ajaxError">ajaxError</button>

25           <div class="lesson2-result">

26           </div>

27           <div class="lesson2-msg"></div>

28      </div>

29      </body>

30     </html>
View Code

js代码

 1 $(document).ready(function(){

 2     //alert("hello jquery!");

 3   $(".trigger-binding").click(function(){

 4      $(".result").load("text.html");

 5   });

 6    $(".trigger-nobinding").click(function(){

 7      $(".result2").load("text2.html");

 8   });

 9   //1.ajax执行之后会执行ajaxComplete()函数

10   /*********注意从jquery1.8之后ajaxComplete只能绑定document*****/

11    $(document).ajaxComplete(function(){

12           $(".log").text("Ajax执行了!");

13      

14   });

15   //2.区分不同的请求

16   //使参数传递给这个处理函数通过事件对象XMLHttpRequest对象和设置对象中的请求,来做每一次ajaxComplete处理执行的

17   //限制我们的回调到只处理某一特定的URL

18   $(document).ajaxComplete(function(event,xhr,settings){

19      if(settings.url=="text.html"){

20           $(".log").text("Ajax执行了!"+xhr.responseHTML);

21      }

22   });

23   //当ajax请求完成后显示一个信息(当执行完一个ajax函数就执行)

24   $(document).ajaxComplete(function(event,request,settings){

25      $(".msg").append("<p>ajax请求完了!</p>");

26   });

27   //其他注意事项

28   //当$global=false;调用$.ajax()或者$.ajaxSetup(),$ajxComplete()方法将不会触发

29 })
View Code

.ajaxError()

Ajax请求出错时注册一个回调处理函数,这是一个 Ajax Event。

js代码

 1 $(document).ready(function(){

 2 /**************.ajxError()***************/

 3   $(".ajaxError").click(function(){

 4       $(".lesson2-result").load('text3.html');

 5   });

 6 

 7   $(document).ajaxError(function(){

 8     $(".lesson2-msg").text("Error!");

 9   });

10   //区分执行出错的文件

11   //其实括号里面的参数也可以写成(event,xhr,setting)

12   $(document).ajaxError(function(event,xhr,settings,exception){

13     if(settings.url=='text3.html'){

14     $(".lesson2-msg").text("this text3.html file nofinde!");

15     }

16   });

17   //其他注意事项

18   //当$global=false;调用$.ajax()或者$.ajaxSetup(),$ajxComplete()方法将不会触发

19   //当ajax请求失败时显示一个信息

20   $(document).ajaxError(function(event,xhr, settings){

21       $(".lesson2-msg").innerHtml("<p>Error requesting"+settings.url+"</p>");

22   });

23 });
View Code

 DEMO

 

你可能感兴趣的:(jquery)