實現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>
複製代碼

結果