如何本身封裝一個ajax函數

　　用ajax的局部刷新來給網站提高用戶體驗咱們已經用過不少了，ajax已然成爲了前端開發最重要的「工具」之一。

　　可是，我想應該會有很多人在使用ajax的時候都在依賴於jQuery或者prototype或者其餘js庫。但現實是，假設某一天一個項目不能引入任何一個js庫，只能用原生js寫代碼，那你怎麼辦？又或者是一個很是簡單的頁面，可是要用到ajax，難道就爲了下這麼一個ajax請求要引用一個jq這麼大的js庫？我想這是不值得的，因此咱們應該學會用原生的js來寫ajax，而且把它封裝好以便於之後使用。

　　因爲以前使用過jq的ajax並且以爲他使用起來挺舒服的，因此我在封裝ajax的時候一方面捨去了不少不經常使用的參數只留下了最經常使用的幾個功能，另外一方面儘可能保持它原有的使用風格。

　　我一共只留了五個參數，他們分別是發送方式（type）、發請求的url（url）、是否爲異步請求（async）、發送的參數（data）、傳輸成功的回調函數（success），函數代碼以下:

/* 封裝ajax函數
 * @param {string}opt.type http鏈接的方式，包括POST和GET兩種方式，默認使用GET
 * @param {string}opt.url 發送請求的url
 * @param {boolean}opt.async 是否爲異步請求，true爲異步的，false爲同步的
 * @param {object}opt.data 發送的參數，格式爲對象類型
 * @param {function}opt.success ajax發送並接收成功調用的回調函數
 */

function ajax(opt) {
　　opt = opt || {};

　　var type = opt.type || 'GET';
　　type = type.toUpperCase() || 'GET';
　　var url = opt.url || '';
　　var async = opt.async || true;
　　var data = opt.data || null;
　　var success = opt.success || function () {};
　　var xmlHttp = null;
　　if (XMLHttpRequest) {
　　　　xmlHttp = new XMLHttpRequest();
　　}
　　else {
　　　　xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
　　}
　　var params = [];
　　for (var key in data){
　　　　params.push(key + '=' + data[key]);
　　}
　　var dataStr = params.join('&');
　　if (type === 'POST') {
　　　　xmlHttp.open(type, url, async);
　　　　xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
　　　　xmlHttp.send(dataStr);
　　}
　　else {
　　　　xmlHttp.open(type, url + '?' + dataStr, async);
　　　　xmlHttp.send(null);
　　}
　　xmlHttp.onreadystatechange = function () {
　　　　if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
　　　　　　success(xmlHttp.responseText);
　　　　}
　　};
}

　　以對象的形式作函數的參數仍是比較靈活的，不用拘泥於參數個數的問題。但這容易出現一個問題，就是使用參數的時候頗有可能參數沒給卻在函數內部使用了，好比在調用函數時忘了寫success回調函數，而定義的時候卻用到了他，這就會報錯了，由於success是undefined了。因此爲了不這種狀況我以爲最好在封裝函數的時候儘可能給每個參數一個默認值，若是調用的時候未給出某個參數那麼他就使用默認值代替，這樣就不會出現上述狀況了。

　　接下來下面是建立XMLHttpRequest對象，寫了兩種建立方式是爲了兼容IE纔有的寫法，舊版本的IE瀏覽器不支持XMLHttpRequest構造函數，IE有他本身獨特的構造函數來支持ajax那就是ActiveXObject構造函數。

　　建立好了XMLHttpRequest對象，接下來寫的是對發送參數data的轉換，在使用ajax函數的時候data也用json的數據格式會有一種親切感，由於大部分ajax傳輸的時候返回數據都使用json格式，因此發送的時候也使用json格式顯得很友好。這裏須要將{a: b, c: d}的格式轉換爲a=b&c=d的格式。

　　而後是對"POST"和"GET"兩種不一樣的發送方式作處理。GET方法比較簡單，直接把整理好的數據接在open方法的url參數的後面就好了（要記得在url後面加上"?"），send方法也不用帶參數了，由於參數已經在url後面帶着發過去了，因此send方法的參數直接給個null；POST方法這裏有個坑，若是不注意可能會很煩惱爲何會得不到想要的結果，那就是須要設定Content-Type頭信息，模擬HTTP的POST方法發送一個表單，這樣服務器纔會知道如何處理上傳的內容。send方法中參數的提交格式和GET方法中url的寫法同樣，也是a=b&c=d格式。注意open方法必須放在設定頭信息的前面，不然也會報錯。async參數能夠是true也能夠是false，true表明使用異步方式調用，false表明使用同步方式調用，理所固然使用ajax是必定用異步的，這裏只是提供一個選擇，並且他的默認值也是true。

　　最後須要註冊一個onreadystatechange事件，當XMLHttpRequest對象的readyState屬性等於4了（表明收到完整的服務器響應了），同時status屬性等於200（表明服務器響應的狀態值爲OK，狀態正常）就能夠斷定此次ajax從發送過程到響應過程全程傳輸成功了，咱們能夠對返回的數據作一些處理，把要處理的代碼寫在success函數中，ajax成功就會調用之。

// 使用示例
ajax({
    method: 'POST',
    url: 'test.php',
    data: {
        name1: 'value1',
        name2: 'value2'
    },
    success: function (response) {
        // codes here
    }
});

 

　　這個ajax函數很簡單代碼量也不多，已經基本知足個人平常使用需求了，之後使用也不用依賴js庫或者每次寫一遍了。若是之後還有更多其餘功能要使用，再往裏面加。