夏日博客

A-A+

jquery ajax异步请求回调的详解

2016年01月12日 前端设计 暂无评论 阅读 8 views 次

ajax异步请求回调在jquery中很容易实现的只要对参数进行设置好即可了，下面我们一起来看一个ajax异步请求回调的例子,是指在写ajax异步请求时该如果写回调呢？写啥回调呢？错误时触发哪个回调呢？

常见的有:

  1. $.post(url, {}, function(res){  
  2. }, 'json');  

殊不知这种在出错的时候没有任何的处理。。。

通常我这样写：

  1. $.ajax({  
  2.     url: '',  
  3.     data: {},  
  4.     dataType: 'json',  
  5.     type: 'POST',  
  6.     success: function(res){},  
  7.     error: function(){},  
  8.     complete: function(){}  
  9. });  

你可能在说，代码可能有点多，其实我感觉只要业余清晰，代码多点也是能接受的，当然你可以用伟大的promise处理回调。。。在jquery里她转换成了deferred,一定要考虑的缓存问题，这个通常发生在ie低版本，如ie7，一般使用时间缀解决.

loading的状态，一定要让用户知道当前处理正在请求过程中

返回值出错，通常给予友好提示,服务器出错，其中包括404,500等状态,网络超时，一般有个时间限制,用户主动中断请求，如：abort,比如我的代码片断:

  1. // 判断逻辑，如果成功才发请求  
  2. // 给出loading状态  
  3. // 发送请求，并所当前请求存放起来，以方便用户主动清除  
  4. XHR = $.ajax({  
  5.     url: '',  
  6.     data: {},  
  7.     dataType: 'json',  
  8.     type: 'POST',  
  9.     success: function(res){  
  10.         if(res && res.errcode === 0){  
  11.             // 成功  
  12.         } else {  
  13.             // 返回值不理想  
  14.         }  
  15.     },  
  16.     error: function(xhr, status){  
  17.         // status => timeout,parsererror,error,abort  
  18.         if(xhr && status !== 'abort'){  
  19.             // 如果不是用户主动中断  
  20.         }  
  21.     },  
  22.     complete: function(){  
  23.         // 关闭loading  
  24.     }  
  25. });  

注:不管成功或者失败都会执行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之后

jquery版本

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>jquery版本</title>  
  6. </head>  
  7. <body>  
  8.     <h2>请点击并查看控制台</h2>  
  9.     <br>  
  10.     <button data-url="/api/testajax/success">成功</button>  
  11.     <button data-url="/api/testajax/404">404</button>  
  12.     <button data-url="/api/testajax/500">500</button>  
  13.     <button data-url="/api/testajax/parseError">解析json错误</button>  
  14.     <button data-url="/api/testajax/empty">返回值空</button>  
  15.     <button data-url="/api/testajax/timeout">超时</button>  
  16.      
  17.     <script type="text/javascript" src="/static/jquery.js"></script>  
  18.     <script type="text/javascript">  
  19.         function send(url){  
  20.             $.ajax({  
  21.                 url: url,  
  22.                 data: {  
  23.                     r: new Date().getTime()  
  24.                 },  
  25.                 dataType: 'json',  
  26.                 error: function(a,b){  
  27.                     console.log(a,b, 'error');  
  28.                 },  
  29.                 success: function(a){  
  30.                     console.log(a, 'success');  
  31.                 },  
  32.                 complete: function(a){  
  33.                     console.log(a, 'complete');  
  34.                 },  
  35.                 timeout: 3000  
  36.             });      
  37.         }  
  38.         $('button').on('click', function(){  
  39.             send($(this).data('url'));  
  40.         });  
  41.     </script>  
  42. </body>  
  43. </html>  

zepto版本

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>zepto版本</title>  
  6. </head>  
  7. <body>  
  8.     <h2>请点击并查看控制台</h2>  
  9.     <br>  
  10.     <button data-url="/api/testajax/success">成功</button>  
  11.     <button data-url="/api/testajax/404">404</button>  
  12.     <button data-url="/api/testajax/500">500</button>  
  13.     <button data-url="/api/testajax/parseError">解析json错误</button>  
  14.     <button data-url="/api/testajax/empty">返回值空</button>  
  15.     <button data-url="/api/testajax/timeout">超时</button>  
  16.      
  17.     <script type="text/javascript" src="/static/zepto.js"></script>  
  18.     <script type="text/javascript">  
  19.         function send(url){  
  20.             $.ajax({  
  21.                 url: url,  
  22.                 data: {  
  23.                     r: new Date().getTime()  
  24.                 },  
  25.                 dataType: 'json',  
  26.                 error: function(a,b){  
  27.                     console.log(a,b, 'error');  
  28.                 },  
  29.                 success: function(a){  
  30.                     console.log(a, 'success');  
  31.                 },  
  32.                 complete: function(a){  
  33.                     console.log(a, 'complete');  
  34.                 },  
  35.                 timeout: 3000  
  36.             });      
  37.         }  
  38.         $('button').on('click', function(){  
  39.             send($(this).data('url'));  
  40.         });  
  41.     </script>  
  42. </body>  
  43. </html>  
标签：

给我留言