jQuery ajax(復習)—Baidu ajax request分離版
2024-05-06 14:19:47
供稿：網友
你沒有看錯標題，本文的確是在講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);
}
