...

View Full Version : multiple ajax calls simultaneously



woodwood
03-09-2011, 03:15 PM
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
03-09-2011, 03:26 PM
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
03-09-2011, 04:02 PM
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
03-09-2011, 04:25 PM
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
03-11-2011, 08:33 PM
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();
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum