jQuery的实现原理的模拟代码 -5 Ajax

时间：2021-05-26

复制代码 代码如下:
// 创建 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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章