meerdere ajax calls tegelijkertijd

[woodwood]

Hallo,

in de volgende code wordt de functie showdivs() geladen on body load. Echter wordt alleen de tweede functie (showdiv2) in deze in deze functie geladen. Googlen leert dat het te maken heeft met globals die elkaar in de weg zitten of zoiets, waardoor de eerste functie geannuleerd wordt zodra de tweede functie wordt aangeroepen. Weet echter niet hoe ik m'n script moet herschrijven om dit te omzeilen. Iemand?
Alvast bedankt

[JS]
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();
}
[/JS]

 

[That Guy]

Je hebt 1x de global xobject, en die gebruik je dus dubbel. Maak van dit stuk:[JS]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);
}
}
[/JS]dit:[JS]function handler() {
var getdate = new Date();

var xobject = new getXMLObject(); //xmlhttp holds the ajax object

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);
}
}[/JS]Ohja, trouwens, new gebruik je alleen voor objecten. Niet bij functie-calls. Dus, bij de functies showdiv1 en showdiv2 moet je even die 2x 'new' weghalen.

 

[That Guy]

Oh my, ik zie nu dat het gehele script niet helemaal soepeltjes gaat lopen zo (niet lopen bedoel ik). Heb je het script zelf geschreven of overgenomen?

In ieder geval, je kan beter je functie parameters geven ipv. met (...!) ongedefineerde variabelen.

Hier is het complete script (ongetest, maargoed)[js]function xhttpObject()
{
// okay, serieus? Browsers die VOOR ie6 kwamen bestaan echt niet meer hoor.

if(XMLHttpRequest)
{
return new XMLHttpRequest();
}else
if(ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert('onoz, no xhttp!');
return null;
}
}


function doStuff(file, divID)
{
var xhttp = new xhttpObject();

// error handling zit al in xhttpObject...

xhttp.open('post', file, true);


// addEventListener / attachEvent is mooier, maargoed.
xhttp.onreadystatechange = function()
{
if(this.status == 200 && this.readyState == 4)
{
document.getElementById(id).innerHTML = this.responseText;
}
}

//xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // onnodig? Is geen form...

xhttp.send(null);
}



function showdivs()
{
// moar dan 3? even een loopje ofzo.
doStuff('showdiv1.php', 'div1');
doStuff('showdiv2.php', 'div2');
}[/js]

 

[woodwood]

Dank voor de reacties en het meedenken; heb het nu als volgt opgelost:

[JS]
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();
}
[/JS]