初次接触ajax,看到的是一个很简单的例子:
//针对各种浏览器建立一个http request的对象
function getHttpRequest(){
http_request = null;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
return http_request;
}
var ajax_request;
functiong getPerson(){
ajax_request = getHttpRequest(); //建立一个http request
ajax_request.onstatechange = handleResponse; //指定回调函数
ajax_request.open("GET", "http://myhost.com/sample.xml", null);
ajax_request.send();
}
function handleResponse(){
if(ajax_request.readyState != 4) return;
if(ajax_request.status == 200){
var xml = ajax_request.responseXML;
/* 对获得的xml的处理 */
}
}
调用的时候可以直接在页面里调用
getPerson();
这个函数会建立一个httpRequest对象,然后发送请求,在请求返回的时候会自动调用handleResponse函数来完成操作。
在简单的环境上,上述代码会工作得很好,但是如果在一个页面中要执行多次这种操作就比较麻烦了,需要写多个函数,看一下上面的定义:
var ajax_request; 表示这是个全局变量,多次请求的时候每个请求都要用到这个对象,ajax又是异步的,无法事先确定哪个请求先返回。
如果把ajax_request作为函数内的局部变量呢?那样如果在handleResponse里能看到ajax_request对象就可以解决这个问题了。
可以考虑把ajax_request作为一个参数传递给handleResponse,现在的问题是,对handleResponse的调用是自动的,怎么能在参数列表中添加这个参数呢?我们想到了this变量,在javascript中,所有的东西都是对象,this表示当前对象,在函数中this就表示当前的函数。
javascript提供了一种可以改变this的方法——apply()。
javascript对apply的解释是:使用指定对象替换当前对象并调用函数。比如:
function test_apply(){
alert(this);
}
test_apply.apply(document, []);
就表示调用函数test_apply,并用document对象来替换test_apply中的this。
回到刚刚的问题,为了修改当前对象,需要在指定handleResponse的时候就修改this对象。ajax_request.onstatechange是一个函数的句柄,只要我把一个函数的句柄赋值给它就可以了,同时函数也是一种对象,Function对象,因此我们为函数对象添加一个方法:
Function.prototype.setThis(){
var curr_function = this;
var to_this_object = arguments[0];
return function(){
currFunc.apply(to_this_object, []);
};
}
下面,修改getPerson为:
functiong getPerson(){
var tmp_request = getHttpRequest(); //建立一个http request
tmp_request.onstatechange = handleResponse.setThis(tmp_request); //指定回调函数
tmp_request.open("GET", "http://myhost.com/sample.xml", null);
tmp_request.send();
}
修改handleResponse为:
function handleResponse(){
if(this.readyState != 4) return;
if(this.status == 200){
var xml = this.responseXML;
/* 对获得的xml的处理 */
}
}
即可。
具体的变化就在于tmp_request.onstatechange = handleResponse.setThis(tmp_request);
因为handleResponse是一个函数,因此它具有Function新添加的方法setThis,
下面来看setThis方法:
var curr_function = this; //获得当前的函数本身
var to_this_object = arguments[0]; //获得要指定的新的this对象
return function(){
currFunc.apply(to_this_object, []);
};
这里的返回值是一个函数,即当tmp_request的onstatechange事件的时候会触发这个函数,该函数中只有一句
currFunc.apply(to_this_object, []);即用to_this_object替换当前对象并调用currFunc,在这里currFunc即代表了handleResponse,因此调用handleResponse,因为已经修改了其this对象,因此在handleResponse中用this即代表了tmp_request对象。
用这种方法可以减化代码,并使代码更具可重用性。
两种方式继承jquery的函数
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
jQuery.fn.check= function(){
alert("check123");
return ;
};
分享到:
相关推荐
关于Ajax的常见面试题 1,Ajax和javascript的区别? javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。 Javascript是由...
本卷从最易于理解和使用的那部分入手,介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分,包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...
Android Webview虽然提供了页面加载及资源请求的钩子,但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能...
在ajax中使用post方法,用常规的参数格式:param1=a1¶m2=a2 ,当参数长度过长时,依然提交不成功。比如我们经常这样写一个ajax的post请求: $.ajax({ type: "post", // post or get contentType:"application...
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件
ajax ajax原理 ajax代码 ajax编程 ajax学习
ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效
使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤
ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...
学习的网上的一个ajax版注册程序,对界面进行了改变!是适合学习ajax的朋友的一个好的例子!
掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件...
并应用上述知识开发了8个基于AJAX的Web应用系统,如基于AJAX的文件和图像处理、AJAX祝福墙、AJAX留言簿、AJAX聊天室、AJAX RSS阅读器、AJAX相册、基于AJAX的电子邮件处理等。最后以两个大型的AJAX Web应用系统(基于...
Ajax + JavaScript + MySQL 实现的Ajax分页功能
Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码
第 1 部分:Ajax 简介 第 2 部分:: 使用 JavaScript 和 Ajax 发出异步请求 第 3 部分: Ajax 中的高级请求和响应 第 4 部分: 利用 DOM 进行 Web 响应 第 5 部分: 操纵 DOM 第 6 部分: 建立基于 DOM 的 Web 应用程序 第...
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
ajax 分页ajax 分页ajax 分页
看到网上很多想用ajax的树的例子,很奇怪,明明TreeView自带AJAX功能,取非要自己去写一大堆代码, 工作量增加了,而性能又没有提高多少 正好自己这次用到了,就做了一个例子,供大家一起研究参考 注:顺便下载了一...
ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解