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焦点与失去焦点示例应用
Jun 10 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
angular4自定义组件详解
Sep 28 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
vue实现引入本地json的方法分析
Jul 12 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中使用Oracle数据库(2)
2006/10/09 PHP
很好用的PHP数据库类
2009/05/27 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python星号*与**用法分析
2018/02/02 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python的sorted用法详解
2019/06/25 Python
利用python开发app实战的方法
2019/07/09 Python
python实现的自动发送消息功能详解
2019/08/15 Python
使用Django清空数据库并重新生成
2020/04/03 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
资深生产主管自我评价
2013/09/22 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
vue+springboot实现登录验证码
2021/05/27 Vue.js