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

thinkphp中ajax与php响应过程详解

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

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

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

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

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

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

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

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

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

asp.net Application_AcquireRequestState事件,导致Ajax客户端不能加载

开发环境IIS7下一切正常,但是部署到IIS6服务器以后, 每次刷新页面总出现Ajax客户端不能加载的问题. 复制代码 代码如下: protected void Application_AcquireRequestState(object sender, EventArgs e) { string oldToken = Session["token"].ToString(); } MSDN上说: Application_AcquireRequestState, 当ASP.NET获取当前

浅析巧用Ajax的beforeSend提高用户体验

jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. $.ajax({ beforeSend:function(){ // handle the beforeSend event }, complete:function(){ // handle the complete event } }); 防止重复数据 在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提

Jquery Ajax学习实例7 Ajax所有过程事件分析示例

一.Ajax所有过程事件分析 JQuery在执行Ajax的过程中会触发很多事件.   这些事件可以分为两种事件,一种是局部事件(Local),一种是全局事件(Global).   局部事件:可以通过$.ajax来调用,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false.   全局事件:跟click等事件类似,可以绑定到到每一个DOM元素上.   这些事件的按照事件的触发顺序如下介绍: 局部事件(Local) 全局事件(Global) ajaxStart 全局事件开始新的

thinkphp中AJAX返回ajaxReturn()方法分析

本文分析了thinkphp中AJAX返回ajaxReturn()方法.分享给大家供大家参考,具体如下: 系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端.并且支持JSON.XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJAX_RETURN进行设置,默认配置采用JSON格式返回数据,在选择不同的AJAX类库的时候可以使用不同的方式返回数据. 要使用ThinkPHP的ajaxReturn方法返回数据的话,需要遵守一定的返

AJAX简单异步通信实例分析

本文实例讲述了AJAX简单异步通信的方法.分享给大家供大家参考.具体分析如下: 客户端:向服务器发出一个空请求. 代码如下: <html> <head> <title>XMLHttpRequest</title> <script language="javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHtt

ajax 技术和原理分析

ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信. 4.使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目

完成了AJAX树附原理分析

首先要纠正一个上篇博文<Rails中的Ajax初体验>中的一个错误:上篇博文中,我说"要在Rails中使用Ajax,局部模板是必须的",经实践检验,是错误的,特此更正.实践是检验真理的唯一标准,此言不虚.经过项目中真正通过RJS实现AJAX树,可知,通过使用insert_html.replace_html等辅助方法,可直接操作页面上的元素,无须使用局部模板. 整个的实现过程还是有点曲折: 之前使用的生成树结构的页面,是利用从服务器获取的所有数据,通过一系列javascrip

AJAX客户端说明,XMLHttpRequest对象

在CommunityServer中运用了自己的AJAX机制,没有借助其他的辅助控件.其中客户的XMLHttpRequest对象的封装,就足以让人大饱眼福,在一般的浏览器其都能够运行AJAX.下面我们来学习学习这个咚咚,希望能给更多的人带来帮助. 首先当然是要了解一下浏览器中的XMLHttp对象了: XMLHTTP方法:           备注:客户机可以使用XMLHTTP对象发送任意的HTTP请求,接受HTTP应答,还可以对应答的XML文档进行解析. Open方法:初始化一个Msxml2.XM

在jsp页面中响应速度提高的7种方法分享

方法一:在servlet的init()方法中缓存数据当应用服务器初始化servlet实例之后,为客户端请求提供服务之前,它会调用这个servlet的init()方法.在一个servlet的生命周期中,init()方法只会被调用一次.通过在init()方法中缓存一些静态的数据或完成一些只需要执行一次的.耗时的操作,就可大大地提高系统性能.例如,通过在init()方法中建立一个JDBC连接池是一个最佳例子,假设我们是用jdbc2.0的DataSource接口来取得数据库连接,在通常的情况下,我们需要