Ajax请求详解

一、原生Ajax

function AJAX_OBJ(url) {
    var xmlHttp = {};
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) {
            var status = xmlHttp.status;
            if (status == 200) {
                var text = xmlHttp.responseText;
                console.log("Ajax send success "+text);
            } else {
                console.log("状态不正确，为: " + status);
            }
        }
    };
    xmlHttp.open("GET", url, true); // async：true 是异步Ajax请求，不容易出现奇怪的bug
    xmlHttp.timeout=500;
    xmlHttp.ontimeout=function(){
        console.log("Ajax request timeout");
    };
    xmlhttp.setRequestHeader("token","header-token-value"); // 可以携带token
    xmlHttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xmlHttp.send(null);
}

二、JQuery Ajax请求

$.post() 和 $.get() 默认是 异步请求

//不是太好用·
function AJAX_OBJ(url, obj, callback) {
  //$.ajaxSettings.async = false;  //Ajax同步请求设置
  $.post(url, obj, { headers: { Authorization: `Bearer ${Base.token}` } }).then((res) => {
    callback(res.data);
  }).catch((error) => {
    if (error.response.status != '504') {
      callback({ message: `请求接口报错！错误码：${error.response.status}` });
    } else {
      callback({ message: '请求超时，请重试。' });
    }
  });
}
// 好用的
function AJAX_OBJ(url, obj, callback) {
  $.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(obj),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    beforeSend: function (xhr) {
        // //发送ajax请求之前向http的head里面加入验证信息
        xhr.setRequestHeader("Authorization", token); // 请求发起前在头部附加token
    },
    success: function (res, status) {
        callback(res.data);
    },
    //error: function (XMLHttpRequest, textStatus, errorThrown) {
    // alert(XMLHttpRequest.status);
    // alert(XMLHttpRequest.readyState);
    // alert(textStatus);
    //},
    complete: function () {
    }
});
}

三、XMLHTTP 的 readyState 值含义：

• 0－未初始化，即尚未调用 open。
• 1－初始化，即尚未调用 send。
• 2－发送数据，即已经调用 send。
• 3－数据传送中。
• 4－完成。

四、响应错误代码

状态码	响应类别	原因
1xx	信息性状态码(Informational)	服务器正在处理请求
2xx	成功状态码(Success)	请求已正常处理完毕
3xx	重定向状态码(Redirection)	需要进行额外操作以完成请求
4xx	客户端错误状态码(Client Error)	客户端原因导致服务器无法处理请求
5xx	服务端状态码(Server Error)	服务器原因导致处理请求出错