封裝ajax和Promise

封裝ajax和Promise 一、ajax

ajax 全稱為“Asynchronous JavaScript And XML”（非同步JavaScript和XML） 是指一種建立互動式網頁應用的開發技術、改善使用者體驗，實現無重新整理效果。

優點：
a、不需要外掛程式支援
b、頁面無重新整理，使用非同步方式與伺服器通訊，具有更加迅速的響應能力，優秀的使用者體驗
c、提高Web程式的效能
d、可以把以前一些伺服器負擔的工作轉到用戶端，利用用戶端閑置的能力來處理，減輕伺服器的負擔，由於ajax的原則是“按需取資料”，所以就可以最大程度的減少冗餘請求，提高效能。

缺點：
a、破壞瀏覽器“前進”、[上一頁] 按鈕的正常功能，可以通過簡單的外掛程式彌補 。
b、對搜尋引擎的支援不足。
c、安全問題：ajax暴露了與伺服器互動的細節。 二、Promise

Pomise是es6中的一個非同步處理對象，從它可以擷取非同步作業的訊息，特點：

1）對象的狀態不受外界影響。Promise對象代表一個非同步作業，有三種狀態：pending(進行中)、fulfilled(已成功)和rejected(已失敗）。

2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected。 三、ajax和Promise封裝

    // (原生js)封裝Promise對象和ajax過程    var jsGetAjaxPromise = function(param){        return new Promise(function(resolve, reject ){            var xhr = new XMLHttpRequest();            xhr.open('get', param.url, true);            xhr.onload = resolve;            xhr.onerror = reject;            xhr.send();        })    }    // 調用樣本    var p1 = jsGetAjaxPromise({  // 啟動第一個任務        url: 'cross-domain1.txt' // 要擷取的檔案地址    });    p1.then(function(response){  // 處理第一個非同步任務的結果(每次調用then都會返回一個新建立的Promise對象)        console.log(response);        return jsGetAjaxPromise({ // 啟動第二個任務             url: 'cross-domain2.txt'        })    }).then(function(response2){  // 處理第二個任務的結果        console.log(response2);        return jsGetAjaxPromise({ // 啟動第三個任務              url: 'cross-domain3.txt'        })    }).then(function(response3){  // 處理第二個任務的結果        console.log(response3);    }).catch(function(err){        console.log(err);    });

改寫成jquery實現

    // (jquery)封裝Promise對象和ajax過程    var jqGetAjaxPromise = function(param){        return new Promise(function(resolve, reject){            $.ajax({                url: param.url,                type: 'get',                data: param.data || '',                success: function(data){                    resolve(data);                },                error: function(error){                    reject(error)                }            });        });    };    // 調用樣本    var p2 = jqGetAjaxPromise({            url: 'cross-domain1.txt'    });    p2.then(function(data){              console.log(data);        return jqGetAjaxPromise({              url:'cross-domain2.txt'        });    }).then(function(data2){           console.log(data2);    }).catch(function(err){        console.log(err);    });

PS： 由於涉及ajax，所以本文中所有的代碼都在wamp伺服器上啟動並執行， cross-domain.txt檔案是自訂的檔案。