Ajax 的回调

Posted 2021-04-15 jQuery每日经典

 1   document.getElementById("test").onclick=function(){ 
 2     console.log(1); 
 3   } 
 4   document.getElementById("test").onclick=function(){ 
 5     console.log(2); 
 6   } 
 7   document.getElementById("test1").addEventListener("click", function(){ 
 8     console.log(3); 
 9   });
10   document.getElementById("test1").addEventListener("click", function(){
11     console.log(4);
12   });

页面上有两个button，以上js代码为button添加click事件。会输出什么样的结果呢？

如果不想覆盖第一个添加的click事件，需要使用第二种方法。那怎么给ajax添加多个回调事件呢？

jQuery 中 Ajax 的发展

‍1. 原始版本

在JQuery 1.5之前，Ajax仅支持一个回调函数，

1     $.ajax({
2       url: "/ServerResource.txt",
3       success: successFunction,
4       error: errorFunction
5     });

$.ajax()操作完成后，返回的是XHR对象，你没法进行链式操作；

2. 链式操作，多次调用

但在JQuery的1.5版本中，引入了  对象，它返回的是deferred对象，允许注册多个回调函数，并且能传递任何同步或异步函数的执行状态–成功或失败。

1 $.ajax( "example.php" )
2 .done(function() { alert("success"); })
3 .fail(function() { alert("error"); })
4 .always(function() { alert("complete"); });

 always() 相当于 complete() ， done() 相当于success()， fail()   相当于error()。在 done() 或 fail() 执行完毕之后才执行，即无论Ajax的执行结果是什么， always() 总会执行。

也可以添加多个相同的回调函数：

1 $.ajax("test.html")
2 .done(function(){ alert("第一个done回调函数");} )
3 .fail(function(){ alert("出错啦！"); } )
4 .done(function(){ alert("第二个done回调函数！");} );

简单说，  对象就是jQuery的回调函数解决方案，它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。

3.  then方法的使用

另外一种产生链式调用的方式是利用Promise的 方法，它接受三个event handlers作为参数，对于多个回调函数，有需要以数组方式传入三个参数

$.ajax({url: "/ServerResource.txt"})
.then(successFunction,errorFunction,alwaysFunction);

$.ajax({url: "/ServerResource.txt"})
.then([successFunction1, successFunction2, successFunction3],
[errorFunction1, errorFunction2]);

也可以多次调用then方法：

1 var promise = $.ajax("/myServerScript1");
2 function getStuff() {
3   return $.ajax("/myServerScript2");
4 }
5 promise.then(getStuff).then(function(myServerScript2Data){
6   // Do something
7 });

4. when方法为多个操作指定回调函数

Deferred对象允许你为多个事件指定一个回调函数，这是传统写法做不到的。请看下面的代码，它用到了一个新的方法  ：

$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });

这段代码的意思是，先执行两个操作 $.ajax("test1.html") 和 $.ajax("test2.html") ，如果都成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。

Complete

开头题的答案是：

点击test按钮 -- 输出2

点击test1按钮 -- 输出3,4

这个发展历程得益于程序猿们不断对promise的完善，关于promise的教程可以查看官网文档。