ajax(下)

主要内容

ajax的封装
内附详细注释

    function $ajax(obj) {

        function objtostring(obj) {//判断传入的值是否为对象
            if (Object.prototype.toString.call(obj).slice(8, -1) === "Object") {
                let arr = []
                for (var atter in obj) {
                    arr.push(atter + "=" + obj[atter]);
                }
                return arr.join("&");
            } else {
                throw new Error("你输入的不是一个纯碎的对象");
            }
        }

        
        let ajax = new XMLHttpRequest();
        //1.默认get请求，此参数可以省略。
        obj.type = obj.type || "get";

        //2.接口地址不能为空
        if (!obj.url) {
            throw new Error("接口地址有误!");
        }

        //3.发送数据get和post的兼容问题
        if (obj.date) {//判断数据是否存在，同时判断数据是否是对象
            if (Object.prototype.toString.call(obj.date).slice(8, -1)) {
                obj.date = objtostring(obj.date);
            } else {
                obj.date = obj.date;
            }
        }

        //4.数据存在,get传输数据方式?

        if (obj.date && obj.type === "get") {
            obj.url += "?" + obj.date;
        }

        //6.是否异步,如果同步的话，无需进行onreadystatechange事件监听。
        if (obj.async === "false" || obj.async === false) {
            obj.async = false;
        } else {
            obj.async = true;
        }

        ajax.open(obj.type, obj.url, obj.async);

        //5.数据存在，post方式传输数据?
        if (obj.date && obj.type === "post") {
            ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            ajax.send(obj.date);
        } else {

            ajax.send();//发送解析

        }
        //7.同步和异步的判断方法
        //8.获取接口数据
        //想办法把获取接口数据传出去，不能将处理数据的过程放到函数内部
        //在函数调用中操作数据，必须在函数调用中获取数据
        if (obj.async) {//异步
            ajax.onreadystatechange = function () {
                if (ajax.readyState === 4) {
                    if (ajax.status === 200) {
                        obj.success && typeof obj.success === "function" && obj.success(ajax.responseText);
                        //console.log(ajax.responseText);
                    } else {//接口错误！
                        obj.error && typeof obj.error === "function" && obj.error("异步——接口地址有误" + ajax.status);
                    }
                }
            }
        } else {//同步
            if (ajax.status === 200) {
                //console.log(ajax.responseText);
                obj.success && typeof obj.success === "function" && obj.success(ajax.responseText);
            } else {//接口错误！
                //throw new Error("接口地址有误" + ajax.status);
                obj.error && typeof obj.error === "function" && obj.error("同步——接口地址有误" + ajax.status);
            }
        }
    }



    //对象做参数：
    //对象是无序的，顺序可变的。
    //如果直接在函数单个设置参数：顺序不能乱。
    $ajax({
        type: "get",//请求方式(类型)
        url: "http://localhost/NZ-1903/0303/13conn.php1",
        date: {//传输的数据,默认没有数据
            a: 4,
            b: 5,
            c: 6
        },
        async: true,//是否异步 ， 默认异步！ 值不是false就是true
        success: function (str) {//请求成功的回调函数, str:数据，随意对数据进行操作。
            console.log(str);
        },
        error: function (err) {//请求失败的回调函数 err：失败的错误信息
            throw new Error(err);
        }

    })