jQuery的實現原理的類比代碼 -5 Ajax

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下:// 建立 XHR 對象
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......");
// 通過事件來處理非同步請求
xhr.onreadystatechange = function()
{
if( xhr.readyState == 4 )
{
alert( "Ready.");
if( xhr.status == 200 )
{
alert("成功獲得伺服器返回的結果.");
// 請求結束之後，可以擷取伺服器返回的內容
alert( xhr.responseText );
// 擷取伺服器返回的 json 對象
var alice = eval( "(" + xhr.responseText + ")" );
alert( alice.name );
}
}
};
// 佈建要求參數
xhr.open("get", "data.json" );
xhr.send( null );
}

jQuery 簡單地封裝了對 xhr 對象的使用，通過對 jQuery 對象增加常用的存取方法，然後，提供給 jQuery 對象來使用。複製代碼代碼如下:// 主要的擴充在 jQuery.ajax 中。
jQuery.extend({ // #6299
// 請求的預設參數
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) { }
}
},
// 用來設定 jQuery.ajaxSettings ，佈建要求的參數
ajaxSetup: function (settings) {
jQuery.extend(jQuery.ajaxSettings, settings);
},
ajax: function (origSettings) { // 實際的 ajax 函數
var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);
// 建立 xhr 對象
xhr = s.xhr();
// 回呼函數
var onreadystatechange = xhr.onreadystatechange = function (isTimeout) {
if (xhr.readyState === 4) {
if (xhr.status == 200) {
s.success.call(origSettings, xhr.responseText);
}
}
};
// 佈建要求參數
xhr.open(s.type, s.url);
// Send the data 發出請求
xhr.send(s.data);
// return XMLHttpRequest to allow aborting the request etc.
return xhr;
},
// 使用 get 方式發出 ajax 請求的方法
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
// 擴充 jQuery 對象，增加 load 方法
jQuery.fn.extend(
{
load: function (url) {
var self = this;
jQuery.get(url, function (data) {
self.each(function () {
this.innerHTML = data;
}
)
}
)
}
}
)

在頁面中，可以如下使用。複製代碼代碼如下:<!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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More