Ajax request only submits last one

Question

I have this code in a file called 'inject.php' which i use to retrieve an update multiple values in-game but the request is only getting the last value "health" and displaying the health in all the other feilds :/

  < script type = "text/javascript" > function getAttack() { if (window.XMLHttpRequest) { // Create the object for browsers xmlhttp = new XMLHttpRequest(); } else { // Create the object for browser versions prior to IE 7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { // if server is ready with the response if (xmlhttp.readyState == 4) { // if everything is Ok on browser if (xmlhttp.status == 200) { //Update the div with the response document.getElementById("attack").innerHTML = xmlhttp.responseText; } } } //send the selected option id to the php page xmlhttp.open("GET", "ajax/fetchAttack.php", true); xmlhttp.send(); } function getDefense() { if (window.XMLHttpRequest) { // Create the object for browsers xmlhttp = new XMLHttpRequest(); } else { // Create the object for browser versions prior to IE 7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { // if server is ready with the response if (xmlhttp.readyState == 4) { // if everything is Ok on browser if (xmlhttp.status == 200) { //Update the div with the response document.getElementById("defense").innerHTML = xmlhttp.responseText; } } } //send the selected option id to the php page xmlhttp.open("GET", "ajax/fetchDefense.php", true); xmlhttp.send(); } function getMoney() { if (window.XMLHttpRequest) { // Create the object for browsers xmlhttp = new XMLHttpRequest(); } else { // Create the object for browser versions prior to IE 7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { // if server is ready with the response if (xmlhttp.readyState == 4) { // if everything is Ok on browser if (xmlhttp.status == 200) { //Update the div with the response document.getElementById("money").innerHTML = xmlhttp.responseText; } } } //send the selected option id to the php page xmlhttp.open("GET", "ajax/fetchMoney.php", true); xmlhttp.send(); } function getRank() { if (window.XMLHttpRequest) { // Create the object for browsers xmlhttp = new XMLHttpRequest(); } else { // Create the object for browser versions prior to IE 7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { // if server is ready with the response if (xmlhttp.readyState == 4) { // if everything is Ok on browser if (xmlhttp.status == 200) { //Update the div with the response document.getElementById("rank").innerHTML = xmlhttp.responseText; } } } //send the selected option id to the php page xmlhttp.open("GET", "ajax/fetchRank.php", true); xmlhttp.send(); } function getExp() { if (window.XMLHttpRequest) { // Create the object for browsers xmlhttp = new XMLHttpRequest(); } else { // Create the object for browser versions prior to IE 7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { // if server is ready with the response if (xmlhttp.readyState == 4) { // if everything is Ok on browser if (xmlhttp.status == 200) { //Update the div with the response document.getElementById("exp").innerHTML = xmlhttp.responseText; } } } //send the selected option id to the php page xmlhttp.open("GET", "ajax/fetchExp.php", true); xmlhttp.send(); } function getLevel() { if (window.XMLHttpRequest) { // Create the object for browsers xmlhttp = new XMLHttpRequest(); } else { // Create the object for browser versions prior to IE 7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { // if server is ready with the response if (xmlhttp.readyState == 4) { // if everything is Ok on browser if (xmlhttp.status == 200) { //Update the div with the response document.getElementById("level").innerHTML = xmlhttp.responseText; } } } //send the selected option id to the php page xmlhttp.open("GET", "ajax/fetchLevel.php", true); xmlhttp.send(); } function getHealth() { if (window.XMLHttpRequest) { // Create the object for browsers xmlhttp = new XMLHttpRequest(); } else { // Create the object for browser versions prior to IE 7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { // if server is ready with the response if (xmlhttp.readyState == 4) { // if everything is Ok on browser if (xmlhttp.status == 200) { //Update the div with the response document.getElementById("health").innerHTML = xmlhttp.responseText; } } } //send the selected option id to the php page xmlhttp.open("GET", "ajax/fetchHealth.php", true); xmlhttp.send(); } setInterval(getAttack, 1000); setInterval(getDefense, 1000); setInterval(getMoney, 1000); setInterval(getRank, 1000); setInterval(getExp, 1000); setInterval(getLevel, 1000); setInterval(getHealth, 1000); < /script> 

Answer 1

add

var xmlhttp;

to the top of each function

Currently you're using a global xmlhttp variable, so each function clobbers the value of the xmlhttp

Answer 2

As you are not using var xmlhttp; it is becoming a global variable and getting overwritten by each function. So the last function is setting the URL of the AJAX call to "ajax/fetchHealth.php" . So basically all the function is sending the request to the same URL and getting back the same response. Hope this helps.