封装一个属于自己的 Ajax 函数

封装属于自己的 Ajax 思路:

            调用函数传参格式是对象 type 请求方式   url 请求的URL地址   data 发送请求时携带的数据   success 请求成功的回调函数

            1. 首先需要把 data 对象转换为查询字符串格式

                1.1 用for in 遍历 先把 属性和属性值用 = 拼接在一起, 然后push 到数组内

                1.2 循环结束后 用 join('&')方法把数组拼接为字符串

                1.3 这样就把data对象转换为了查询字符串格式

            2. 接下来实例化 XMLHttpRequest 

            3. 用 toUpperCase() 方法把传过来的亲求方式转换为大写 然后判断是 哪种请求方式

            4. 分别调用不同方式的 xhr.open()   xhr.send()   xhr.setRequestHeader()

            5. 最后调用xhr.oreadystatechange = function(){

                if(xhr.readstate === 4 && xhr.status === 200){

                    5.1 经过判断后把服务器返回的参数 经过反序列化后 传给 success 函数

                }

            }

  function bo(obj) {
            // 遍历对象里面的 data 属性 转换为查询字符串
            var data = dordata(obj.data)
            // 处理传过来的数据
            function dordata(objdata) {
                var dataStr = [];
                for (var k in objdata) {
                    dataStr.push(`${k}=${objdata[k]}`)
                }
                // 对象转换为数组,再用 array.join('&')方法拼接为字符串
                return dataStr.join('&');
            }
            var xhr = new XMLHttpRequest();
            // 判断是 get or post
            if (obj.type.toUpperCase() === 'GET') {
                xhr.open('GET', `${boj.url}?${data}`)
                xhr.send();
            } else if (obj.type.toUpperCase() === 'POST') {
                xhr.open('POST', obj.url);
                xhr.setRequestHeader('Content-Type', 'x-www-form-urlencoded');
                xhr.send(data);
            }
            // 获取数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    data.success(JSON.parse(xhr.responseText));
                }
            }
        }