本文共 3186 字，大约阅读时间需要 10 分钟。

主要内容

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

转载地址：http://kgkgn.baihongyu.com/