JavaScript：使用原生JS封装一个ajax兼容性方法

版权声明：本人原创文章，转载请注明出处 https://blog.csdn.net/qq_28766729/article/details/85004869

ajax请求过程：

1. 需要有个设备的支持，就是浏览器，没浏览器ajax是发不出去的。
2. 需要有一个ajax对象。
3. 规定请求的方式，获取谁家的数据。
   ajax.open(method，url，true)初始化请求方式、请求数据地址、选择异步（true）还是同步（false）方式。
4. ajaxSend()方法，将请求发送到服务器，为了拿数据。
   语法: $(document).ajaxSend(function(event,xhr,options))
   event： 包含 event对象
   xhr： 包含 XMLHttpRequest 对象
   options： 包含 AJAX 请求中使用的选项
5. 监听数据的状态，是否已经回到浏览器。 可用onreadystatechange()方法，监听readystate的变化，从0开始往4变化，0是最开始的数值，4代表数据响应成功，已获取回来，可以使用。
6. 拿到数据后进行判断，看是不是想要的数据，或是错误的信息， 因为任何一个请求都会对应一个响应，即使是错误的响应。

状态码：

200 成功处理了请求，一般情况下都是返回此状态码；
403 服务器拒绝请求。
404 为服务器无法正常提供信息，或是服务器无法回应，且不知道原因所返回的页面。
503 （服务不可用）状态码：

按照上面所述的ajax的六个请求步骤来进行方法编写,IE没有XMLHttpRequest方法,所以要做兼容。

function ajaxFunc(method,url,data,callback,flag) {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        //兼容IE浏览器
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    //防止请求方式输入小写
    method = method.toUpperCase();
    if (method == "GET") {
        //初始化
        xhr.open(method, url + "?" + data, flag);
        //发送请求
        xhr.send();
    } else if (method == "POST") {
        xhr.open(method, url, flag);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    //判断数据是否回来,请求是否成功
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200) {
                var backData = xhr.responseText;
                callback(backData);
            }
        }
    }
}