如何避免变量冲突以及相关处理

AJAX开发,小编有自己的一些心得体会,也请AJAXer多多指教~那接下来先附上这篇如何避免变量冲突以及相关处理,一起来了解下其中的详情吧。

创建XMLHttpRequest对象的代码如下:
varxmlHttp;
functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}
在一般情况下,该代码的使用不会带来任何问题。
如:
functiontest1(){createXMLHttpRequest();xmlHttp.onreadystatechange=handleStateChange1;url="test.php?ts="+newDate().getTime();xmlHttp.open("GET",url,true);xmlHttp.send(null);}
functiontest2(){createXMLHttpRequest();xmlHttp.onreadystatechange=handleStateChange2;url="test.php?ts="+newDate().getTime();xmlHttp.open("GET",url,true);xmlHttp.send(null);}

functionhandleStateChange1(){......
}


functionhandleStateChange2(){......
}
..........

在页面的不同地方调用test1,test2函数都能正常工作。即不同时刻调用的话,就不会产生问题。

但是假如你需要在同一时刻同时调用这两个函数,则会发现只有其中一个可以正常运行。
比如,我在加载页面的时候运行如下函数:

functioninit(){test1();test2();}

此时,则test1,test2只有一个函数会正常执行。

分析下原因,是由于javascript的语言特性导致。一般情况下,Javascript的变量,函数等等,都是公用的,其他对象都能访问(可读可写)。这就是问题的所在。在同一时刻,调用test1和test2就会出现“变量xmlHttp”的冲突。

解决方法:

1最简单的方法,不要在同一时刻调用,如init函数可以改为:

functioninit(){test1();setTimeout("test2()",500);}

但该方法属于投机,并未真正解决问题。

2修改“XMLHttpRequest创建函数”,改为一实例化函数。

functioncreateXMLHttpRequest(){if(window.ActiveXObject){varxmlHttpObj=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){varxmlHttpObj=newXMLHttpRequest();}returnxmlHttpObj;}

实例化时相应的改为:

functiontest1(){xmlHttp_1=createXMLHttpRequest();
xmlHttp_1.onreadystatechange=handleStateChange1;url_1="test.php?ts="+newDate().getTime();xmlHttp_1.open("GET",url,true);xmlHttp_1.send(null);}



functiontest2(){xmlHttp_2=createXMLHttpRequest();
xmlHttp_2.onreadystatechange=handleStateChange1;url_2="test.php?ts="+newDate().getTime();xmlHttp_2.open("GET",url,true);xmlHttp_2.send(null);}

这样子处理的话,即使在同一时刻调用test1,test2函数,也不会产生问题了,实现了真正的“同步”。

#######################################################
通过该方法,可以引申出javascript中对象的“私有属性”的创建方法:
1私有属性可以在构造函数中使用var关键字定义。
2私有属性只能由特权函数公用访问。(特权函数就是在构造函数中使用this关键字定义的函数)。外部客户可以访问特权函数,而且特权函数可以访问对象的私有属性。

比如下面这个Vehicle类,则wheelCount和curbWeightInPounds就是私有属性,只能通过特权函数访问/设置了:
functionVehicle(){varwheelCount=4;varcurbWeightInPounds=4000;
this.getWheelCount=function(){returnwheelCount;}
this.setWheelCount=function(count){wheelCount=count;}
this.getCurbWeightInPounds=function(){returncurbWeightInPounds;}
this.setCurbWeightInPounds=function(weight){curbWeightInPounds=weight;}
}

以上就是如何避免变量冲突以及相关处理的全部内容,更多关于AJAX的相关教程,请继续关注我们中国E盟技术频道,我们在不断更新中 . . .