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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
纯JS实现轮播图
Feb 22 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
js实现自定义滚动条的示例
Oct 27 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查看session内容的函数
2008/08/27 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
JSON相关知识汇总
2015/07/03 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python中IPYTHON入门实例
2015/05/11 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python实现ip地址的包含关系判断
2020/02/07 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
药剂专业自荐信范文
2014/04/16 职场文书
工作检讨书怎么写
2014/10/10 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js