AJAX小经验之一:变量冲突处理
2010-03-17 17:17
246 查看
http://blog.chinaunix.net/u/12569/showart_171507.html
最近做了一阶段的AJAX开发,有一些心得体会。日后会慢慢写出来,也请AJAXer多多指教~
刚开始写AJAX代码的时候,直接参照的是AJAX基础教程一书中的代码(该书真的很不错,是AJAX入门的经典教材,是图灵出版社的。计算机方面的书籍,我最信任的就是O'R和图灵的)。
该书的创建XMLHttpRequest对象的代码如下:
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
在一般情况下,该代码的使用不会带来任何问题。
如:
function test1()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange1;
url = "test.php?ts=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function test2()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange2;
url = "test.php?ts=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function handleStateChange1() {
......
}
function handleStateChange2() {
......
}
..........
在页面的不同地方调用test1,test2函数都能正常工作。即不同时刻调用的话,就不会产生问题。
但是假如你需要在同一时刻同时调用这两个函数,则会发现只有其中一个可以正常运行。
比如,我在加载页面的时候运行如下函数:
function init()
{
test1();
test2();
}
此时,则test1,test2只有一个函数会正常执行。
分析下原因,是由于javascript的语言特性导致。一般情况下,Javascript的变量,函数等等,都是公用的,其他对象都能访问(可读可写)。这就是问题的所在。在同一时刻,调用test1和test2就会出现“变量xmlHttp”的冲突。
解决方法:
1 最简单的方法,不要在同一时刻调用,如init函数可以改为:
function init()
{
test1();
setTimeout("test2()",500);
}
但该方法属于投机,并未真正解决问题。
2 修改“XMLHttpRequest创建函数”,改为一实例化函数。
function createXMLHttpRequest() {
if (window.ActiveXObject) {
var xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
var xmlHttpObj = new XMLHttpRequest();
}
return xmlHttpObj;
}
实例化时相应的改为:
function test1()
{
xmlHttp_1 = createXMLHttpRequest();
xmlHttp_1.onreadystatechange = handleStateChange1;
url_1 = "test.php?ts=" + new Date().getTime();
xmlHttp_1.open("GET", url, true);
xmlHttp_1.send(null);
}
function test2()
{
xmlHttp_2 = createXMLHttpRequest();
xmlHttp_2.onreadystatechange = handleStateChange1;
url_2 = "test.php?ts=" + new Date().getTime();
xmlHttp_2.open("GET", url, true);
xmlHttp_2.send(null);
}
这样子处理的话,即使在同一时刻调用test1,test2函数,也不会产生问题了,实现了真正的“同步”。
#######################################################
通过该方法,可以引申出javascript中对象的“私有属性”的创建方法:
1 私有属性可以在构造函数中使用 var 关键字定义。
2 私有属性只能由特权函数公用访问。(特权函数就是在构造函数中使用this关键字定义的函数)。外部客户可以访问特权函数,而且特权函数可以访问对象的私有属性。
比如下面这个Vehicle类,则wheelCount和curbWeightInPounds就是私有属性,只能通过特权函数访问/ 设置了:
function Vehicle() {
var wheelCount = 4;
var curbWeightInPounds = 4000;
this.getWheelCount = function() {
return wheelCount;
}
this.setWheelCount = function(count) {
wheelCount = count;
}
this.getCurbWeightInPounds = function() {
return curbWeightInPounds;
}
this.setCurbWeightInPounds = function(weight) {
curbWeightInPounds = weight;
}
}
--该段文字摘自<<AJAX基础教程>>第5章 147页面
########################################################
最近做了一阶段的AJAX开发,有一些心得体会。日后会慢慢写出来,也请AJAXer多多指教~
刚开始写AJAX代码的时候,直接参照的是AJAX基础教程一书中的代码(该书真的很不错,是AJAX入门的经典教材,是图灵出版社的。计算机方面的书籍,我最信任的就是O'R和图灵的)。
该书的创建XMLHttpRequest对象的代码如下:
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
在一般情况下,该代码的使用不会带来任何问题。
如:
function test1()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange1;
url = "test.php?ts=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function test2()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange2;
url = "test.php?ts=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function handleStateChange1() {
......
}
function handleStateChange2() {
......
}
..........
在页面的不同地方调用test1,test2函数都能正常工作。即不同时刻调用的话,就不会产生问题。
但是假如你需要在同一时刻同时调用这两个函数,则会发现只有其中一个可以正常运行。
比如,我在加载页面的时候运行如下函数:
function init()
{
test1();
test2();
}
此时,则test1,test2只有一个函数会正常执行。
分析下原因,是由于javascript的语言特性导致。一般情况下,Javascript的变量,函数等等,都是公用的,其他对象都能访问(可读可写)。这就是问题的所在。在同一时刻,调用test1和test2就会出现“变量xmlHttp”的冲突。
解决方法:
1 最简单的方法,不要在同一时刻调用,如init函数可以改为:
function init()
{
test1();
setTimeout("test2()",500);
}
但该方法属于投机,并未真正解决问题。
2 修改“XMLHttpRequest创建函数”,改为一实例化函数。
function createXMLHttpRequest() {
if (window.ActiveXObject) {
var xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
var xmlHttpObj = new XMLHttpRequest();
}
return xmlHttpObj;
}
实例化时相应的改为:
function test1()
{
xmlHttp_1 = createXMLHttpRequest();
xmlHttp_1.onreadystatechange = handleStateChange1;
url_1 = "test.php?ts=" + new Date().getTime();
xmlHttp_1.open("GET", url, true);
xmlHttp_1.send(null);
}
function test2()
{
xmlHttp_2 = createXMLHttpRequest();
xmlHttp_2.onreadystatechange = handleStateChange1;
url_2 = "test.php?ts=" + new Date().getTime();
xmlHttp_2.open("GET", url, true);
xmlHttp_2.send(null);
}
这样子处理的话,即使在同一时刻调用test1,test2函数,也不会产生问题了,实现了真正的“同步”。
#######################################################
通过该方法,可以引申出javascript中对象的“私有属性”的创建方法:
1 私有属性可以在构造函数中使用 var 关键字定义。
2 私有属性只能由特权函数公用访问。(特权函数就是在构造函数中使用this关键字定义的函数)。外部客户可以访问特权函数,而且特权函数可以访问对象的私有属性。
比如下面这个Vehicle类,则wheelCount和curbWeightInPounds就是私有属性,只能通过特权函数访问/ 设置了:
function Vehicle() {
var wheelCount = 4;
var curbWeightInPounds = 4000;
this.getWheelCount = function() {
return wheelCount;
}
this.setWheelCount = function(count) {
wheelCount = count;
}
this.getCurbWeightInPounds = function() {
return curbWeightInPounds;
}
this.setCurbWeightInPounds = function(weight) {
curbWeightInPounds = weight;
}
}
--该段文字摘自<<AJAX基础教程>>第5章 147页面
########################################################
相关文章推荐
- Ajax一个变量冲突的问题
- 处理手势冲突和错乱的一点经验
- Ajax一个变量冲突的问题
- 处理手势冲突和错乱的一点经验
- 职场经验谈之冲突处理
- 项目优化经验分享(六)SVN冲突和处理
- ajax如果是json方式,接收页面echo出的变量一定要有json_encode()处理,html页面的返回函数success才能正常alert出这个变量
- 项目优化经验分享(六)SVN冲突和处理
- Struts 2处理Dojo Ajax请求的一点经验
- 变量冲突处理
- Git冲突处理的一些经验
- 变量名冲突的解决办法
- jquery利用ajax URL传参处理特殊字符串#%
- spring mvc后台如何处理ajax的请求,并返回json
- [经验总结]MSXML错误处理代码
- iOS 关于 Missing iOS Distribution signing identity for.... 等 打包 校验 出现的事故 处理经验
- RecyclerView嵌套滑动冲突处理
- 批处理中的变量与命令set的用法
- C++处理字符串的方法—字符串类与字符串变量
- 处理 MD5 的经验和坑