jQuery ajax(複習)—Baidu ajax request分離版_javascript技巧

你沒有看錯標題，本文的確是在講Baidu ajax，不過是很久很久以前的版本了。
由於jQuery ajax模組有800 行，而核心函數jQuery.ajax就有380 行，直接分析這段程式碼很容易被程式碼邏輯弄暈。

所以我們先分析一段簡單的ajax程式碼，來自早期的百度七巧板專案。
透過這個來先複習一次ajax的知識。

baidu.ajax.request分離版

複製程式碼

複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製碼>

/**
* 發送一個ajax請求
* @author: allstar, erik, berg
* @name ajax.request
* @function
* @grammar ajax.request(url[, options] )
* @param {string} url 傳送請求的url
* @param {Object} options 傳送請求的選項參數
* @config {String} [method] 要求傳送的類型。預設為GET
* @config {Boolean} [async] 是否非同步請求。預設為true（非同步）
* @config {String} [data] 需要傳送的資料。如果是GET請求的話，不需要這個屬性
* @config {Object} [headers] 要設定的http request header
* @config {number} [timeout] 超時時間，單位ms
* @ config {String} [username] 使用者名稱
* @config {String} [password] 密碼
* @config {Function} [onsuccess] 請求成功時觸發，function(XMLHttpRequest xhr, string responseText)。
* @config {Function} [onfailure] 請求失敗時觸發，function(XMLHttpRequest xhr)。
* @config {Function} [onbeforerequest] 發送請求之前觸發，function(XMLHttpRequest xhr)。
*
* @meta standard
* @see ajax.get,ajax.post
*
* @returns {XMLHttpRequest} 發送請求的XMLHttpRequest
物件*/
var ajax = {};
ajax.request = function(url,options,type){
// 是否需要非同步
var async = options.async||true,
// 使用者名稱、密碼
username = options.username||"",
password = options.password||"",
/ / 需要傳輸的資料
data = options.data||"",
// GET或POST
method = (options.method||"GET").toUpperCase(),
/ / 請求頭
headers = options.headers||{},
// 事件處理函數表
eventHandler = {},
// 請求資料類型
dataType = type||" string";//xml||string
function stateChangeHandler(){
// 看看是否已經準備好了
if(xhr.readyState == 4){
// 得到xhr當前狀態
var sta = xhr.status;
// 判斷是否成功
if(sta == 200||sta == 304){
// 成功則觸發成功
fire( "success");
}else{
// 失敗則觸發失敗
fire("failure");
}
// 清除綁定
window.setTimeout(function (){
xhr.onreadystatechange= new Function();
if (async){
xhr = null;
}
},0);
}
}
function fire(type){
// 把type變成ontype
type = "on" type;
// 在事件處理器表中找出對應事件的處理函數
var handler = eventHandler[type];
// 如果函數存在，則
if(handler){
// 不成功的話
if(type != "onsuccess"){
handler (xhr);
// 成功了
}else{
// 則根據dataType傳回不同的資料
handler(xhr,dataType!="xml"?xhr.responseText:xhr.responseXML );
}
}
}
// 組裝eventHandler
for(var key in options){
eventHandler[key] = options[key];
}
// 新建一個XMLHttpRequest物件
var xhr = new XMLHttpRequest();
// 如果方法是GET，則把資料組裝到url
if(method == "GET"){
url = (url.indexOf("?")>=0)?"&":"?";
url = data;
// 清空data
data = null;
}
// 如果是非同步
if (async){
// 綁定readystatechange的處理器
xhr.onreadystatechange = stateChangeHandler;
}
// 看看是否需要輸入密碼
if(username){
xhr.open(method,url,async,username,passowrd);
}else{
xhr.open(method,url,async);
}
// 如果是POST
if(method == "POST"){
// 設定一下請求頭
xhr.setRequestHeader("Content-Type", "application/x- www-form-urlencoded");
}

// 把options中的請求頭資訊全部設定進去for(var key in headers){ xhr.setRequestHeader(name,headers[key ]) } // 觸發事件beforerequest fire("beforerequest"); // 傳送資料xhr.send(data); // 如果不是非同步xhr.send(data); // 如果不是非同步if (!async){ // 則是直接執行stateChangeHandler處理資料stateChangeHandler(); } return xhr; }
這段程式碼還是比較容易理解的：
•透過XMLHttpRequest()新建一個XMLHttpRequest物件。
•看看是GET，還是POST方式，如果是GET則組裝url，如果是POST，設定請求頭。
•看看是不是非同步，如果是則註冊監聽函式stateChangeHandler。
•看看需不需要使用者名稱和密碼，執行open。
•發送請求。
•等待監聽函數處理事件。
baidu.ajax.get & baidu.ajax.post

複製程式碼 程式碼如下:

程式碼如下:
/**
* 發送一個post請求
* @name ajax.post
* @function
* @grammar ajax.post(url, data[, onsuccess])
* @param {string} url 發送請求的url位址
* @param {string} data 發送的資料
* @param {Function} [onsuccess] 請求成功之後的回呼函數，function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.get,ajax.request
*
* @returns {XMLHttpRequest} 發送請求的XMLHttpRequest物件
*/
ajax.post = function(url,data,onsuccess){
return ajax.request(url,{"data":data,"onsuccess":onsuccess,method :"POST"});

}

複製碼

代碼如下:



複製碼


代碼如下:

/**
* 發送一個get請求
* @name ajax.get
* @function
* @grammar ajax.get(url[, onsuccess])
* @param {string} url 傳送請求的url位址
* @param {Function} [onsuccess] 請求成功之後的回呼函數，function(XMLHttpRequest xhr, string responseText)
* @meta standard

* @see ajax.post,ajax. request
* * @returns {XMLHttpRequest} 發送請求的XMLHttpRequest物件*/ ajax.get = function(url,data,onsuccess){ return ajax.request(url,{"data":data,"onsuccess": onsuccess}); } baidu.ajax.get和baidu.ajax.post都是透過baidu.ajax.request擴充的。