Variable conflict Processing

I have recently developed a phase of AJAX and have some experiences. It will be written slowly in the future. Please kindly advise AJAXer ~ When I first started writing AJAX code, I directly referred to the Code in the basic AJAX tutorial book (this book is really good, it is a classic tutorial for getting started with AJAX, and it is from the Turing Publishing House. I trust O 'r and Turing most in computer books ).
The code for creating an XMLHttpRequest object in this book is as follows:
Var xmlHttp;
Function createXMLHttpRequest () {if (window. activeXObject) {xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");} else if (window. XMLHttpRequest) {xmlHttp = new XMLHttpRequest ();}}
In general, the use of this code will not cause any problems.
For example:
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 (){......
}
..........

The test1 and test2 functions can work normally in different places on the page. That is, the call at different times will not cause problems.

However, if you need to call these two functions at the same time, you will find that only one of them can run normally.
For example, when loading a page, I run the following function:

Function init () {test1 (); test2 ();}

At this time, only one function of test1 and test2 will be executed normally.

The reason is caused by the Language Characteristics of javascript. Generally, Javascript variables, functions, and so on are all public and can be accessed by other objects (readable and writable ). This is the problem. When test1 and test2 are called at the same time, the "xmlHttp variable" conflict occurs.

Solution:

1. Do not call the most simple method at the same time. For example, the init function can be changed:

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

However, this method is speculative and does not really solve the problem.

2. Change "XMLHttpRequest create function" to "instantiate function.

Function createXMLHttpRequest () {if (window. activeXObject) {var xmlHttpObj = new ActiveXObject ("Microsoft. XMLHTTP ");} else if (window. XMLHttpRequest) {var xmlHttpObj = new XMLHttpRequest ();} return xmlHttpObj ;}

During instantiation, the following changes accordingly:

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 );}

In this way, even if test1 and test2 functions are called at the same time, there will be no problems, achieving real "synchronization ".

######################################## ###############
This method can be used to create the "private property" of objects in javascript:
1 private attributes can be defined using the var keyword in the constructor.
2. Private Properties can only be accessed by privileged functions. (A special function is a function defined using the this keyword in the constructor ). External users can access privileged functions, and privileged functions can access private properties of objects.

For example, in the Vehicle class below, the wheelCount and curbWeightInPounds are private attributes and can only be accessed/set through privileged functions:
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 ;}
}