ajax与302响应代码测试

在ajax请求中,如果服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们来一起看看实际情况。
使用jquery的$.ajax()发起ajax请求的javascript代码如下:


代码如下:

$.ajax({
    url: '/oauth/respond',
    type: 'post',
    data: data,
    complete: function(jqXHR){
        console.log(jqXHR.status);
    },
    error: function (xhr) {
        console.log(xhr.status);
    }
});

当服务器端返回302 Found的响应时,浏览器中的运行结果如下:






ajax与302响应代码测试
 

在ajax的complete()与error()回调函数中得到的状态码都是404,而不是302。

这是为什么呢?

在stackoverflow上找到了


代码如下:

You can't handle redirects with XHR callbacks because the browser takes care of them automatically. You will only get back what at the redirected location.

原来,当服务器将302响应发给浏览器时,浏览器并不是直接进行ajax回调处理,而是先执行302重定向——从Response Headers中读取Location信息,然后向Location中的Url发出请求,在收到这个请求的响应后才会进行ajax回调处理。大致流程如下:
jax -> browser -> server -> 302 -> browser(redirect) -> server -> browser -> ajax callback
而在我们的测试程序中,由于302返回的重定向URL在服务器上没有相应的处理程序,所以在ajax回调函数中得到的是404状态码;如果存在对应的URL,得到的状态码就是200。
所以,如果你想在ajax请求中根据302响应通过location.href进行重定向是不可行的。

如何解决?

方法一
继续用ajax,修改服务器端代码,将原来的302响应改为json响应,比如下面的ASP.NET MVC示例代码:


代码如下:

return Json(new { status = 302, location = "/oauth/respond" });

ajax代码稍作修改即可:


代码如下:

$.ajax({
    url: '/oauth/respond',
    type: 'post',
    data: data,
    dataType: 'json',
    success: function (data) {
        if (data.status == 302) {
            location.href = data.location;
        }
    }
});

方法二
不用ajax,改用form。


代码如下:

<form method="post" action="/oauth/respond">
</form>

以前没研究透这个问题,踩了几次坑。这次研究了一下,我想以后就会远离这个坑了。

时间: 2013-10-22

AJAX 客户端响应速度提高分析

理论上AJAX技术在很大的程度上可以减少用户操作的等待时间,同时节约网络上的数据流量.而然,实际情况却并不总是这样.用户时常会抱怨用了AJAX的系统响应速度反而降低了. 笔者从事AJAX方面的研发多年,参与开发了目前国内较为成熟的AJAX平台-dorado.根据笔者的经验,导致这种结果的根本原因并不在AJAX.很多时候系统响应速度的降低都是由不够合理的界面设计和不够高效的编程习惯造成的.下面我们就来分析几个AJAX开发过程中需要时刻注意的环节. 合理的使用客户端编程和远程过程调用 客户端的编程主

jQuery的Ajax时无响应数据的解决方法

