Variable conflict handling

Time:2022-8-15

I have done a phase of AJAX development recently, and have some experience. I will write it out slowly in the future, and I will also ask AJAXer to give me more advice~ When I first started writing AJAX code, I directly referred to the code in the book AJAX Basic Tutorial (this book is really good, it is a classic textbook for getting started with AJAX, it is a picture Ling Publishing House. Computer books, I trust O'R and Turing the most).
The book's code for creating an XMLHttpRequest object 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.
like:
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() {    ……
}
……….

Calling the test1, test2 functions in different places on the page works fine. That is, if it is called at different times, there will be no problem.

But if you need to call both functions at the same time, you will find that only one of them will work properly.
For example, I run the following function when the page is loaded:

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

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

Analyze the reason, it is due to the language characteristics of javascript. In general, Javascript variables, functions, etc., are public, and other objects can access (readable and writable). This is where the problem lies. At the same time, the conflict of "variable xmlHttp" occurs when test1 and test2 are called.

Solution:

1 The easiest way, do not call at the same time, such as the init function can be changed to:

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

But this approach is speculative and does not really solve the problem.

2 Modify the "XMLHttpRequest creation function" and change it to an instantiated function.

function createXMLHttpRequest() {    if (window.ActiveXObject) {        var xmlHttpObj = new ActiveXObject(“Microsoft.XMLHTTP”);    }     else if (window.XMLHttpRequest) {        var xmlHttpObj = new XMLHttpRequest();    } return xmlHttpObj;}

When instantiated, the corresponding change is:

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 the test1 and test2 functions are called at the same time, there will be no problem, and the real "synchronization" is realized.

#######################################################
Through this method, the creation method of "private properties" of objects in javascript can be extended:
1 Private properties can be defined using the var keyword in the constructor.
2 Private properties are only publicly accessible by privileged functions. (A privileged function is a function defined using the this keyword in the constructor). External clients can access privileged functions, and privileged functions can access private properties of objects.

For example, in the following Vehicle class, wheelCount and curbWeightInPounds are private properties that 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;    }
 }