浅谈 Ajax

最常用的技术,也最容易被忽略的地方。遇到一个问题:当使用 ajax 的时候请求后台,抛出异常。这时候就想到了用捕获状态码。但是 3xx 的状态码是不能捕获... 郁闷三分钟

例子一

后台用 session 保存用户登录的信息,用户每次请求的时候后台都会校验 session 过期没有。如果没有登录或者是 session 过期了后台设置跳转登录页面(后台在 header 中设置 Location )。请求的时候有可能返回字符串 or 跳转新的地址。

// 跳转新的界面,状态码 303可以在浏览器里看到,并且 ajax 会走 error 方法; XMLHttpRequest.status =0
// XMLHttpRequest.readyState = 0  相当于是新发送的请求状态(readyState == 0)
// 只是跳转页面后响应请求时候也是走 error 方法,并且 XMLHttpRequest.status = 200 , //XMLHttpRequest.readyState = 4
 $.ajax({
        cache: false,
        url: url,
        data: params,
        type: method,
        contentType: contentType,
        statusCode: {
            404: function() {
                console.log("404");
            }
        },
        success: function(data, textStatus, xhr) {
            if (success instanceof Function) {
                success(data, textStatus, xhr);
            }
        },
        error: function(xhr, textStatus, error) {
            if (error instanceof Function) {
                error(xhr, textStatus, error);
            } else if (xhr.status == 0 && xhr.readyState == 0) {
                loginInApp();// 判断是 303 请求
            } else if (xhr.status == 200 && xhr.readyState == 4) {
                showUserName(xhr.responseText); // 判读是 303 之后请求成功
            } else {
                defaultAlert("出状况啦,请重新打开浏览器.");
            }
        },
        complete: function(xhr, status) {
            if (complete instanceof Function) {
                complete(xhr, status);
            }
        }
    });

因此,如果是新跳转页面,你需要判断 status 和 readyState 的值是 0 而不是判断 状态码 = 303.

例子二

使用 ajax 出错了,如何捕获异常状态码

  • success,error ,complete 都会返回 XMLHttpRequest获取 status 的值

  • statusCode 可以获取

     $.ajax({
            cache: false,
            url: url,
            data: params,
            type: method,
            contentType: contentType,
            statusCode: {
                404: function() {
                    console.log("404");
                }
            }
            ...
    

你可能感兴趣的:(浅谈 Ajax)