Ajax一个变量冲突的问题

javascript中对象的私有属性的创建方法
服务器君一共花费了159.419 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

刚开始写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中对象的“私有属性”的创建方法:

  • 私有属性可以在构造函数中使用 var 关键字定义。
  • 私有属性只能由特权函数公用访问。(特权函数就是在构造函数中使用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;
    }
 }

本文地址:http://www.nowamagic.net/librarys/veda/detail/714,欢迎访问原出处。

不打个分吗? 还木有人打分噢!

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/714

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《深入理解MySQL核心技术》 Sasba Pacbev (作者), 李芳 (译者), 于红芸 (译者), 邵健 (译者)

《深入理解MySQL核心技术》:从公共可用性的意义上讲,MySQL源代码是开放源代码,但如果对其不了解,则实质上,它对于您来说是封闭的。MysQL开发团队的前成员Sasha Pachev通过《深入理解MySQL核心技术》给出了MySQL 5的全面指南,揭示了这一强大数据库的内部运作。您将直奔MySQL核心技术,了解各种数据结构和各种方便的功能的运作情况,了解如何添加新的存储引擎和配置选项等。 《深入理解MySQL核心技术》从结构概况讲起,在这一部分解释了MysQL的不同组件是如何协同工作的。接着将学习设置有效的可编译代码副本的步骤,然后使用基本架构添加自己的配置变量和存储引擎。

更多计算机宝库...