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


Posted in Javascript onAugust 07, 2010
// 创建 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>
Javascript 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
javascript new fun的执行过程
Aug 05 #Javascript
过虑特殊字符输入的js代码
Aug 05 #Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 #Javascript
javascript new后的constructor属性
Aug 05 #Javascript
FileUpload上传图片(图片不变形)
Aug 05 #Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 #Javascript
js继承的实现代码
Aug 05 #Javascript
You might like
PHP XML数据解析代码
2010/05/26 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
Prototype Class对象学习
2009/07/19 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Python处理session的方法整理
2019/08/29 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
《石榴》教学反思
2014/03/02 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
艺术节开幕词
2015/01/28 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android