Javascript : ResponseText values getting Mixed up?
I'm calling 2 JS functions(Ajax) each of wh开发者_开发技巧ich are returning data from the server.But the 2nd function gets the responsetext of the 1st function.
one thing i observed is,if i use 1 or more alerts in the functions(to know what the data is) before using it(printing an image and displaying an anchor) it works fine as in -- given a bit of delay(i'm guessing) its working fine,without which it fails.
i find this very strange and once i did some searching found this article( http://forums.devnetwork.net/viewtopic.php?f=13&t=117523 ) in which he has a workaround -- give a timeout of 1 or .5 sec's and things will be proper.
Although the workaround seems to get the job done i'm curious to know why the response text is getting values from the previous Ajax.
I know the code is not necessary.but,just in case -- its given below
GIST:
1.the alerts when included -- the code works fine
2.When the alerts are removed the Anchors are getting displayed but not the image is a Crushed image(Sort of a torn paper kinda image) on checking the image info did i find the data form the previous function -- hence Not getting displayed.
<style type="text/css">
.image{
position: relative;
left: 20%;
}
</style>
<script type="text/javascript" >
function create(){
alert("createUid"); // 1st alert with which the code works
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var json = eval(xmlhttp.responseText);
for(i=0;i<json.length;i++){
var a = document.createElement("a"); //creates a List of anchors
a.id="a"+json[i].uid;
a.style.display="block";
a.setAttribute("href","#");
a.setAttribute("onclick","alert("+json[i].uid+")");
a.appendChild(document.createTextNode(json[i].uid));
document.getElementById("tag").appendChild(a);
}
}
}
xmlhttp.open("GET","users.php?send=vivek",true);
xmlhttp.send("NULL");
}
function display(){
alert("pict");
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var img = document.createElement("img");
img.id="dispPict";
img.class="image";
img.setAttribute("alt","ViperRules!!");
img.setAttribute("src","data:image/jpg;base64,"+xmlhttp.responseText); // response text is a binary of an image stored in the DB.
img.style.display="block";
document.body.appendChild(img);
//document.getElementById("Tag").appendChild(img);
}
}
xmlhttp.open("GET","users.php?pict=vivek",true);
xmlhttp.send("NULL");
}
</script>
<body onload=" display(), create();">
<div id="tag" class="image"> </div>
</body>
You are using the global variable xmlhttp in each function--meaning each function uses the same xmlhttp. The second function called replaces the first function's xmlhttp onreadystatechange so when the first call returns, it executes the second's onreadystatechange.
To fix this, you need to not use a global variable. This can be done by addding var in front of the variable when it's defined.
Example:
<script type="text/javascript" >
function create(){
alert("createUid"); // 1st alert with which the code works
var xmlhttp=new XMLHttpRequest();
...
}
function display(){
alert("pict");
var xmlhttp=new XMLHttpRequest();
...
}
</script>
A global property is being used -- xmlhttp. Because of this, the xmlhttp inside the callback is not bound in a closure but is instead the global property is overwritten the second time create() is called. (The timeout/delay allows the first XHR request to actually finish first.)
The most simple "fix" is to change:
xmlhttp=new XMLHttpRequest();
to:
var xmlhttp=new XMLHttpRequest();
This will declare xmlhttp as a function-local variable and thus it will be closured in the callback. I would, however, recommend using a framework -- jQuery is popular -- to make this entire process simpler.
Happy coding.
加载中,请稍侯......
精彩评论