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

192 阅读 0 评论 127 点赞

我是靠谱客的博主朴实彩虹，最近开发中收集的这篇文章主要介绍jQuery的实现原理的模拟代码 -5 Ajax，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
// 创建 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> 