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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
Seajs源码详解分析
Apr 02 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
JS实现水平移动与垂直移动动画
Dec 19 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
Python实现购物程序思路及代码
2017/07/24 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python如何调用java类
2020/07/05 Python
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
大四自我鉴定范文
2013/10/06 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
晨会主持词
2014/03/17 职场文书
安全施工责任书
2014/08/25 职场文书
住房抵押登记委托书
2014/09/27 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
小学生节水倡议书
2015/04/29 职场文书
鸡毛信观后感
2015/06/11 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python