浅谈 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");
              }
          }
          ...
  

  ​

  ​

​