原生Ajax封装

封装一个属于自己的ajax - params应该也是对象;
params里最起码要有四个属性: method, url, data, success(是一个函数)
实现类似jQuery中的ajax的封装

 $.ajax({
   method: 'GET/POST',
     url: 'http......./api/getbooks',
     data: {
        id: 12
    },
     success: function (res) {
         // 响应成功的结果
         console.log(res);
    }
 });
function myAjax(params) {
    // 1.创建 xhr 对象
    let xhr = new XMLHttpRequest();
    // 2.绑定事件
    xhr.onreadystatechange = function () {
        // 判断ajax请求结束,数据接收成功,把参数转换为对象类型
        if (xhr.readyState == 4 && xhr.status == 200) {
            let obj = JSON.parse(xhr.response);
            // 成功接收数据后,要调用成功的回调函数
            params.success(obj);
        }
    }

    // 把对象类型的参数,转换为字符串类型的参数
    //   {a:1,b:2,c:3}  =>  a=1&b=2&c=3
    function objectToString(obj) {
        // 遍历对象中的每一个元素,向数组中添加 XXX=XXX 类型的字符串,数组.join("&")连接为一个字符串;
        let arr = []; // 定义到函数的里面,for循环的外面
        for (var k in obj) {
            // 向数组中添加 XXX=XXX 类型的字符串
            //    k 代表属性    obj[k] 代表属性值
            arr.push(`${k}=${obj[k]}`);
        }
        // 循环外面返回数据
        return arr.join('&');
    }
    // 调用函数,把对象类型转换为字符串类型 a=1&b=2&c=3
    let qs = objectToString(params.data);
    console.log(qs);

    // 特殊处理: 根据请求方法的不同,单独处理 open()和send();
    //      toUpperCase(); 能够让字符串中的所有字母都大写
    if (params.method.toUpperCase() == 'GET') {
        // 3.设置请求方式和资源路径 - 
        //      GET注意点:参数与路径之间要有 ?
        xhr.open('GET', params.url + '?' + qs);
        // 4.发送请求
        xhr.send();
    } else if (params.method.toUpperCase() == 'POST') {
        // 3.设置请求方式和资源路径
        xhr.open('POST', params.url);
        //      POST注意点: 设置头信息;
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 4.发送请求
        xhr.send(qs);
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值