实现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 canshu = arr.join('&');
                parameter.url += parameter.url.indexOf('?') == -1 ? '?' + canshu
                    : '&' + canshu;
                /**打印出地址方便查看地址拼接状况 */
                console.log('预拼接参数' + canshu);
                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>
复制代码

结果