jQuery ajax(復(fù)習(xí))—Baidu ajax request分離版
更新時間:2013年01月24日 09:55:46 作者:
你沒有看錯標(biāo)題,本文的確是在講Baidu ajax,不過是很久很久以前的版本了,我們先分析一段簡單的ajax代碼,來自早期的百度七巧板項(xiàng)目通過這個來先復(fù)習(xí)一遍ajax的知識
你沒有看錯標(biāo)題,本文的確是在講Baidu ajax,不過是很久很久以前的版本了。
由于jQuery ajax模塊有800+行,而核心函數(shù)jQuery.ajax就有380+行,直接分析這段代碼很容易被代碼邏輯弄暈。
所以我們先分析一段簡單的ajax代碼,來自早期的百度七巧板項(xiàng)目。
通過這個來先復(fù)習(xí)一遍ajax的知識。
baidu.ajax.request分離版
/**
* 發(fā)送一個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請求的話,不需要這個屬性
* @config {Object} [headers] 要設(shè)置的http request header
* @config {number} [timeout] 超時時間,單位ms
* @config {String} [username] 用戶名
* @config {String} [password] 密碼
* @config {Function} [onsuccess] 請求成功時觸發(fā),function(XMLHttpRequest xhr, string responseText)。
* @config {Function} [onfailure] 請求失敗時觸發(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];
}
// 新建一個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()新建一個XMLHttpRequest對象。
•看看是GET,還是POST方式,如果是GET則組裝url,如果是POST,設(shè)置一下請求頭。
•看看是不是異步,如果是則注冊監(jiān)聽函數(shù)stateChangeHandler。
•看看需不需要用戶名和密碼,執(zhí)行open。
•發(fā)送請求。
•等待監(jiān)聽函數(shù)處理事件。
baidu.ajax.get & baidu.ajax.post
/**
* 發(fā)送一個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ā)送一個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ò)展的。
由于jQuery ajax模塊有800+行,而核心函數(shù)jQuery.ajax就有380+行,直接分析這段代碼很容易被代碼邏輯弄暈。
所以我們先分析一段簡單的ajax代碼,來自早期的百度七巧板項(xiàng)目。
通過這個來先復(fù)習(xí)一遍ajax的知識。
baidu.ajax.request分離版
復(fù)制代碼 代碼如下:
/**
* 發(fā)送一個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請求的話,不需要這個屬性
* @config {Object} [headers] 要設(shè)置的http request header
* @config {number} [timeout] 超時時間,單位ms
* @config {String} [username] 用戶名
* @config {String} [password] 密碼
* @config {Function} [onsuccess] 請求成功時觸發(fā),function(XMLHttpRequest xhr, string responseText)。
* @config {Function} [onfailure] 請求失敗時觸發(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];
}
// 新建一個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()新建一個XMLHttpRequest對象。
•看看是GET,還是POST方式,如果是GET則組裝url,如果是POST,設(shè)置一下請求頭。
•看看是不是異步,如果是則注冊監(jiān)聽函數(shù)stateChangeHandler。
•看看需不需要用戶名和密碼,執(zhí)行open。
•發(fā)送請求。
•等待監(jiān)聽函數(shù)處理事件。
baidu.ajax.get & baidu.ajax.post
復(fù)制代碼 代碼如下:
/**
* 發(fā)送一個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ù)制代碼 代碼如下:
/**
* 發(fā)送一個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ò)展的。
您可能感興趣的文章:
- Request.UrlReferrer中文亂碼解決方法
- 如何用ajax來創(chuàng)建一個XMLHttpRequest對象
- c# HttpWebRequest通過代理服務(wù)器抓取網(wǎng)頁內(nèi)容應(yīng)用介紹
- Javascript Request獲取請求參數(shù)如何實(shí)現(xiàn)
- HttpRequest的QueryString屬性 的一點(diǎn)認(rèn)識
- Ajax通訊原理XMLHttpRequest
- jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對象的responseXML
- JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼
- javascript一個無懈可擊的實(shí)例化XMLHttpRequest的方法
- javascript對XMLHttpRequest異步請求的面向?qū)ο蠓庋b
相關(guān)文章
javascript中解析四則運(yùn)算表達(dá)式的算法和示例
這篇文章主要介紹了javascript中解析四則運(yùn)算表達(dá)式的算法和示例,本文介紹了中綴表示法、逆波蘭表示法這2種算法,并分別給出了代碼實(shí)例,需要的朋友可以參考下2014-08-08javascript一個無懈可擊的實(shí)例化XMLHttpRequest的方法
由于IE新舊版本以及與其他瀏覽器在ajax技術(shù)上的不同,往往需要對不同的瀏覽器做不同的處理,除了笨拙的瀏覽器嗅探技術(shù),大約也就是對象檢測技術(shù)可用了。2010-10-10HTML+CSS+JavaScript實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07Javascript數(shù)組及類數(shù)組相關(guān)原理詳解
這篇文章主要介紹了Javascript數(shù)組及類數(shù)組相關(guān)原理詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10Bootstrap導(dǎo)航菜單點(diǎn)擊后無法自動添加active的處理方法
今天小編就為大家分享一篇Bootstrap導(dǎo)航菜單點(diǎn)擊后無法自動添加active的處理方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08