AJax技术

jquery ajax异步请求回调的详解

字号+ 作者:H5之家 来源:H5之家 2016-01-15 12:25 我要评论( )

ajax异步请求回调在jquery中很容易实现的只要对参数进行设置好即可了,下面我们一起来看一个ajax异步请求回调的例子。是指在写ajax异步请求...

导读:ajax异步请求回调在jquery中很容易实现的只要对参数进行设置好即可了,下面我们一起来看一个ajax异步请求回调的例子。是指在写ajax异步请求...

ajax异步请求回调在jquery中很容易实现的只要对参数进行设置好即可了,下面我们一起来看一个ajax异步请求回调的例子。


是指在写ajax异步请求时该如果写回调呢?写啥回调呢?错误时触发哪个回调呢?

常见的有:

$.post(url, {}, function(res){

}, 'json');
殊不知这种在出错的时候没有任何的处理。。。

通常我这样写:

$.ajax({
    url: '',
    data: {},
    dataType: 'json',
    type: 'POST',
    success: function(res){},
    error: function(){},
    complete: function(){}
});
你可能在说,代码可能有点多,其实我感觉只要业余清晰,代码多点也是能接受的,当然你可以用伟大的promise处理回调。。。在jquery里她转换成了deferred

一定要考虑的

缓存问题,这个通常发生在ie低版本,如ie7,一般使用时间缀解决
loading的状态,一定要让用户知道当前处理正在请求过程中
返回值出错,通常给予友好提示
服务器出错,其中包括404,500等状态
网络超时,一般有个时间限制
用户主动中断请求,如:abort
比如我的代码片断:

// 判断逻辑,如果成功才发请求

// 给出loading状态

// 发送请求,并所当前请求存放起来,以方便用户主动清除
XHR = $.ajax({
    url: '',
    data: {},
    dataType: 'json',
    type: 'POST',
    success: function(res){
        if(res && res.errcode === 0){
            // 成功
        } else {
            // 返回值不理想
        }
    },
    error: function(xhr, status){
        // status => timeout,parsererror,error,abort
        if(xhr && status !== 'abort'){
            // 如果不是用户主动中断
        }
    },
    complete: function(){
        // 关闭loading
    }
});
注:不管成功或者失败都会执行complete回调,且是在error或success后执行

回调触发的类型

error

错误回调,相当于fail
当后端出错,或者服务器状态码不为200,会触发error,第二参数为error

当返回值解析错误时触发error,第二个参数为parsererror

当响应超时时触发error,第二个参数为timeout

当用户主动中断请求时触发error,第二个参数为abort

以上是在jquery和zepto中测试

success

成功回调,相当于done
在jquery中当返回状态为200且内容正常解析后触发

在zepto中当返回值状态为200且内容不为空时触发,这是一个坑啊。。。

complete

完成回调,相当于always
不管成功还是失败,该事件总会执行,顺序在success和error之后

转载请注明(B5教程网)原文链接:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

  • 05 jQuery与Ajax以及序列化

    05 jQuery与Ajax以及序列化

    2016-02-08 12:08

  • jquery.ajax制作帝国cms6.6快速登录插件

    jquery.ajax制作帝国cms6.6快速登录插件

    2016-02-06 15:00

网友点评
"