=波波日志 > JavaScript/Ajax > ajax onreadystatechange状态转换函数研究=
ajax onreadystatechange状态转换函数研究
有些时候我们需要将ajax请求的功能打包成一个类库方便调用,此时需要用到ajax的状态转换函数,对于执行onreadystatechange函数时,this对象到底是那个对象,不同浏览器的表现方式差异颇大。
下面未进行打包时状态处理函数的测试,示例代码如下
运行上面的代码后,下面是不同浏览器的输出,循序为IE6,IE7,IE8,FF2,FF3.6,chrome4,opera9,safari3。

通过上图可以看出,除了IE6下this==window对象,FF2下this为状态转换函数,其他浏览器this对象都为xhr对象本身。所以在进行打包时,得注意下状态转换函数this的指向问题。
当了解了onreadystatechange状态转换函数中this对象为什么时,我们就可以进行一些简单的打包操作了。
打包后的简单示例代码如下。
推荐的事件绑定方法
下面未进行打包时状态处理函数的测试,示例代码如下
+展开
-HTML
<div id="dvAjax"></div>
<script type="text/javascript">var xhr=window.XMLHttpRequest?new XMLHttpRequest():(window.ActiveXObject?new ActiveXObject('microsoft.xmlhttp'):false);
if(!xhr)throw new Error('浏览器不支持Ajax');
xhr.open('GET','data.txt?_dc='+new Date().getTime(),true);
function statechr(){
if(xhr.readyState==4){
alert(
(this===xhr)
+'\n'+(this===window)
+'\n'+(this===statechr)
)
if(xhr.status==200||xhr.status==0)document.getElementById('dvAjax').innerHTML=xhr.responseText;
else alert('发生错误!\nstatus='+xhr.status);
}
}
xhr.onreadystatechange=statechr;
xhr.send(null);</script>
<script type="text/javascript">var xhr=window.XMLHttpRequest?new XMLHttpRequest():(window.ActiveXObject?new ActiveXObject('microsoft.xmlhttp'):false);
if(!xhr)throw new Error('浏览器不支持Ajax');
xhr.open('GET','data.txt?_dc='+new Date().getTime(),true);
function statechr(){
if(xhr.readyState==4){
alert(
(this===xhr)
+'\n'+(this===window)
+'\n'+(this===statechr)
)
if(xhr.status==200||xhr.status==0)document.getElementById('dvAjax').innerHTML=xhr.responseText;
else alert('发生错误!\nstatus='+xhr.status);
}
}
xhr.onreadystatechange=statechr;
xhr.send(null);</script>
运行上面的代码后,下面是不同浏览器的输出,循序为IE6,IE7,IE8,FF2,FF3.6,chrome4,opera9,safari3。

