快捷導(dǎo)航

jQuery的實(shí)現(xiàn)原理的模擬代碼 -5 Ajax

更新時(shí)間：2010年08月07日 15:35:29 作者：

對(duì)于 xhr 對(duì)象來說，我們主要通過異步方式訪問服務(wù)器，在 onreadystatechange 事件中處理服務(wù)器回應(yīng)的內(nèi)容。簡(jiǎn)單的 xhr 使用如下所示。

 
// 創(chuàng)建 XHR 對(duì)象 
var xhr; 
if (window.XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) { 
xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
else { 
throw new Error("Ajax is not supported by this browser"); 
} 
function ready() 
{ 
alert("Start......"); 
// 通過事件來處理異步請(qǐng)求 
xhr.onreadystatechange = function() 
{ 
if( xhr.readyState == 4 ) 
{ 
alert( "Ready."); 
if( xhr.status == 200 ) 
{ 
alert("成功獲得服務(wù)器返回的結(jié)果."); 
// 請(qǐng)求結(jié)束之后，可以獲取服務(wù)器返回的內(nèi)容 
alert( xhr.responseText ); 
// 獲取服務(wù)器返回的 json 對(duì)象 
var alice = eval( "(" + xhr.responseText + ")" ); 
alert( alice.name ); 
} 
} 
}; 
// 設(shè)置請(qǐng)求參數(shù) 
xhr.open("get", "data.json" ); 
xhr.send( null ); 
} 

jQuery 簡(jiǎn)單地包裝了對(duì) xhr 對(duì)象的使用，通過對(duì) jQuery 對(duì)象增加常用的訪問方法，然后，提供給 jQuery 對(duì)象來使用。

復(fù)制代碼代碼如下:

 
// 主要的擴(kuò)展在 jQuery.ajax 中。 
jQuery.extend({ // #6299 
// 請(qǐng)求的默認(rèn)參數(shù) 
ajaxSettings: { 
url: location.href, 
type: "GET", 
contentType: "application/x-www-form-urlencoded", 
data: null, 
xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ? 
function () { 
return new window.XMLHttpRequest(); 
} : 
function () { 
try { 
return new window.ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e) { } 
} 
}, 
// 用來設(shè)置 jQuery.ajaxSettings ，設(shè)置請(qǐng)求的參數(shù) 
ajaxSetup: function (settings) { 
jQuery.extend(jQuery.ajaxSettings, settings); 
}, 
ajax: function (origSettings) { // 實(shí)際的 ajax 函數(shù) 
var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings); 
// 創(chuàng)建 xhr 對(duì)象 
xhr = s.xhr(); 
// 回調(diào)函數(shù) 
var onreadystatechange = xhr.onreadystatechange = function (isTimeout) { 
if (xhr.readyState === 4) { 
if (xhr.status == 200) { 
s.success.call(origSettings, xhr.responseText); 
} 
} 
}; 
// 設(shè)置請(qǐng)求參數(shù) 
xhr.open(s.type, s.url); 
// Send the data 發(fā)出請(qǐng)求 
xhr.send(s.data); 
// return XMLHttpRequest to allow aborting the request etc. 
return xhr; 
}, 
// 使用 get 方式發(fā)出 ajax 請(qǐng)求的方法 
get: function (url, data, callback, type) { 
// shift arguments if data argument was omited 
if (jQuery.isFunction(data)) { 
type = type || callback; 
callback = data; 
data = null; 
} 
return jQuery.ajax({ 
type: "GET", 
url: url, 
data: data, 
success: callback, 
dataType: type 
}); 
} 

}); // #6922 
// 擴(kuò)展 jQuery 對(duì)象，增加 load 方法 
jQuery.fn.extend( 
{ 
load: function (url) { 
var self = this; 
jQuery.get(url, function (data) { 
self.each(function () { 
this.innerHTML = data; 
} 
) 
} 
) 
} 
} 
) 

在頁面中，可以如下使用。

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<input type="button" id="btn" value="Click me" /> 
<div id="msg"> 
</div> 
<script src="jQuery-core.js" type="text/javascript"></script> 
<script src="jQuery-event-2.js" type="text/javascript"></script> 
<script src="jQuery-data.js" type="text/javascript"></script> 
<script src="jQuery-extend.js" type="text/javascript"></script> 
<script src="jQuery-ajax.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$("#btn").click(function () { 
$("#msg").load("hello.txt"); 
}) 

</script> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法
這篇文章主要介紹了jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法,可實(shí)現(xiàn)類似淘寶首頁縱向菜單的顯示效果,涉及jQuery鼠標(biāo)響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
基于twbsPagination.js分頁插件使用心得(分享)
下面小編就為大家?guī)硪黄趖wbsPagination.js分頁插件使用心得(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
解決jQuery插件tipswindown與hintbox沖突
先掃下盲：tipswindown是jQuery的彈窗插件，可以使用url或當(dāng)前頁元素顯示在模擬層中；hintbox是jQuery的類似Google Suggestions插件。
2010-11-11
下面是Jquery對(duì)checkbox的一些操作，全選，反選，取消全選等等.
2011-05-05