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打印纸函数代码(递归)
Jun 18 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
微信小程序实现侧边栏分类
Oct 21 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.ini中文版(2)
2006/10/09 PHP
十天学会php之第三天
2006/10/09 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP内核探索之变量
2015/12/22 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
vue.js的提示组件
2017/03/02 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
用python进行视频剪辑
2020/11/02 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
3分钟演讲稿
2014/04/30 职场文书
民生工作实施方案
2014/05/31 职场文书
服务宗旨标语
2014/07/01 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
红色电影观后感
2015/06/18 职场文书
2016党员党课心得体会
2016/01/07 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP