实现ajax面向对象封装

面向对象能使代码更整洁，提高代码复用性和可维护性。

在JavaScript中未引入class时大多使用构造函数作为容器进行封装。首先创建一个构造函数（其实和普通函数相同只是通过new调用）

function FakeAjax() {
    }

在构造函数的原型对象身上绑定属性和方法，便于继承。

思想：

• 首先定义一个send方法用来接收参数
• 判断数据请求的类型是post还是get
• get：遍历数据先转为数组再利用join拼接字符串
• 再通过字符串拼接更新请求地址
• post：直接把数据以键值对形式保存到FormData对象中

具体实现：

   FakeAjax.prototype = {
        /**
         * 首先定义一个send方法用来接收参数
         *  三元表达式判断数据请求的类型是post还是get
         * get：遍历数据先转为数组再利用join化为字符串
         * 再通过字符串拼接更新请求地址
         * post：直接把数据以键值对形式保存到formdata对象中
         */
        send: function (parameter) {
            var formData = new FormData();
            parameter.type.toLowerCase() == 'post' ? (function () {
                for (var pro in parameter.data) {
                    formData.append(pro, parameter.data[pro]);
                }
            })() : (function () {
                var arr = [];
                for (let pro in parameter.data) {
                    var str = pro + '=' + parameter.data[pro];
                    arr.push(str);
                }
                var pars = arr.join('&');
                parameter.url += parameter.url.indexOf('?') == -1 ? '?' + pars
                    : '&' + pars;
                /**打印出地址方便查看地址拼接情况 */
                console.log('预拼接参数' + pars);
                console.log('参数拼接完成' + parameter.url);
            })();
    /**
     * 创建XMLHttpRequest对象
     * 发送请求和监听对应状态码
     * 接收到数据并通过JSON.parse()解析成json对象（键值对形式）
     * json.stringify()是将json对象转化为字符串
     */
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                parameter.success(JSON.parse(xhr.responseText));
            }
        }
        // xhr.readyState==4?xhr.status==200?send.success(JSON.parse(xhr.responseText));
    };
    xhr.open(parameter.type, parameter.url, true);
    parameter.type.toLowerCase == 'get' ? xhr.send(null)
        : (xhr.send(formData));
    console.log(formData)
        }
    }

然后从网上找到一个免费诗词接口进行代码测试

<script>
    var hxp_ajax=new FakeAjax();
    hxp_ajax.send({
        type:'post',
        url:'http://api.tianapi.com/txapi/poetries/?key=0c7ebab2461621aeb2c34b3a82e4c702',
        data:{
            word:'杜甫',
            num:5
        },
        success:function(res){
            if(res){
                console.log('测试成功');
                console.log(res);
            }
        }
    })
</script>

结果