1.问题当cas登录失败之后如果继续执行ajax请求会报 302 重定向错误,但是因为是ajax请求,所以浏览器不会自动跳转,需要做处理。

1.自己重写ajax方法:不推荐

var Ajax = function() {
    var that = this;
    // 创建异步请求对象方法
    that.createXHR = function() {
        if (window.XMLHttpRequest) { // IE7+、Firefox、Opera、Chrome 和Safari
            return new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE6 及以下
            var versions = [ 'MSXML2.XMLHttp', 'Microsoft.XMLHTTP' ];
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    return new ActiveXObject(version[i]);
                    break;
                } catch (e) {
                    // 跳过
                }
            }
        } else {
            throw new Error('浏览器不支持XHR对象!');
        }
    }
    // 初始化数据方法
    that.init = function(obj) {
        // 初始化数据
        var objAdapter = {
            method : 'get',
            data : {},
            success : function() {
            },
            complete : function() {
            },
            error : function(s) {
                alert('status:' + s + 'error!');
            },
            async : true
        }
        // 通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
        that.url = obj.url + '?rand=' + Math.random();
        that.method = obj.method || objAdapter.method;
        that.data = that.params(obj.data) || that.params(objAdapter.data);
        that.async = obj.async || objAdapter.async;
        that.complete = obj.complete || objAdapter.complete;
        that.success = obj.success || objAdapter.success;
        that.error = obj.error || objAdapter.error;
    }
    // get方法
    that.get = function(obj) {
        var xhr = that.createXHR(); // 创建XHR对象
        that.init(obj);
        if (that.async === true) { // true表示异步,false表示同步
            // 使用异步调用的时候,需要触发readystatechange 事件
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) { // 判断对象的状态是否交互完成
                    that.callback(obj, this); // 回调
                }
            };
        }
        // 若是GET请求,则将数据加到url后面
        that.url += that.url.indexOf('?') == -1 ? '?' + that.data : '&'
            + that.data;
        // 在使用XHR对象时,必须先调用open()方法,
        // 它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
        xhr.open(that.method, that.url, that.async);
        xhr.send(null); // get方式则填null
        if (that.async === false) { // 同步
            that.callback(obj, this); // 回调
        }
    }
    // 请求成功后,回调方法
    that.callback = function(obj, xhr) {
        console.log("ajax 请求http code值:" + xhr.status)
        if (xhr.status == 200) { // 判断http的交互是否成功,200表示成功
            obj.success(xhr.responseText); // 回调传递参数
        } else {
          // 如果请求有问题就跳转到首页去登录
            console.log('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
            top.location.href = "/home";
        }
    }
    // 数据转换
    that.params = function(data) {
        var arr = [];
        for ( var i in data) {
            // 特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
            arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
        }
        return arr.join('&');
    }
    return {
        get : that.get,
    }
}

这里项目里面本身都是使用的jquery的ajax请求,如果所有请求都走我自己定义一套ajax去处理302的话,那么改动量比较大,因此选择继续使用 jquery的ajax,那么如何处理这个错误的问题呢?

ajax给我们提供了一个ajaxSetup方法,可以对回调做预处理,我们只需要覆写这个方法就可以处理ajax的返回值的逻辑了,代码如下:

/**
 * 处理 ajax 302 错误问题
 */
$.ajaxSetup({
    //请求方式,默认为get
    type:'post',
    //请求成功后触发
    success: function () {
        console.log('成功')
    },
    //请求失败遇到异常触发
    error: function () {
        console.log('失败')
    },
    //完成请求后触发。即在success或error触发后触发
    complete: function (XMLHttpRequest,status) {
        if(status === 'error'){
        	// 关键在这里,如果返回值为error那么久直接跳转到指定页面
        	// 这里使用top可以解决iframe嵌套之后,父页面不跳转的情况
            top.location.href = "/home";
        }
    },
})

更多推荐

ajax 302 错误无法跳转