AJAX小经验之一：变量冲突处理

 

 

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页面

########################################################