实现一个ajax请求

99 阅读1分钟

const ajax = {
    get (url, fn) {
        // 新建一个 XMLHttpRequest对象
        let xml = new XMLHttpRequest();
        // 初始化请求, 第三个参数表示异步
        xml.open('GET', url, true);
        // readyState 的值改变时会触发 onreadystatechange 事件
        xml.onreadystatechange = function () {
            // readyState表示ajax请求的状态,0对象创建完成 1对象初始化完成 2请求已发送 3服务器返回数据 4数据解析完成
            if (xml.readyState === 4) {
                fn(xml.responseText);
            }
        };
        // 发送请求
        xml.send();
    },
    post (url, fn) {
        let xml = new XMLHttpRequest();
        xml.open('POST', url, true);
        // 设置请求头, 指定请求的type为 x-www-form-urlencoded格式
        xml.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xml.onreadystatechange = function () {
            if (xml.readyState === 4) {
                fn(xml.responseText);
            }
        };
        xml.send();
    }
};
// function a (res) {
//     console.log(res);
// }
// request.get('https://www.baidu.com', a);

上述关于ajax的实现是自己学习的记录,更详细的实现方法大家可以看一下Ajax 知识体系大梳理 - 掘金 (juejin.cn)