Ajax入門（二）Ajax函數封裝

若是看了的我上一篇博客《Ajax入門（一）從0開始到一次成功的GET請求》的話，確定知道咱們已經完成了一個簡單的get請求函數了。以下：html

/**
 * 一個簡單的get請求
 * @param {String} url 請求地址,文件名
 * @param {Function} fnSucc 請求成功時執行的函數
 * @param {Function} fnFaild 請求失敗執行的函數
 */
function AJAX(url, fnSucc, fnFaild) {
 //1.建立ajax對象
 var oAjax = null;
 /**
 * 此處必須須要使用window.的方式,表示爲window對象的一個屬性.不存在時值爲undefined.
 * 進入else若直接使用XMLHttpRequest在不支持的狀況下會報錯
 **/
 if (window.XMLHttpRequest) {
 //IE6以上
 oAjax = new XMLHttpRequest();
 } else {
 oAjax = new ActiveXObject("Microsoft.XMLHTTP");
 }
 //2.鏈接服務器
 //open(方法,url,是否異步)
 oAjax.open("GET", url, true);

 //3.發送請求
 oAjax.send();

 //4.接收返回
 //OnRedayStateChange事件
 oAjax.onreadystatechange = function () {
 if (oAjax.readyState === 4) {
 if (oAjax.status === 200) {
 // alert("成功" + oAjax.responseText);
 fnSucc(oAjax.responseText);
 } else {
 // alert("服務器響應失敗!");
 if (fnFaild) {
 fnFaild();
 }
 }
 }
 };
}

爲何要繼續進行Ajax函數封裝？
緣由以下：git

目前方法只能使用get請求，而不能使用post請求，而在用戶註冊時必須使用POST，由於POST，如今不夠完整。
目前請求參數只能直接寫在url裏，不利於動態獲取數據，應該使用參數解析的方式，便於使用。
get請求方式請求緩存問題。
學習封裝方法，

改造目標

1
2
3

function ajax(url, options) {
 // your implement
}

options是一個對象，裏面能夠包括的參數爲：github

type: post或者get，能夠有一個默認值
data: 發送的數據，爲一個鍵值對象或者爲一個用&鏈接的賦值字符串
onsuccess: 成功時的調用函數
onfail: 失敗時的調用函數

改造開始（三步）

（一）原函數的改造

形參中，刪除fnSucc、fnFaild 添加options。使成功與失敗執行的函數變成options對象的 onsuccess、onfail兩個方法對應的值。
主要是在四、接收返回部分進行更改，以下ajax

//4.接收返回
oAjax.onreadystatechange = function () {
 if (oAjax.readyState === 4) {
 if (oAjax.status === 200) {
 //請求成功。形參爲獲取到的字符串形式的響應數據
 options.onsuccess(oAjax.responseText);
 } else {
 //先判斷是否存在請求失敗函數
 //存在時，形參爲XMLHttpRequest對象，便於進行錯誤進行處理
 if (options.onfail) {
 options.onfail(oAjax);
 }
 }
 }
};

（二）請求參數的處理

首先咱們要知道的是在使用請求參數存在時，GET方式的請求參數特別簡單。直接在url後面添加?參數名=參數值&參數名二=參數值二緩存

實現思路：

首先判斷options.data是否存在，不存在時使用"?timestamp= + new Date().getTime();連接在url後，以清除緩存。
- 這裏只是我使用的方法，這裏的timestamp能夠隨意更改
- new Date().getTime();也能夠用Math.random();主要是保持每次請求的url都不同。
- 還有許多別的方法參考Ajax緩存問題怎麼解決？。有興趣的本身再多google一下吧。
存在options.data時，應該限制請求data格式便於處理，設定爲JSON（固然不必像JSON那麼嚴格，可是應該保持鍵值對的格式）。
使用for in 遍歷data，使用=來鏈接鍵與值，使用&來鏈接多個請求參數
只須要對原函數中的2.鏈接服務器進行更改

實現以下：

原：安全

1
2
3

//2.鏈接服務器
//open(方法,url,是否異步)
oAjax.open("GET", url, true);

現：服務器

