南强小屋 Design By 杰米
最近做了一阶段的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

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“变量冲突处理”

暂无变量冲突处理的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。