复制代码 代码如下: $.ajax( { type: "POST", url: "/MemberComment.aspx/GetOrderToBeCommentCount", success: function(result) { //ToDo: } ) 使用时JS也没有报错.这个是我最郁闷的事了.不知道哪错.. 5分钟...10分钟....20分钟..... 从c#代码到浏览器一个个排查问题发现都OK. 最后问题的原因是改为如下就OK,少了2个属性: 复制代码 代

thinkphp中ajax与php响应过程详解

本文实例分析了thinkphp中ajax与php响应过程.分享给大家供大家参考.具体分析如下: 一般将前台页面搜索结果中,不喜欢的内容(链接),删除掉,因为整个网站的编程框架式thinkphp,运用js中的ajax对页面进行响应,调用后台php接口,实现前台和后台数据库的同时更新. 首先我们需要做的就是在前台页面中添加一个文本"删除",可以这么添加: 复制代码 代码如下: <a href="javascript:void(0);" id= "<

Js中使用hasOwnProperty方法检索ajax响应对象的例子

经常使用百度搜索的同学,一定不会忽视输入框的下拉索引,它是如此方便,然而得天独厚的条件使得这项异步技术多少面临些考验,高并发的服务端请求督促着他们的前端攻城师必须尽可能地减少发送ajax的次数.听起来似乎与本文无关,但并不是这样.首先就暂且让我们为百度免费做个广告吧.在百度首页输入"前端"一词,利用chromebug可以很轻松地看到所发送的响应,结果显示如下: 复制代码 代码如下: window.bdsug.sug({q:'前端';,p:false,s:['前端开发','前端工程师',

Ajax获取响应内容长度的方法

本文实例讲述了Ajax获取响应内容长度的方法.分享给大家供大家参考.具体如下: var xhr = $.ajax({ type: "HEAD", url: "path/to/file.ext", success: function(msg){ alert(xhr.getResponseHeader('Content-Length') + ' bytes'); } }); 希望本文所述对大家的Ajax程序设计有所帮助.

提交表单后 PHP获取提交内容的实现方法

问题:网页上提交表单之后,PHP为什么不能获取提交的内容?然而在老版本的PHP上运行却正常. 新版的PHP已经废弃了原来的表单内容处理方式,即不再把提交的表单的内容直接复制到一个同名变量中. 解决办法有四个: 1. 修改php.ini,查找 register_globals,将其值修改为 On.这样就可以像原来一样,例如,提交的表单中包括一个名为"username"的变量,那么在php中就可以直接使用$username来访问该变量.但是,除非你要使用一段旧的代码而考虑到兼容性问题,否则

JavaScript调用ajax获取文本文件内容实现代码

这几年JQuery写多了,传统的的javascript已经很久不写了,不少东西都忘掉了,还有多少人记得javascript中实现ajax操作需要借助XMLHttpRequest对象,其实jquery的ajax本质也是这个,好了,今天就花点时间演示一下如何用传统javascript获取文本内容并展示在页面上,废话不多少,直接上代码,注释写的很详细,大家应该能看懂: 复制代码 代码如下: <script type="text/javascript"> //(A)①获取文本文件方

ajax获取用户所在地天气的方法

使用ajax获取用户所在地的天气,供大家参考,具体内容如下 1.要获取用户归属地的天气,首先得获取用户所在的市区,这里先获取用户的IP,通过IP获取IP的归属地,从而得到用户地址. 2.因为阿里云提供了通过城市名(city)或者城市编号(cityId) 即可获取天气的API,从而获取用户归属地天气 var city1; $.ajax({ //获取客户端 IP 和 归属地 url: "http://chaxun.1616.net/s.php?type=ip&output=json"

Lua中获取utf8字符串长度的方法和自定义函数

复制代码 代码如下: --- 获取utf8编码字符串正确长度的方法 -- @param str -- @return number function utfstrlen(str) local len = #str; local left = len; local cnt = 0; local arr={0,0xc0,0xe0,0xf0,0xf8,0xfc}; while left ~= 0 do local tmp=string.byte(str,-left); local i=#arr; wh

MSSQL数据库获取TEXT字段的内容长度

SQL Server数据库如何获取TEXT字段的内容长度的方法,是通过DATALENGTH函数来实现的,接下来我们就通过DATALENGTH函数的语法及使用实例来了解一下这部分内容. DATALENGTH用来返回任何表达式所占用的字节数. 语法:DATALENGTH ( expression ) 参数:expression,任何类型的表达式. 返回类型:int 注释:DATALENGTH 对 varchar.varbinary.text.image.nvarchar 和 ntext 数据类型特别

javascript中获取元素标签中间的内容的实现方法

使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行

Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1.首先在jsp页面的JavaScript,这段代码是通用的,所以把他放在函数外面,可以供其他的函数共同使用 var xhr=false; //创建XMLHttpRequst对象 if(window.XMLHttpRequest) { xhr=new XMLHttpRequest(); } else

详解vue 中使用 AJAX获取数据的方法

在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

页面向下滚动ajax获取数据的实现方法(兼容手机)

页面向下滚动ajax获取数据的实现方法(兼容手机) $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight >= scrollHeight) { loadPromotions(); } }); var pa