//open(方法,url,是否異步)
var param = "";//請求參數。
//判斷data存在時緩存它，不存在時，設爲0
var data = options.data ? options.data : 0;
if(typeof(data)==="object"){//只有data爲對象使才執行
 for (var key in data){//請求參數拼接
 if (data.hasOwnProperty(key)) {
 param += key+"="+data[key]+"&";
 }
 }
 param.replace(/&$/,"");//去除結尾的&。
}else{
 param= "timestamp=" + new Date().getTime();
}
//2.鏈接服務器
oAjax.open("GET", url+"?"+param, true);

（三）請求類型選擇

使用post發送數據，模擬form提交。在url看不到請求參數，更加安全。app

實現思路：

判斷是否type是否存在，存在時轉爲大寫，默認爲GET請求。
判斷請求的類型，GET 或 POST 。
在使用post請求提交數據時，請求參數不跟在url後面。
使用post請求數據必須添加在open()與send()直接添加頭信息。dom
- xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
使用post請求數據，對2.鏈接服務器、3.發送請求部分進行處理異步

實現以下：

原：

1 2	//2.鏈接服務器 oAjax.open("GET", url+"?"+param, true);

現：

//3.發送請求
var type = options.type ? options.type.toUpperCase() : "GET" ;
if(type ==="GET"){
 oAjax.open("GET", url+"?"+param, true);
 oAjax.send();
}else{
 oAjax.open("POST", url, true);
 oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 oAjax.send(param);
}

最終完成

結合以前寫的，集合起來。

/**
 * AJAX函數封裝
 * @param {string} url 請求地址（必須）
 * @param {object} options 發送請求的選項參數
 * @config {string} [options.type] 請求發送的類型。默認爲GET。
 * @config {Object} [options.data] 須要發送的數據。
 * @config {Function} [options.onsuccess] 請求成功時觸發，function(oAjax.responseText, oAjax)。（必須）
 * @config {Function} [options.onfail] 請求失敗時觸發，function(oAjax)。(oAJax爲XMLHttpRequest對象)
 *
 *@returns {XMLHttpRequest} 發送請求的XMLHttpRequest對象
 */
function AJAX(url, options) {
 //1.建立ajax對象
 var oAjax = null;
 /**
 * 此處必須須要使用window.的方式,表示爲window對象的一個屬性.不存在時值爲undefined,進入else
 * 若直接使用XMLHttpRequest,在不支持的狀況下會報錯
 **/
 if (window.XMLHttpRequest) {
 //IE6以上
 oAjax = new XMLHttpRequest();
 } else {
 oAjax = new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 //2.鏈接服務器
 //open(方法,url,是否異步)
 var param = ""; //請求參數。
 //只有data存在，且爲對象使才執行
 var data = options.data ? options.data : -1; //緩存data
 if (typeof (data) === "object") {
 for (var key in data) { //請求參數拼接
 if (data.hasOwnProperty(key)) {
 param += key + "=" + data[key] + "&";
 }
 }
 param.replace(/&$/, "");
 } else {
 param = "timestamp=" + new Date().getTime();
 }

 //3.發送請求
 var type = options.type ? options.type.toUpperCase() : "GET";
 if (type === "GET") {
 oAjax.open("GET", url + "?" + param, true);
 oAjax.send();
 } else {
 oAjax.open("POST", url, true);
 oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 oAjax.send(param);
 }

 //4.接收返回
 //OnRedayStateChange事件
 oAjax.onreadystatechange = function () {
 if (oAjax.readyState === 4) {
 if (oAjax.status === 200) {
 //請求成功。形參爲獲取到的字符串形式的響應數據
 options.onsuccess(oAjax.responseText, oAjax);
 } else {
 //先判斷是否存在請求失敗函數
 //存在時，形參爲XMLHttpRequest對象，便於進行錯誤進行處理
 if (options.onfail) {
 options.onfail(oAjax);
 }
 }
 }
 };
 return oAjax;//發送請求的XMLHttpRequest對象
}

最終完成就是這樣了。固然還遠遠算不上完美，好比try catch的使用，可是經過這樣的封裝，仍是學到不少知識。