当jquery ajax遇上401请求

jquery ajax是个很常用接口,而在请求时候,可能存在响应401的情况(身份认证过期或未登录),比较容易出现在混合应用上,如何进行身份认证,重发失败请求,还是值得注意的。

ajax请求有两种方式

1. 回调

最常写的方式,成功失败处理以回调方式传入。

$.ajax({
      ajax参数...
      success : xxxxxx
      error: xxxxxx
});

2. Deferred方式

Deferred模式我在《js异步编程》有说明, ajax调用本身返回就是一个Deferred对象,成功失败回调不以参数传入。

$.ajax({
     ajax参数...
}).then(function(res){
    //成功处理片段
},function(err){
    //失败处理片段
});

既然有这两种方式,那应对处理401的方式也是有两种。

401处理的两种方式

1. 回调

这种方式的处理比较简单,在失败回调里面判断401,如果是则进行身份认证,成功重发请求。

function  getXXXX(type, url, data, success, error){
  $.ajax({
      ajax参数...
      success : xxxxxx
      error : function(xhr,textStatus,errorThrown){
         if (xhr.status == 401) {
            刷新身份认证方法(function(){
                getXXXX(type, url, data, success, error);
             });
          } else{
             // 调用外部的error
              error && error(xhr,textStatus,errorThrown);
         }
      }
  });
}

2. Deferred方式

这种方式目前我找到的处理方式需要修改jquery源码。

//全局设置一个方法
$.ajaxSetup({
     authError : function(callback){
           刷新身份认证方法( function(){
                callback && callback();
           });
     }
});

//jquery2.1.4版本源码,大概是8261行
// Success/Error
if ( isSuccess ) {
     deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
} else {
     if(( jqXHR.status == 401 || jqXHR .status == 403) && callbackContext.authError){
       callbackContext.authError(function (){
            state = 0;
            jqXHR.setRequestHeader( "Authorization", XXXXXX);
            jqXHR.readyState = 1;
            try {
                state = 1;
                transport.send( requestHeaders, done );
            } catch ( e ) {
                // Propagate exception as error if not done
                if ( state < 2 ) {
                     done( -1, e );
                // Simply rethrow otherwise
                } else {
                    throw e;
                }
            }
       });
       return;
     } else {
           deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
     }
}

这里说下为什么不能像第一种方式那样进行请求。

有两个原因:

1. then这种链式写法,导致这请求的回调不是在参数里,而是在jQuery.Callbacks一个optionsCache全局变量里,我们无法在ajax error里拿到回调函数进行重发。

2. 写在then里的回调触发一次就会被销毁,当触发了error时,回调执行后就销毁。

最后的处理方式就是在要触发error之前,拦截401的错误,重新进行身份认证,然后重置状态,重发请求。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5402092.html

转载:http://www.cnblogs.com/lovesong/p/5402092.html

时间: 2024-12-27 14:11:27

当jquery ajax遇上401请求的相关文章

当jquery ajax遇上401请求的解决方法_jquery

jquery ajax是个很常用接口,而在请求时候,可能存在响应401的情况(身份认证过期或未登录),比较容易出现在混合应用上,如何进行身份认证,重发失败请求,还是值得注意的. ajax请求有两种方式 1. 回调 最常写的方式,成功失败处理以回调方式传入. $.ajax({ ajax参数... success : xxxxxx error: xxxxxx }); 2. Deferred方式 Deferred模式我在<js异步编程>有说明, ajax调用本身返回就是一个Deferred对象,成功

jquery+ajax实现跨域请求的方法

 这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下     本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为 "jsonp" :type 只能为 GET 前台请求代码如下: 代码如下: $.ajax({ type: "GET", url: "http://www.xxx.com/Rest/Val

jQuery Ajax方式上传文件的方法_AJAX相关

jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传

jquery+ajax实现跨域请求的方法_jquery

本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为  "jsonp"  :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({  type: "GET",  url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",  dataType: "j

基于jQuery Ajax实现上传文件_jquery

本文实例为大家分享了基于jQuery Ajax实现上传文件的关键代码,供大家参考,具体内容如下 JS代码: //保存 function btnAdd() { var formData = new FormData($("#frm")[0]); $.ajax({ url: "/Admin/ContentManage/SaveEdit", type: "POST", data: formData, contentType: false, //必须fa

jQuery Ajax方式上传文件的方法

jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传

jQuery Ajax文件上传(php)_jquery

如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代

Jquery Ajax请求方法小结(值得收藏)_AJAX相关

 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

jQuery Ajax 上传文件处理方式介绍(推荐)_jquery

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式. FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过J