手写ajax

<button onclick="ajax()">点击</button>
var httpRequest;
function ajax() {
    // 创建XMLHttpRequest对象
    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        httpRequest = new ActiveXObject();
    }
    // 调用open方法  第一个参数为请求类型 第二个参数为请求地址 第三个参数为是否异步
    httpRequest.open("post", "https://www.easy-mock.com/mock/5d26b4189a15e66a218c3287/reactdemo01/test", true);
    // 报头
    httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // 回调函数
    httpRequest.onreadystatechange = () => {
        // 判断请求状态码是否为4
        if (httpRequest.readyState === 4) {
            // 判断状态码是否为200
            if (httpRequest.status === 200) {
                var text = httpRequest.responseText;
                console.log(text)
            }
        }
    }
    // 发送请求
    httpRequest.send();
};

简单封装ajax

const ajax = function (url) {
    const promise = new Promise(function (resolve, reject) {
        // 创建XMLHttpRequest对象
        const httpRequest = new XMLHttpRequest();
        // 调用open方法  第一个参数为请求类型 第二个参数为请求地址 第三个参数为是否异步
        httpRequest.open("post", url, true);
        // 报头
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 回调函数
        httpRequest.onreadystatechange = () => {
            if (httpRequest.readyState !== 4) {
                return;
            }
            if (httpRequest.status === 200) {
                resolve(httpRequest.response);
            } else {
                reject(httpRequest.statusText);
            }
        }
        // 发送请求
        httpRequest.send();
    })
    return promise;
}
function test() {
    ajax("https://www.easy-mock.com/mock/5d26b4189a15e66a218c3287/reactdemo01/test").then(function (data) {
        console.log(data);
    }).catch(function (error) {
        console.error('出错了', error);
    });
}