企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

jquery ajax如何高效的执行请求

JavaScript笔记 码云 28℃ 0评论
目录
[隐藏]

什么是AJAX

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

jquery 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+版本的同学是时候对你的知识升级一下了。

转载请注明:码云笔记 » jquery ajax如何高效的执行请求

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址