AJAX请求无法重定向

Posted 2021-04-15 算法技术猿

一、Ajax的原理

  简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面；Ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下；XmlHttpRequest是Ajax的核心和基础，用于在后台与服务器交换数据

XMLHttpRequest 请求：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

XmlHttpRequest获得来自服务器的响：

responseText	获得字符串形式的响应数据。
responseXML‍	获得 XML 形式的响应数据。‍‍

XmlHttpRequest onreadystatechange 事件：每当 readyState 改变时，就会触发 onreadystatechange 事件

onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

二、Ajax作用

        1.AJAX = 异步 JavaScript 和 XML。

        2.AJAX 是一种用于创建快速动态网页的技术。

        3.通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。

        4.可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

三、Ajax无法重定向解决方案（借鉴别人的方案，有更好的方案，欢迎共同交流）

        背景：只有当用户登录后，才能进行诸如增删查改的操作，如果用户没有登录，则需要跳转至登录页面去进行登录。

        问题：当浏览器通过URL的形式访问一个请求时，后台服务器验证是否登录，如果没有登录则设置重定向response.sendRedict("login.html")，直接跳向登录页面；如果是用Ajax进行请求，后台验证登录，并设置重定向response.sendRedict("login.html")后，并不会跳转至登录页面；

        解决方法：

        （1）判断该请求是否是ajax请求：从HttpServletRequest的header中获取“X-Requested-With”的值，如果值等于“XMLHttpRequest”，则说明该请求是ajax请求

"XMLHttpRequest".equals(request.getHeader("X-Requested-With"))

response.setHeader("REDIRECT", "REDIRECT");
response.setHeader("CONTEXTPATH", "http://baidu.com");

        （3）在ajax请求返回结果后，进行重定向处理

$.ajaxSetup( {
    //设置ajax请求结束后的执行动作
    complete : function(XMLHttpRequest, textStatus) {
        // 通过XMLHttpRequest取得响应头，REDIRECT
        var redirect = XMLHttpRequest.getResponseHeader("REDIRECT");//若HEADER中含有REDIRECT说明后端想重定向
        if (redirect == "REDIRECT") {
            var win = window;
            while (win != win.top){
                win = win.top;
            }
            //将后端重定向的地址取出来,使用win.location.href去实现重定向的要求
         win.location.href = XMLHttpRequest.getResponseHeader("CONTEXTPATH");
        }
    }
});

（完）

  欢迎关注