jQuery的实现原理的模拟代码 -5 Ajax

代码如下:

// 创建 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>

赞 (0)

相关推荐

  • Ajax二级联动菜单实现原理及代码

    index.jsp: 复制代码 代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>二级菜单联动演示</title> <script type="text/javascript"> var req; window.onload=function() {//页面加载时的函数 } f

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

  • Ajax通讯原理XMLHttpRequest

    Ajax通讯原理XMLHttpRequest

    显然AJax就是利用JavaScript脚本访问数据的一种技术. AJAX 使网页实现异步更新.这就是在不重新加载整个网页的情况下,对网页进行局部更新. XMLHttpRequest 是 AJAX 的关键 现在浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). 向后台请求数据readyState有五个状态0:服务器未初始化,1:服务器连接已建立,2请求已接受收,3请求处理中,4请求完成. 每改变一次状态都好触发一次onreadystatec

  • AJAX工作原理及优缺点详解

    AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 一.ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 使用CSS和XHTML来表示. 使用DOM模型来交互和动态显示. 使用XMLHttpRequest来和服务器进行异步通信. 使用javascript来绑定和调用. 在上面几中技术中,除了XmlHttpReq

  • Ajax的内部实现机制、原理与实践小结

    一.Ajax是什么 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术.作为创建交互式网页应用的网页开发技术,它有以下特点: 使用XHTML+CSS来表示信息 使用JavaScript操作DOM(Document Object Model)进行动态显示及交互 使用XML和XSLT进行数据交换及相关操作 使用XMLHttp

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • ajax原理总结附简单实例及其优点

    在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 详情请移步Ajax: A New Approach to Web Applications [原理] 简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面

  • js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应

  • 浅析Ajax的 原理及优缺点

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行.而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用.遗憾的是,不知道出于什么想法,当时微软发明了aja

  • jQuery的实现原理的模拟代码 -5 Ajax

    复制代码 代码如下: // 创建 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");

  • jQuery的实现原理的模拟代码 -1 核心部分

    jQuery的实现原理的模拟代码 -1 核心部分

    核心部分实现了两种选择器,使用 id 和标记名,还可以提供 css 的设置,以及 text 的设置. 复制代码 代码如下: // # 表示在 jQuery 1.4.2 中对应的行数 // 定义变量 undefined 方便使用 var undefined = undefined; // jQuery 是一个函数,其实调用 jQuery.fn.init 创建对象 var $ = jQuery = window.$ = window.jQuery // #19 = function (selecto

  • jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend

    jQuery.fn.extend 提供了一个扩展机制,可以方便我们通过一个或者多个示例对象来扩展某个对象.如果没有指定被扩展的对象,那么将扩展到自己身上. jQuery.extend 也可以通过 jQuery.fn.extend 使用, 在 jQuery 中使用很多,用来为一个目标对象扩展成员,扩展的成员来自于一系列参考对象. 这样,如果我们需要为 jQuery.fn 扩展成员 removeData,就可以这样进行. 复制代码 代码如下: jQuery.fn.extend( { removeDa

  • jQuery的实现原理的模拟代码 -3 事件处理

    在对象的私有扩展对象上,专门增加了一个名为 events 的事件管理对象,在这个对象上每种事件分别对应一个同名的属性,这个属性的值是一个数组,针对这个事件的处理程序依次压入这个数组中,构成一个事件处理的列表.自定义的事件处理函数即被压入这个列表中. 在事件触发的时候,通过注册的匿名函数来执行 jQuery.event.handle ,由于使用了闭包,所以在这个函数中的 this 就是事件源对象,通过这个事件源对象找到对象的私有扩展数据,然后在 events 中找到对应的事件处理程序列表,最后,依

  • jQuery的实现原理的模拟代码 -2 数据部分

    这个数据当然要通过属性来进行存取,但是,有多个属性怎么办呢?,要定义多个属性吗?,属性的名字叫什么呢?会不会与其他的属性有冲突呢? 在 jQuery 中,针对 DOM 对象扩展的私有数据可以用一个对象来表示,多个数据就使用这个对象的多个属性来表示.为了能够通过 DOM 对象找到这个扩展数据对象,而不会与其他现有的属性冲突,在 jQuery 中通过 expando 这个常量表示扩展对象的属性名,这个 expando 的值是计算出来的.而这个属性的值就是用来找到扩展对象的键值. 例如,我们可以定义

  • jQuery实现原理的模拟代码 -6 代码下载

    演示代码: 复制代码 代码如下: <!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><

  • mvvm双向绑定机制的原理和实现代码(推荐)

    mvvm框架的双向绑定,即当对象改变时,自动改变相关的dom元素的值,反之,当dom元素改变时,能自动更新对象的值,当然dom元素一般是指可输出的input元素. 1. 首先实现单向绑定,在指定对象的属性值发生改变时触发callback函数. 2. 单向绑定可采用ES5新增的defineProperty实现(或defineProperties),用了ES5注定就不支持IE9以下了,为了防止递归死循环问题,原有属性需要剪切到一个私有属性中保存. 3. 循环调用defineProperty定义闭包时

  • Jquery选择器 $实现原理

    但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理): 复制代码 代码如下: (function() { var // Will speed up references to window, and

  • C#中foreach原理以及模拟的实现

    本文实例讲述了C#中foreach原理以及模拟的实现方法,分享给大家供大家参考.具体如下: 复制代码 代码如下: public class Person:IEnumerable     //定义一个person类  并且 实现IEnumerable 接口  (或者不用实现此接口 直接在类 //里面写个GetEnumerator()方法) {         string[] names = { "小杨", "科比布莱恩特", "凯文杜兰特", &

  • Java设计模式之代理模式原理及实现代码分享

    简介 Java编程的目标是实现现实不能完成的,优化现实能够完成的,是一种虚拟技术.生活中的方方面面都可以虚拟到代码中.代理模式所讲的就是现实生活中的这么一个概念:中介. 代理模式的定义:给某一个对象提供一个代理,并由代理对象控制对原对象的引用. 代理模式包含如下角色: ISubject:抽象主题角色,是一个接口.该接口是对象和它的代理共用的接口. RealSubject:真实主题角色,是实现抽象主题接口的类. Proxy:代理角色,内部含有对真实对象RealSubject的引用,从而可以操作真实

随机推荐