multiple ajax requests on one page

[jwk811]

im having a problem where two requests are messing up eachother i have a chat on the page that uses ajax but i am also trying to use ajax to show data on the page. im not sure how to make 2 requests work together. this is the javascript page with the two functions and objects. i dont know what im doing this was my attempt that didnt work great. please help

 

            var xmlhttp = createObject();
            var xmlhttp2 = createObject2();
            var lastMessage = 0;
            var mTimer;
                             
                       
            function createObject() {
                if (window.XMLHttpRequest) {
                    return new XMLHttpRequest();
                } else if(window.ActiveXObject) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                } else {
                    document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
                }
            }
            function createObject2() {
                if (window.XMLHttpRequest) {
                    return new XMLHttpRequest();
                } else if(window.ActiveXObject) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                } else {
                    document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
                }
            }
function getChatContent()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("chat_content").innerHTML=xmlhttp.responseText;

//chat_div.innerHTML += '<p><div style="float:left;"><img src="' + avatar_node[0].firstChild.nodeValue + '" width="50"></div><div style="float:left;"><font class="chat_user">' + user_node[0].firstChild.nodeValue + '</font> <font class="chat_time">' + time_node[0].firstChild.nodeValue + '</font><br /><font class="chat_text">' + text_node[0].firstChild.nodeValue + '</font></div></p>';
document.getElementById("chat_content").scrollTop =  document.getElementById("chat_content").scrollHeight;
    }
  }
mTimer = setTimeout('getChatContent();',1000);

xmlhttp.open("GET","http://" + location.host + "/lib/getMessage.php?chat=1",true);
xmlhttp.send();
}

function showWorkoutInfo(str)
{
if (str=="")
  {
  document.getElementById("workoutRoutines").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp2=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
    {
    document.getElementById("workoutRoutines").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getInfo.php?id="+str,true);
xmlhttp.send();
}

[gamesmstr]

I see a few things.  You are creating a function to open an ajax object (createObject) and never really using it.  You are unnecessarily defining both xmlhttp and xmlhttp2 globally using createObject and then redefining them locally in the other functions. You are also mixing up your xmlhttp and xmlhttp2 variables in your function showWorkoutInfo.

 

Try something like this:

function createObject() {
if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
} else {
		document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
}
}

var lastMessage = 0;
var mTimer;
            
function getChatContent(){
var xmlhttp = createObject();
xmlhttp.open("GET","http://" + location.host + "/lib/getMessage.php?chat=1",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("chat_content").innerHTML=xmlhttp.responseText;

//chat_div.innerHTML += '<p><div style="float:left;"><img src="' + avatar_node[0].firstChild.nodeValue + '" width="50"></div><div style="float:left;"><font class="chat_user">' + user_node[0].firstChild.nodeValue + '</font> <font class="chat_time">' + time_node[0].firstChild.nodeValue + '</font><br /><font class="chat_text">' + text_node[0].firstChild.nodeValue + '</font></div></p>';
document.getElementById("chat_content").scrollTop =  document.getElementById("chat_content").scrollHeight;
    }
  }
mTimer = setTimeout('getChatContent();',1000);
xmlhttp.send();
}

function showWorkoutInfo(str){
var xmlhttp2 = createObject();
xmlhttp2.open("GET","getInfo.php?id="+str,true);
xmlHttp2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp2.onreadystatechange=function()
	{
	if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
		{
		document.getElementById("workoutRoutines").innerHTML=xmlhttp2.responseText;
		}
  }

xmlhttp2.send();
}