通过上图可以看出,除了IE6下this==window对象,FF2下this为状态转换函数,其他浏览器this对象都为xhr对象本身。所以在进行打包时,得注意下状态转换函数this的指向问题。
当了解了onreadystatechange状态转换函数中this对象为什么时,我们就可以进行一些简单的打包操作了。
打包后的简单示例代码如下。
+展开
-HTML
<div id="dvAjax"></div>
<script type="text/javascript">
function Ajax(url,method,params,callback){
this.url=url;
this.method=method;
this.callback=callback;
this.async=typeof this.callback=='function'//根据回调函数判断是同步或者异步,未传递callback时为同步,本文讨论的都是异步的,同步不在考虑范围内
this.params=params;//params为处理好后的键值对
}
Ajax.prototype.getObject=function(){
var xhr=window.XMLHttpRequest?new XMLHttpRequest():(window.ActiveXObject?new ActiveXObject('microsoft.xmlhttp'):false);
if(!xhr)throw new Error('浏览器不支持Ajax');
return xhr;
}
Ajax.prototype.statechr=function(){
//注意callServer中状态转换函数的添加方法,这种添加方法在IE6,FF2中不太符合闭包和继承的精神,需要使用实例名称来访问,callServer中状态转换函数不推荐这样来绑定
//为了兼容IE6和FF2,不能使用this对象来访问xhr对象,而且还需要调用回调函数,this指向并非ajax的实例对象,this对象指向参考第一个示例代码的说明
if(xhr.ajax.readyState==4){
if(xhr.ajax.status==200)xhr.callback(xhr.ajax.responseText);
else alert('发生错误\nstatus'+xhr.ajax.status);
}
}
Ajax.prototype.callServer=function(){
this.ajax=this.getObject();
if(this.method.toLowerCase()=='get'){
this.url+='?'+this.params+(this.params==''?'':'&')+'_dc='+new Date().getTime();
this.params=null;
}
this.ajax.open(this.method,this.url,this.async);
if(this.async){//为异步时添加状态转换函数,添加此回调函数注意了,this对象指向问题和statechr状态转换函数的关系,这是第一种添加状态转换函数的方法,另外一种参考下面的【强烈推荐此方法】
this.ajax.onreadystatechange=this.statechr;//这样来添加状态转换函数等同于上面的过程化的方法,this对象指向清考上面的
}
this.ajax.send(this.params);
if(!this.async)return this.ajax.responseText;//如果未传递回调函数,则可以直接返回responseText
}
var xhr=new Ajax('data.txt','get','',function(responseText){document.getElementById('dvAjax').innerHTML=responseText;});
xhr.callServer();
</script>
<script type="text/javascript">
function Ajax(url,method,params,callback){
this.url=url;
this.method=method;
this.callback=callback;
this.async=typeof this.callback=='function'//根据回调函数判断是同步或者异步,未传递callback时为同步,本文讨论的都是异步的,同步不在考虑范围内
this.params=params;//params为处理好后的键值对
}
Ajax.prototype.getObject=function(){
var xhr=window.XMLHttpRequest?new XMLHttpRequest():(window.ActiveXObject?new ActiveXObject('microsoft.xmlhttp'):false);
if(!xhr)throw new Error('浏览器不支持Ajax');
return xhr;
}
Ajax.prototype.statechr=function(){
//注意callServer中状态转换函数的添加方法,这种添加方法在IE6,FF2中不太符合闭包和继承的精神,需要使用实例名称来访问,callServer中状态转换函数不推荐这样来绑定
//为了兼容IE6和FF2,不能使用this对象来访问xhr对象,而且还需要调用回调函数,this指向并非ajax的实例对象,this对象指向参考第一个示例代码的说明
if(xhr.ajax.readyState==4){
if(xhr.ajax.status==200)xhr.callback(xhr.ajax.responseText);
else alert('发生错误\nstatus'+xhr.ajax.status);
}
}
Ajax.prototype.callServer=function(){
this.ajax=this.getObject();
if(this.method.toLowerCase()=='get'){
this.url+='?'+this.params+(this.params==''?'':'&')+'_dc='+new Date().getTime();
this.params=null;
}
this.ajax.open(this.method,this.url,this.async);
if(this.async){//为异步时添加状态转换函数,添加此回调函数注意了,this对象指向问题和statechr状态转换函数的关系,这是第一种添加状态转换函数的方法,另外一种参考下面的【强烈推荐此方法】
this.ajax.onreadystatechange=this.statechr;//这样来添加状态转换函数等同于上面的过程化的方法,this对象指向清考上面的
}
this.ajax.send(this.params);
if(!this.async)return this.ajax.responseText;//如果未传递回调函数,则可以直接返回responseText
}
var xhr=new Ajax('data.txt','get','',function(responseText){document.getElementById('dvAjax').innerHTML=responseText;});
xhr.callServer();
</script>
推荐的事件绑定方法
+展开
-JavaScript
Ajax.prototype.statechr=function(){
//在所有浏览器下this对象为Ajax类的实例,不是window,ajax对象本身和状态转换函数了
if(this.ajax.readyState==4){
if(this.ajax.status==200)this.callback(this.ajax.responseText);
else alert('发生错误\nstatus'+this.ajax.status);
}
}
Ajax.prototype.callServer=function(){
this.ajax=this.getObject();
if(this.method.toLowerCase()=='get'){
this.url+='?'+this.params+(this.params==''?'':'&')+'_dc='+new Date().getTime();
this.params=null;
}
this.ajax.open(this.method,this.url,this.async);
//做个闭包,将this对象传入,然后使用me调用statechr方法,这样this就为Ajax的实例对象了
if(this.async)this.ajax.onreadystatechange=(function(me){return function(){me.statechr();}})(this);
this.ajax.send(this.params);
if(!this.async)return this.ajax.responseText;//如果未传递回调函数,则可以直接返回responseText
}
//在所有浏览器下this对象为Ajax类的实例,不是window,ajax对象本身和状态转换函数了
if(this.ajax.readyState==4){
if(this.ajax.status==200)this.callback(this.ajax.responseText);
else alert('发生错误\nstatus'+this.ajax.status);
}
}
Ajax.prototype.callServer=function(){
this.ajax=this.getObject();
if(this.method.toLowerCase()=='get'){
this.url+='?'+this.params+(this.params==''?'':'&')+'_dc='+new Date().getTime();
this.params=null;
}
this.ajax.open(this.method,this.url,this.async);
//做个闭包,将this对象传入,然后使用me调用statechr方法,这样this就为Ajax的实例对象了
if(this.async)this.ajax.onreadystatechange=(function(me){return function(){me.statechr();}})(this);
this.ajax.send(this.params);
if(!this.async)return this.ajax.responseText;//如果未传递回调函数,则可以直接返回responseText
}
类别:JavaScript/Ajax 作者:波波 日期:2010-07-09 【评论:0】
暂时没有评论!
发表留言
百度赞助
同类热门博文
- ·AJAX跨域问题解决办..
- ·ajax问题总结
- ·jQuery dataType指定..
- ·ajax+asp.net+mssql..
- ·ajax无刷新上传文件..
- ·ajax对象abort方法
- ·JavaScript代码,变..
- ·fckeditor编辑器在F..
博格Tag
- flash/flex/fcs/AIR(752)
- Asp.Net/C#/WCF(598)
- 操作系统及应用软件(376)
- JavaScript/Ajax(330)
- SQL及数据库(134)
- 黑客技术(115)
- Asp/VBScript(111)
- HTML/WML/CSS兼容/XML(102)
- PHP/apache/Perl(96)
- 网站排名及优化(96)
- 其他(75)
- showbo日志(66)
- lucene.net/分词技术(33)
- 计算机网络(26)
- 机械重工(26)
- C#设计模式(25)
- Google Maps开发(17)
- 日语学习(15)
- Canvas/VML/SVG(13)
- linux(11)
- 游戏开发(8)
- 正则表达式(5)
- Jsp/Java(4)
最新博文
- ·javascript实现html..
- ·Javascript风格要素..
- ·Javascript风格要素
- ·动态加载JavaScript
- ·JavaScript陷阱
- ·ajax技巧
- ·IE对CSS样式表的限制..
- ·什么是Javascript匿..
随机博文
