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 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP基础学习小结
2011/04/17 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
一个JS翻页效果
2007/07/23 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
js判断节假日实例代码
2017/12/27 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python实现发送邮件功能代码
2017/12/14 Python
python之pandas用法大全
2018/03/13 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
元旦晚会主持词
2014/03/24 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
商务英语专业求职信
2014/06/26 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
vue动态绑定style样式
2022/04/20 Vue.js
基于docker安装zabbix的详细教程
2022/06/05 Servers