一、原生发请求

get请求

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
// 发送请求:
request.open('GET', url);
request.send();
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200 ) {
            // 成功，通过responseText拿到响应的文本:
            console.log(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            console.log(request.status);
        }
    } 
}

post请求

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.open('post', url, true);
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
request.send();
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
         // 判断响应结果:
         if (request.status === 200) {
              // 成功，通过responseText拿到响应的文本:
               console.log(request.responseText);
         } else {
            // 失败，根据响应码判断失败原因:
            console.log(request.status);
          }
     }
}

二、封装ajax

var Ajax = {
    get: function(url,callback){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,callback){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}

三、ES6的 Promise

const getJSON = function (url) {
            const promise = new Promise(function (resolve, reject) {
                const handler = function () {
                    if (this.readyState !== 4) {
                        return;
                    }
                    if (this.status === 200) {
                        resolve(this.response);
                    } else {
                        reject(new Error(this.statusText));
                    }
                };
                const client = new XMLHttpRequest();
                client.open("GET", url);
                client.onreadystatechange = handler;
                client.responseType = "json";
                client.setRequestHeader("Accept", "application/json");
                client.send();

            });
            return promise;
        };
        getJSON("promise.json").then(function (json) {
            console.log('Data: ', json);
        }, function (error) {
            console.error('err', error);
        });

// 插件Promise实例对象
        new Promise((resolve, reject) => {
            if (false) {
                resolve("成功的数据"); // 成功的数据 调用resolve函数，把数据传入
            } else {
                reject("失败的数据"); // 失败的数据 调用reject函数，把输入传入
            }
        })
            .then((data) => {
                console.log(data)
            })
            .catch((err) => {
                console.log(err)
            })