当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的错误,重新进行身份认证,然后重置状态,重发请求。
当jquery ajax遇上401请求的更多相关文章
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- 用JQuery Ajax 与一般处理程序 请求数据无刷新,以及如何调试错误
通过 ajax() 与 一般处理程序,请求数据库数据,实现界面无刷新. Jquery ajax 请求参数详细说明 http://www.w3school.com.cn/jquery/ajax_ajax ...
- 简单的jquery ajax文件上传功能
/* * 图片上传 * 注意如果不加processData:false和contentType:false会报错 */ function uploadImage(image) { var imageF ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
- ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析
该示例中实际上应用了 jquery ajax(web client) + async web api 双异步. jquery ajax post $.ajax({ type: "POST&q ...
- struts2+jquery+ajax实现上传&&校验实例
一直以为ajax不能做上传,直到最近看了一些文章.需要引入AjaxFileUploaderV2.1.zip,下载链接:http://pan.baidu.com/s/1i3L7I2T 代码和相关配置如下 ...
- jQuery ajax中的get请求方法汇总
$.get() Defination and Usage 从服务端以HTTP GET方式获取数据 Examples 请求test.php,但是忽略返回的数据 $.get("test.php& ...
- Struts2 使用Jquery+ajax 文件上传
话不多说 直接上代码 前台js: var formData = new FormData(); formData.append("file1",$("#file1&quo ...
- jQuery选择器遇上一些特殊字符
学习jQuery过程中,发现一些特殊字符,如“.”,“#”,"(","]"等.它在选择器应用时,按照普通处理就会出错.解决办法,就是使用转义字符来处理,这有点象 ...
随机推荐
- Android开发常用属性
1.android string.xml 文字中间加入空格 android string.xml前后加空格的技巧 <string name="password">密 ...
- 利用深搜和宽搜两种算法解决TreeView控件加载文件的问题。
利用TreeView控件加载文件,必须遍历处所有的文件和文件夹. 深搜算法用到了递归. using System; using System.Collections.Generic; using Sy ...
- javaWeb之maven多数据库环境的配置信息
在使用maven构建的web项目里,不管采用的是什么orm框架,数据库写死了必然不是最灵活的方式.所以通过maven 的buid方式可以动态的分配数据库信息 比如在jdbc.properties中,可 ...
- Robot Framework自动化测试(六)--- robotremoteserver使用
robotremoteserver 是什么? Python Remote Server for Robot Framework 下载地址:https://pypi.python.org/pypi/ro ...
- PHP函数处理函数实例详解
1. call_user_func和call_user_func_array: 以上两个函数以不同的参数形式调用回调函数.见如下示例: <?php class AnotherTestClass ...
- webpack打包压缩工具的使用方法
具体使用方法参考来源http://www.cnblogs.com/Leo_wl/p/4793722.html 必须注意的地方: 一.webpack在nodejs环境下运行 二,每个目录下都必须有一个w ...
- java类加载器-系统类加载器
系统类加载器 系统类加载器可能都耳详能熟,但是为了完整点,还是先简单的说说系统的类加载器吧. public class Test { public static void main(String[] ...
- Elasticsearch 管理文档
ES支持近实时的索引.更新.查询.删除文档,近实时就意味着刚刚索引的数据需要1秒钟后才能搜索到,这也是与传统的SQL数据库不同的地方. 更多的ES文档资料参考:Elasticsearch官方文档翻译 ...
- java实现可有括号的android计算器
写了一个android版的计算器,可以计算带括号的表达式,不过前提是:正确的表达式才行 小缺陷是没有做表达式括号的控制,现在还没有想到好的控制方式 package javaAdvanced; impo ...
- 【C#】分享一个可灵活设置边框的Panel
---------------------------更新:2014-05-19--------------------------- 优化了一下逻辑,就是既然可以通过设置BorderSide=Non ...