你沒有看錯(cuò)標(biāo)題，本文的確是在講Baidu ajax，不過是很久很久以前的版本了。
由于jQuery ajax模塊有800+行，而核心函數(shù)jQuery.ajax就有380+行，直接分析這段代碼很容易被代碼邏輯弄暈。
所以我們先分析一段簡單的ajax代碼，來自早期的百度七巧板項(xiàng)目。
通過這個(gè)來先復(fù)習(xí)一遍ajax的知識。
?
baidu.ajax.request分離版
?
/*
*
* 發(fā)送一個(gè)ajax請求
* @author: allstar, erik, berg
* @name ajax.request
* @function
* @grammar ajax.request(url[, options])
* @param {string} url 發(fā)送請求的url
* @param {Object} options 發(fā)送請求的選項(xiàng)參數(shù)
* @config {String} [method] 請求發(fā)送的類型。默認(rèn)為GET
* @config {Boolean} [async] 是否異步請求。默認(rèn)為true（異步）
* @config {String} [data] 需要發(fā)送的數(shù)據(jù)。如果是GET請求的話，不需要這個(gè)屬性
* @config {Object} [headers] 要設(shè)置的http request header
* @config {number} [timeout] 超時(shí)時(shí)間，單位ms
* @config {String} [username] 用戶名
* @config {String} [password] 密碼
* @config {Function} [onsuccess] 請求成功時(shí)觸發(fā)，function(XMLHttpRequest xhr, string responseText)。
* @config {Function} [onfailure] 請求失敗時(shí)觸發(fā)，function(XMLHttpRequest xhr)。
* @config {Function} [onbeforerequest] 發(fā)送請求之前觸發(fā)，function(XMLHttpRequest xhr)。
*
* @meta standard
* @see ajax.get,ajax.post
*
* @returns {XMLHttpRequest} 發(fā)送請求的XMLHttpRequest對象
*/
var
ajax =
{};
ajax.request
=
function
(url,options,type){
//
是否需要異步
var
async = options.async||
true
,
//
用戶名、密碼
username = options.username||""
,
password
= options.password||""
,
//
需要傳輸?shù)臄?shù)據(jù)
data = options.data||""
,
//
GET還是POST
method = (options.method||"GET"
).toUpperCase(),
//
請求頭
headers = options.headers||
{},
//
事件處理函數(shù)表
eventHandler =
{},
//
請求數(shù)據(jù)類型
dataType = type||"string";
//
xml||string
function
stateChangeHandler(){
//
看看是否已經(jīng)準(zhǔn)備好了
if
(xhr.readyState == 4
){
//
得到xhr當(dāng)前狀態(tài)
var
sta =
xhr.status;
//
判斷是否成功
if
(sta == 200||sta == 304
){
//
成功則觸發(fā)成功
fire("success"
);
}
else
{
//
失敗則觸發(fā)失敗
fire("failure"
);
}
//
清除綁定
window.setTimeout(
function
(){
xhr.onreadystatechange
=
new
Function();
if
(async){
xhr
=
null
;
}
},
0
);
}
}
function
fire(type){
//
把type變成ontype
type = "on"+
type;
//
在事件處理器表中找到對應(yīng)事件的處理函數(shù)
var
handler =
eventHandler[type];
//
如果函數(shù)存在，則
if
(handler){
//
不成功的話
if
(type != "onsuccess"
){
handler(xhr);
//
成功了
}
else
{
//
則根據(jù)dataType返回不同的數(shù)據(jù)
handler(xhr,dataType!="xml"?
xhr.responseText:xhr.responseXML);
}
}
}
//
組裝eventHandler
for
(
var
key
in
options){
eventHandler[key]
=
options[key];
}
//
新建一個(gè)XMLHttpRequest對象
var
xhr =
new
XMLHttpRequest();
//
如果方法是GET，則把數(shù)據(jù)組裝到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"
){
//
設(shè)置一下請求頭
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"
);
}
//
把options中的請求頭信息全部設(shè)置進(jìn)去
for
(
var
key
in
headers){
xhr.setRequestHeader(name,headers[key])
}
//
觸發(fā)事件beforerequest
fire("beforerequest"
);
//
發(fā)送數(shù)據(jù)
xhr.send(data);
//
如果不是異步
if
(!
async){
//
則直接運(yùn)行stateChangeHandler來處理數(shù)據(jù)
stateChangeHandler();
}
return
xhr;
}
?
這段代碼還是比較容易理解的：
- 通過XMLHttpRequest()新建一個(gè)XMLHttpRequest對象。
- 看看是GET，還是POST方式，如果是GET則組裝url，如果是POST，設(shè)置一下請求頭。
- 看看是不是異步，如果是則注冊監(jiān)聽函數(shù)stateChangeHandler。
- 看看需不需要用戶名和密碼，執(zhí)行open。
- 發(fā)送請求。
- 等待監(jiān)聽函數(shù)處理事件。
?
baidu.ajax.get & baidu.ajax.post
/*
*
* 發(fā)送一個(gè)post請求
* @name ajax.post
* @function
* @grammar ajax.post(url, data[, onsuccess])
* @param {string} url 發(fā)送請求的url地址
* @param {string} data 發(fā)送的數(shù)據(jù)
* @param {Function} [onsuccess] 請求成功之后的回調(diào)函數(shù)，function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.get,ajax.request
*
* @returns {XMLHttpRequest} 發(fā)送請求的XMLHttpRequest對象
*/
ajax.post
=
function
(url,data,onsuccess){
return
ajax.request(url,{"data":data,"onsuccess":onsuccess,method:"POST"
});
}
/*
*
* 發(fā)送一個(gè)get請求
* @name ajax.get
* @function
* @grammar ajax.get(url[, onsuccess])
* @param {string} url 發(fā)送請求的url地址
* @param {Function} [onsuccess] 請求成功之后的回調(diào)函數(shù)，function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.post,ajax.request
*
* @returns {XMLHttpRequest} 發(fā)送請求的XMLHttpRequest對象
*/
ajax.get
=
function
(url,data,onsuccess){
return
ajax.request(url,{"data":data,"onsuccess"
:onsuccess});
}
baidu.ajax.get和baidu.ajax.post都是通過baidu.ajax.request擴(kuò)展的。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
