Hallo,
ich werde momentan wahnsinnig mit dem AJAX-Verhalten des Firefox bzw. dessen Umgang mit dem onreadystatechange-Event. Folgendes Beispiel:
<html>
<head>
<script type="text/javascript">
[code lang=javascript]
var ajax = null;
if (typeof XMLHttpRequest != 'undefined')
{
ajax = new XMLHttpRequest();
}
if (!ajax)
{
try
{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
ajax = null;
window.alert('Ihr Browser unterstuetzt keine AJAX-Funktionalitaet. Wir empfehlen, einen aktuellen Browser zu verwenden.');
}
}
}
function funktionEins()
{
if(ajax)
{
ajax.open('POST', 'target.php', true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
ajax.onreadystatechange = function()
{
if(ajax.readyState == 4)
{
alert("Funktion 1");
loremIpsum();
}
};
ajax.send(null);
}
}
function loremIpsum()
{
if(ajax)
{
ajax.open('POST', 'target.php', true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
ajax.onreadystatechange = function()
{
if(ajax.readyState == 4)
{
alert("Lorem Ipsum");
}
};
ajax.send(null);
}
}
</script>
</head>
<body>
<input type="button" value="Funktion 1" onclick="funktionEins()" />
</body>
</html>
[/code]
Der Knackpunkt besteht darin, dass hier eine AJAX-Funktion aus einer AJAX-Funktion heraus aufgerufen wird.
Klickt man im IE 7 auf den Button, wird "Funktion 1" - "Lorem Ipsum" ausgegeben - wie man es erwarten würde.
Der Firefox 2.0 gibt folgendes aus: "Funktion 1" - "Funktion 1" - "Lorem Ipsum".
D.h. der onreadystatechange-Handler von funktionEins() fängt hier im Firefox das neue Request (bzw. das stateChange-Event) aus loremIpsum() ab und reagiert darauf - aber nur beim ersten Mal...?! Ich begreife die Logik nicht - wenn der Handler einer "übergeordneten" AJAX-Funktion auf ein Request einer von ihm aufgerufenen AJAX-Funktion reagiert, müsste das Resultat doch eine Endlosschleife sein, weil immer wieder loremIpsum() ausgeführt werden sollte, was wiederum eine stateChange-Event triggert, welches wieder von funktionEins() abgefangen wird etc. ?!
Um beide Browser dazu zu bringen, das gleiche zu tun, bediene ich mich momentan eines "schmutzigen Tricks" - ich mache mir eine Funktion newAjaxInstance(), die der globalen Variable ajax ein neues XMLHttpRequest-Objekt zuweist, also:
function newAjaxInstance()
{
if (typeof XMLHttpRequest != 'undefined')
{
ajax = new XMLHttpRequest();
}
if (!ajax)
{
try
{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
ajax = null;
window.alert('Ihr Browser unterstuetzt keine AJAX-Funktionalitaet. Wir empfehlen, einen aktuellen Browser zu verwenden.');
}
}
}
}
Diese Funktion rufe ich in der onreadystatechange-Funktion von funktionEins() auf.
Tue ich das, verhält sich der FF wie der IE und gibt "Funktion 1" - "Lorem Ipsum" aus. Nur ist diese "Holzhammer"-Vorgehensweise vermutlich nicht allzu elegant... Gibt es evtl. eine andere Möglichkeit dem Firefox beizubringen, nicht mehr auf "untergeordnete" readyStateChanges zu reagieren? Werde ich den Handler der "übergeordneten" Funktion auch anders los?
Gruß,
Christian