[实验] Ajax请求服务端，服务端301跳转失败问题

一、背景

         在日常开发中，之前遇到过这样的问题，我通过JQuery的Ajax向服务器发起请求，希望服务器处理完请求后直接通过 Response.Redirect("")这种方式跳转，而不是服务器处理结果后返回给客户端，客户端判断结果再做跳转，但是没能成功，这已经是2年之前的事情了应该，昨天刚好一同学问我，我又想起了这问题，那就把这问题往深挖一挖，这里多谢@正哥 帮忙，找到一篇非常有用的资料http://stackoverflow.com/questions/2800982/ajax-redirect-dilemma-how-to-get-redirect-url-or-how-to-set-properties-for-redi/5115777#5115777。

 

二、实验

    客户端

function JQueryAjax() {
$.ajax({
    type: 'POST',
    url: "/Default/TestAjax.html",
    async: false,
    success: function (data) {
        window.serverTime = data;
    },
    error: function (data) {
        alert(aa);
    }
});

 

function JQueryAjax() { $.ajax({ type: 'POST', url: "/Default/TestAjax.html", async: false, success: function (data) { window.serverTime = data; }, error: function (data) { alert(aa); } });   服务端

public JsonResult TestAjax()
{
    Response.Redirect("https://baidu.com"); Response.End();
    return Json("success");
}

 

 实验结果

        请求报错，没有成功跳转

 

我们都知道 JQuery 的Ajax是对 XMLHttpRequest 对象的封装，那如果我们直接用原生的XMLHttpRequest 对象发起请求呢？

     前端改为如下

function RawAjax() {
    var xhr = new XMLHttpRequest();
    try {
        xhr.open('POST', '/Default/TestAjax.html');
        xhr.send();
        xhr.onreadystatechange = function () {
            var locationUrl = xhr.getAllResponseHeaders("Location");
        }
    } catch (e) {
        alert(e);
    }
}

发起请求后还是不行，但是比之前有新的发现

 

看到了吧，出现了要跳转的链接了，并且状态码是302

三、总结

    Ajax发起的请求到服务端，如果服务端有新的链接跳转，那么首先对新链接做302跳转，紧接着处理跳转后的页面，跳转的页面访问成功返回200，返回的是一个 xhr对象，浏览器并不能识别，所以没有发生真正的跳转。