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的错误,重新进行身份认证,然后重置状态,重发请求。

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

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

  1. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  2. 用JQuery Ajax 与一般处理程序 请求数据无刷新,以及如何调试错误

    通过 ajax() 与 一般处理程序,请求数据库数据,实现界面无刷新. Jquery ajax 请求参数详细说明 http://www.w3school.com.cn/jquery/ajax_ajax ...

  3. 简单的jquery ajax文件上传功能

    /* * 图片上传 * 注意如果不加processData:false和contentType:false会报错 */ function uploadImage(image) { var imageF ...

  4. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

  5. ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析

    该示例中实际上应用了 jquery ajax(web client) + async web api 双异步. jquery ajax post $.ajax({ type: "POST&q ...

  6. struts2+jquery+ajax实现上传&&校验实例

    一直以为ajax不能做上传,直到最近看了一些文章.需要引入AjaxFileUploaderV2.1.zip,下载链接:http://pan.baidu.com/s/1i3L7I2T 代码和相关配置如下 ...

  7. jQuery ajax中的get请求方法汇总

    $.get() Defination and Usage 从服务端以HTTP GET方式获取数据 Examples 请求test.php,但是忽略返回的数据 $.get("test.php& ...

  8. Struts2 使用Jquery+ajax 文件上传

    话不多说 直接上代码 前台js: var formData = new FormData(); formData.append("file1",$("#file1&quo ...

  9. jQuery选择器遇上一些特殊字符

    学习jQuery过程中,发现一些特殊字符,如“.”,“#”,"(","]"等.它在选择器应用时,按照普通处理就会出错.解决办法,就是使用转义字符来处理,这有点象 ...

随机推荐

  1. Uvaoj 11624 - Fire!

    /************************************************************************* > File Name: test.cpp ...

  2. [OpenCV] Samples 02: [ML] kmeans

    注意Mat作为kmeans的参数的含义. 扩展:高维向量的聚类. #include "opencv2/highgui.hpp" #include "opencv2/cor ...

  3. 轻松自动化---selenium-webdriver(python) (十一)

    本节重点: 控制滚动条到底部 有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户 ...

  4. CSS 魔法系列:纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  5. [Azure附录]2.在Windows Server 2012中配置AD域服务

    <Windows Azure Platform 系列文章目录> 本章我们配置的AD域名为contoso.com 1.安装完AD域服务后,我们返回服务器管理器界面,点击"将此服务器 ...

  6. SQL Server代理(1/12):配置和概况

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. SQL Server代理是SQL Serv ...

  7. MVC 创建线程内的db单例

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using LSUnion.S ...

  8. 关于CodeFirst异常:无法确定类型'XXX'和类型‘YYY’之间的关联的主体端,必须使用关系 Fluent API 或数据注释显式配置此关联的主体端。

    此错误的原因是,你配置两个实体间的关系为一对一 然而我认为的一对一关系是,两者之间必须存在一个主体, 也就是说,你不能表1的外键是表2的主键并且表1的主键是表2的外键, 这样不符合数据库式吧? 我想多 ...

  9. iOS 阶段学习第24天笔记(Block的介绍)

    iOS学习(OC语言)知识点整理 一.Block 的介绍 1)概念: block 是一种数据类型,类似于C语言中没有名字的函数,可以接收参数,也可以返回值与C函数一样被调用 封装一段代码 可以在任何地 ...

  10. Win10 IoT C#开发 3 - GPIO Pin 控制发光二极管

    Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行. 上一篇文 ...