代碼如下:
// 創建 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>