html同时执行多个ajax,jquery ajax如何高效的执行请求

什么是AJAX

Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax是异步 JavaScript 和 XML(标准通用标记语言的子集)，用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX不是新的编程语言，而是一种使用现有标准的新方法。传统的网页(不使用Ajax)如果需要更新内容，必须重载整个网页页面。而现在通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，这也是他最大的优点。推荐大家阅读之前我写的一篇文章《关于浏览器的跨域问题实用方法总结》

更新ajax的写法

传统的ajax写法，代码如下：

$.ajax({

Url: “/ajax”,

Type: “get”,

dataType: “json”

Success:function(){

alert(“呵呵，成功了！”)

},

error:function(){

alert(“出错了”);

}

});

在上面的代码中，$.ajax()接受一个对象参数，这个对象包含两个方法：success方法指定操作成功后的回调函数，error方法指定操作失败后的回调函数。

这个写法可以说是现在大部分人在用的，它是jQuery1.4+版本中jQuery的写法，在我工作中接触的ajax几乎都是这个写法。jquery1.5+以后的版本的新功能大部分人都没用到，也没去更新自己的知识。随着前后端的分离，现在前端开发人员也开始着重利用ajax去和后台做交互工作，但是我发现还是有很多前端开发人员用的还是传统的ajax写法，所以这也是我整理这篇笔记的部分原因。

从jquery1.5+版本以后的，引入了一个新的功能deferred对象。jquery为此对ajax进行了重构。这个功能将是未来jQuery的核心，它彻底改变了ajax在jQuery的使用，jQuery的全部ajax代码都被改写了。

在低于1.5.0版本的jQuery中$.ajax()操作完成后，返回的是XHR对象，你没法进行链式操作；但是在1.5.0版本以后，返回的是deferred对象，可以进行链式操作。

直接上jquery1.5+以后的ajax写法：

$.ajax({

url: "/ajax",

type:"get",

dataType: "json"

}).done(function( data ) {

alert("成功回调");

}).fail(function(data){

alert("失败回调");

}).always(function(){

alert(“已执行！”)

});

可以看到改用链式写法后，代码的可读性大大提高。这里的done()相当于success方法，fail()相当于error方法,always()方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。

$.when()方法为多个操作指定回调函数

deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。

$.when($.ajax("test1.html"), $.ajax("test2.html"))

.done(function(){ alert("哈哈，成功了！"); })

.fail(function(){ alert("出错啦！"); });

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

then()方法

有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

$.when($.ajax( "/main.php" )).then(successFunc, failureFunc );

如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。

以上就是ajax的新方法，这个我在项目中用过确实方便维护，可读性也大大提高，还停留在jQuery1.4+版本的同学是时候对你的知识升级一下了。