简明现代魔法 -> Ajax技术 -> Ajax 变量冲突问题的解决

Ajax 变量冲突问题的解决

2010-03-18

刚开始写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”的冲突。

解决方法:

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

function init()
{
 	test1();
 	setTimeout("test2()",500);
}

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

我们还可以修改“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中对象的“私有属性”的创建方法:

比如下面这个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;
    }
 }
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们