ajax请求、response失效

最新推荐文章于 2024-08-09 17:26:52 发布

春天的早晨

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量4.3k

点赞数

分类专栏： HTTP

HTTP 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

问题

今天在写项目的时候，想加一个切换用户，需要清除session并且跳转到登录页面，发起一个ajax请求后，执行完发现无法跳转。

原因

Ajax只是利用脚本访问对应url获取数据而已，不能做除了获取返回数据以外的其它动作了。所以浏览器端是不会发起重定向的。
1）正常的http url请求，只有浏览器和服务器两个参与者。浏览器端发起一个http请求，服务器端处理后发起一个重定向，浏览器端从response中获取到重定向地址，发起另一个http url请求。也就是说，浏览器会按照response中的内容进行响应（如重定向），这是浏览器的功能决定的就得响应。
2）Ajax请求，参与者就有三个即ajax、客户端、服务器，ajax处于客户端和服务器两者之间。过程是客户端发起一个ajax请求，服务器端处理后，如果发起一个重定向，然后ajax会怎么办呢？它只会获取刚才请求返回的数据，其他的任何动作一概不去做，ajax是这么做的（ajax功能就是这么设定的，ajax框架源代码也是这么写的）。
也就是说，引入了ajax之后，ajax就插在浏览器和服务器之间了，服务器给浏览器的response被ajax拦截了，但是ajax本身却什么都不做，也不转达。

解决方法

1）后台做完清除session后，传一个值给前台判断，在前台进行页面的跳转。
后台：

  @RequestMapping("/clearSession.html")
    public void clearSession(HttpServletRequest request,HttpServletResponse response)throws Exception{
        HttpSession session = request.getSession();
        BaseUser user = (BaseUser) request.getSession().getAttribute(Constants.USER_INFO);
        if(user!=null){//防止执行清除session的方法时，session已经过期。
            session.invalidate();
        }

前台

   success: function(data){
                        window.location.replace("/Nidson-ssm/login.jsp");
                    },
                    error:function(data) {
                        alert("服务器出错");
                        window.location.replace("/Nidson-ssm/login.jsp");
                    },

2）后台拦截ajax请求。

  //对于请求是ajax请求重定向问题的处理方法
        public void reDirect(HttpServletRequest request, HttpServletResponse response) throws IOException{
            //获取当前请求的路径
            String basePath = request.getScheme() + "://" + request.getServerName() + ":"  + request.getServerPort()+request.getContextPath();
            //如果request.getHeader("X-Requested-With") 返回的是"XMLHttpRequest"说明就是ajax请求，需要特殊处理
            if("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))){
                //告诉ajax我是重定向
                response.setHeader("REDIRECT", "REDIRECT");
                //告诉ajax我重定向的路径
                response.setHeader("CONTENTPATH", basePath+"/login.html");
                response.setStatus(HttpServletResponse.SC_FORBIDDEN);
            }else{
                response.sendRedirect(basePath + "/login.html");
            }
        }


   //跳转登录url
    if(isAjaxRequest(request)){
            response.setStatus(HttpStatus.SC_UNAUTHORIZED);
            response.setHeader("jumperUrl",loginUrl);
        }else {
        //浏览器请求
            response.sendRedirect(loginUrl);
        }

前台：

  var jqxhr;
    //设置ajax请求完成后运行的函数,
    $.ajaxSetup({ 
        complete:function(){
            if("REDIRECT" == jqxhr.getResponseHeader("REDIRECT")){ //若HEADER中含有REDIRECT说明后端想重定向，
                var win = window;
                while(win != win.top){
                    win = win.top;
                }
                win.location.href = jqxhr.getResponseHeader("CONTENTPATH");//将后端重定向的地址取出来,使用win.location.href去实现重定向的要求
            }
        }
    });

Ajax的使用

创建XMLHttpRequest对象,也就是创建一个异步调用对象.
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
设置响应HTTP请求状态变化的函数.
发送HTTP请求.
获取异步调用返回的数据.
使用JavaScript和DOM实现局部刷新.

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

     if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }