Einblenden von Divs, mehrere Ajax-Requests
jacquipre
- javascript
Hallo.
Ich habe Probleme mit meiner Webanwendung, die zum Teil mit Ajax arbeitet. Da ich auf dem Gebiet Javascript / Ajax noch neu bin, entschuldige ich mich schon mal im Voraus für vielleicht falsche Formulierungen.
Zu meiner Anwendung:
Es ist so, dass ich auf einer Seite mehrere HTML-Elemente habe, z.B. Texte oder Ähnliches. Zu jedem dieser Elemente habe ich ein Div definiert mit einer eindeutigen ID. Diese Divs sind zunächst 'invisible'. Wenn man nun auf einen Button oben auf der Seite klickt, dann sollen alle Divs der einzelnen Elemente "aufgeklappt" - also angezeigt werden.
Das klappt an sich ganz gut, nur bei jedem 2. oder 3. Aufruf werden nicht alle Divs angezeigt, sondern - scheinbar willkürlich - ein paar ausgelassen. Ich habe die Vermutung, dass der Grund dafür das gleichzeitige Absenden der Ajax-Requests ist und ein Browser (in meinem Fall der IE7) nicht so viele Requests gleichzeitig abarbeiten kann. Oder?
Ich habe jetzt schon im Internet einige Beispiele gefunden, die das Problem beheben sollen (auch hier im Forum), aber bei mir funktioniert das nicht so richtig. Vielleicht könnt ihr mir weiterhelfen?
Hier mal der Aufbau:
sendRequest('URL des zu ladenen Inhalts','','div_id', -1, -1);
queue = new Array();
function sendRequest(file, queryString, div, xpos, ypos)
{
var xmlHttp = null;
// Mozilla, Opera, Safari sowie Internet Explorer 7
if (typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp)
{
// Internet Explorer 6 und älter
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttp = null;
}
}
}
if(xmlHttp)
{
/* Request Daten in die Warteschlange setzen, falls der vorherige noch nicht abgeschlossen ist */
if(xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3)
{
queueLength = queue.length;
queue[queueLength] = new Array();
queue[queueLength][0] = file;
queue[queueLength][1] = queryString;
queue[queueLength][2] = div;
document.getElementById(div).innerHTML = 'In der Warteschlange...'; //Optionaler Infotext
}
else
{
if(queryString == "")
{
xmlHttp.open('GET', file, true);
}
else
{
xmlHttp.open('POST', file, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(queryString);
}
xmlHttp.onreadystatechange = function ()
{
if(xmlHttp.readyState == 2)
{
document.getElementById(div).innerHTML = 'Lade Inhalt...';
}
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
onDownloadDone(xmlHttp.responseText, div, xpos, ypos);
}
else if(xmlHttp.status == 404)
{
document.getElementById(div).innerHTML = 'Die Datei wurde nicht gefunden!';
}
/* Warteschlange abarbeiten */
queueLength = queue.length;
if(queueLength != 0)
{
sendRequest(queue[0][0], queue[0][1], queue[0][2], -1, -1);
queue.shift(); //Erstes Element entfernen, den Rest eine Position nach vorne rücken
}
}
};
if(queryString == "")
{
xmlHttp.send(null);
}
}
}
}
Was läuft da schief? Habt ihr eine Idee?
Im Firefox funktioniert es einwandfrei, im IE7 habe ich Probleme...
Grüße,
Jacqueline.