用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庫或者每次寫一遍了。如果以后還有更多其他功能要使用，再往里面加。