multiple ajax calls simultaneously

[woodwood]

Hey,

In the following code the function showdivs() is called on body load, though only the second div is loaded. I've been searching on the web for similar problems and I know it has to do with the handler function, which is supposed to be run twice but now just cancels the first function as soon as the second one is called. Could anybody explain me how to solve this?
TIA,

Woods

var time_variable;
 
function getXMLObject()  //XML OBJECT
{
   var xobject = false;
   try {
     xobject = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xobject = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xobject = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xobject && typeof XMLHttpRequest != 'undefined') {
     xobject = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xobject;  // Mandatory Statement returning the ajax object created
}
 
var xobject = new getXMLObject();    //xmlhttp holds the ajax object
 
 
function handler() {
    var getdate = new Date();
 
    if(xobject) {
        xobject.open("POST",phpFile,true);
        xobject.onreadystatechange  = function() {
            if (xobject.readyState==4) {
                if(xobject.status == 200) {
                    document.getElementById(divID).innerHTML=xobject.responseText;
                }
                else {
                    alert('error');
                }
            }
        }
        xobject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xobject.send(postVars);
    } 
}
 
 
function showdiv1() {
      divID = "div1"; //define html div
      phpFile = "showdiv1.php"; //define file to be loaded
      postVars = "null"; //define post vars
      new handler();
}
 
function showdiv2() {
      divID = "div2"; //define html div
      phpFile = "showdiv2.php"; //define file to be loaded
      postVars = "null"; //define post vars
      new handler();
}
 
function showdivs() {
showdiv1();
showdiv2();
}

[devnull69]

Two possible solutions:

1) use two or more different XMLHttpRequest objects (yours is called xobject) or
2) queue your requests so that the next request is started only after the previous one has finished (readyState == 4)

[woodwood]

thanks devnull69,

First solutions wouldn't be an option for me since I really need to be able to run different functions standalone..

Second one is exactly what I was hoping somebody would tell me... but could you show me how to create different objects in my code? I tried different ways but didn't succeed. thanks

[devnull69]

Now I'm confused

The first solution is the one which creates different objects so I assume you want to know more about it

Currently you have this line of code

var xobject = new getXMLObject();

First of all, you can omit the new keyword here as the function already returns a new object. Also, the calls to the handler() function do not need to have the new keyword.

var xobject = getXMLObject();

You can create more objects like that

var xobject = getXMLObject();
var xobject2 = getXMLObject();

Now instead of starting all of the requests with the first object, you can start the second request with the second object and so on.

[woodwood]

Ah I was confused myself, you're right, thanks anyhow...
Your possible solution only works when there's a fixed number of calls running simultaneously... I fixed it differently though:

- I made var xobject refer to a different (global) object in the getXMLObject() function.
- The var xobject is now called inside the handler function

var time_variable;
 
function getXMLObject()  //XML OBJECT
{
   var gobject = false;
   try {
     gobject = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       gobject = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       gobject = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!gobject && typeof XMLHttpRequest != 'undefined') {
     gobject = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return gobject;  // Mandatory Statement returning the ajax object created
}
	

function handler(div) {

	var xobject = new getXMLObject();
	var randint = Math.random();
	var getdate = new Date();
		
		xobject.open("POST",phpFile,true);
		xobject.onreadystatechange  = function() {
			if (xobject.readyState==4) {
				if(xobject.status == 200) {
					document.getElementById(div).innerHTML=xobject.responseText;
				}
				else {
					alert('error');
				}
			}
		}
		xobject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xobject.send(postVars);
	} 


function showdiv1() {
  	divID = "div1"; //define html div
  	phpFile = "showdiv1.php"; //define file to be loaded
  	postVars = "var1=somevalue"; //define post vars
  	handler(divID);
}

function showdiv2() {
  	divID = "div2"; //define html div
  	phpFile = "showdiv2.php"; //define file to be loaded
  	postVars = "var2=somevalue"; //define post vars
  	handler(divID);
}

function showdivs() {
showdiv1();
showdiv2();
}