jQuery的實(shí)現(xiàn)原理的模擬代碼 -5 Ajax
更新時(shí)間：2010年08月07日 15:35:29 作者：
對(duì)于 xhr 對(duì)象來(lái)說(shuō)，我們主要通過(guò)異步方式訪問(wèn)服務(wù)器，在 onreadystatechange 事件中處理服務(wù)器回應(yīng)的內(nèi)容。簡(jiǎn)單的 xhr 使用如下所示。
復(fù)制代碼 代碼如下:
// 創(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......");
// 通過(guò)事件來(lái)處理異步請(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ì)象的使用，通過(guò)對(duì) jQuery 對(duì)象增加常用的訪問(wèn)方法，然后，提供給 jQuery 對(duì)象來(lái)使用。
復(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) { }
}
},
// 用來(lái)設(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;
}
)
}
)
}
}
)
在頁(yè)面中，可以如下使用。
復(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>
您可能感興趣的文章:
- ajax原理總結(jié)附簡(jiǎn)單實(shí)例及其優(yōu)點(diǎn)
- 淺析Ajax的 原理及優(yōu)缺點(diǎn)
- JQuery的Ajax跨域請(qǐng)求原理概述及實(shí)例
- 利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
- Ajax二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)原理及代碼
- js/ajax跨越訪問(wèn)-jsonp的原理和實(shí)例(javascript和jquery實(shí)現(xiàn)代碼)
- Ajax通訊原理XMLHttpRequest
- Ajax的內(nèi)部實(shí)現(xiàn)機(jī)制、原理與實(shí)踐小結(jié)
- AJAX工作原理及優(yōu)缺點(diǎn)詳解
相關(guān)文章
jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法
這篇文章主要介紹了jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法,可實(shí)現(xiàn)類(lèi)似淘寶首頁(yè)縱向菜單的顯示效果,涉及jQuery鼠標(biāo)響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
基于twbsPagination.js分頁(yè)插件使用心得(分享)
下面小編就為大家?guī)?lái)一篇基于twbsPagination.js分頁(yè)插件使用心得(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
解決jQuery插件tipswindown與hintbox沖突
先掃下盲：tipswindown是jQuery的彈窗插件，可以使用url或當(dāng)前頁(yè)元素顯示在模擬層中；hintbox是jQuery的類(lèi)似Google Suggestions插件。2010-11-11
使用struts2+Ajax+jquery驗(yàn)證用戶(hù)名是否已被注冊(cè)
這篇文章主要介紹了使用struts2+Ajax+jquery驗(yàn)證用戶(hù)名是否已被注冊(cè)的相關(guān)資料,需要的朋友可以參考下
2016-03-03 
jQuery動(dòng)態(tài)創(chuàng)建html元素的常用方法匯總
這篇文章主要介紹了jQuery動(dòng)態(tài)創(chuàng)建html元素的常用方法,包括jQuery追加元素、遍歷數(shù)組以及使用模板等方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-09-09 
使用jQuery實(shí)現(xiàn)購(gòu)物車(chē)
這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)購(gòu)物車(chē)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10 
jQuery插件 tabBox實(shí)現(xiàn)代碼
最近對(duì)js以及jq產(chǎn)生了濃厚的興趣，看到j(luò)q有很多很好用的插件，功能各異，包括webUI,jqGrid等等。心里萌發(fā)了制作屬于自己的jq插件的想法。
2010-02-02 
jQuery 行背景顏色的交替顯示(隔行變色)實(shí)現(xiàn)代碼
主要是利用了jquery的attr為行添加樣式來(lái)實(shí)現(xiàn)的，具體的代碼如下。
2009-12-12 
html文件中jquery與velocity變量中的$沖突的解決方法
在使用velocity模版引擎的環(huán)境下，使用jquery時(shí)其中$與velocity變量中的$沖突，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下
2013-11-11