原生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);
    }
}