ajax.request und ajax.updater
einer der vielen vorteile bei der verwendung von prototype ist die recht einfache verwendung von ajax requests. so braucht man sich überhaupt nicht um kümmern, ob nun eine instanz vom XHMHttpRequest() (firefox, opera, safari) oder vom ActiveXObject("Msxml2.XMLHTTP") bzw ActiveXObject("Microsoft.XMLHTTP") (internet explodierer) erzeugt werden muss.
da sich nun ajax.request und ajax.updater recht ähnlich sehen, kann man durch die "macht der gewohnheit" auch etwas übersehen. ich habe es also geschafft, dass etwas doppelt geladen wird und wusste zuerst nicht warum, obwohl die lösung doch ganz einfach ist/war ;)
hier mal die beiden, die das gleiche ergebnis liefern (farblich gekennzeichnet):
wie zu sehen ist, erspart man sich durch den ajax.updater (= die spezielle form des ajax.requests) ein bisschen tipparbeit. vor allem zu empfehlen ist der updater, wenn die zu ladende datei ohne weitere verarbeitung gleich in einen container geladen werden soll, da dies automatisch geschieht.
aus gründen der interaktion ist es sinnvoll bei größeren ladezeiten den benutzer über den ladezustand zu informieren, dass es nicht den anschein hat, dass sich nichts tut. meist wird hier ein ladesymbol angezeigt (vgl sanduhr bei windows).
bei einem vorhanden ajax.request sieht dies möglicherweise so aus (vereinfacht dargestellt):
hier wird beim erzeugen des requests (onCreate) das ladesymbol in den container geladen und wenn die datei fertig geladen wurde (onComplete) durch den eigentlichen content ersetzt.
da aber bereits ein ajax.updater vorhanden war und ich einfach nur die onCreate und onComplete funktion kopiert habe (i love copy&paste although sometimes it's evil), kam es zum doppelten laden:
glücklicherweise kam ich bei genauerem hinsehen gleich auf die lösung.
mfg mailo
da sich nun ajax.request und ajax.updater recht ähnlich sehen, kann man durch die "macht der gewohnheit" auch etwas übersehen. ich habe es also geschafft, dass etwas doppelt geladen wird und wusste zuerst nicht warum, obwohl die lösung doch ganz einfach ist/war ;)
hier mal die beiden, die das gleiche ergebnis liefern (farblich gekennzeichnet):
new Ajax.Request('file.html', {
method:'post',
evalScripts:true,
onComplete:function(transport) {
$('container').update(transport.responseText);
}
});
method:'post',
evalScripts:true,
onComplete:function(transport) {
$('container').update(transport.responseText);
}
});
new Ajax.Updater('container','file.html', {
method:'post',
evalScripts:true
});
method:'post',
evalScripts:true
});
wie zu sehen ist, erspart man sich durch den ajax.updater (= die spezielle form des ajax.requests) ein bisschen tipparbeit. vor allem zu empfehlen ist der updater, wenn die zu ladende datei ohne weitere verarbeitung gleich in einen container geladen werden soll, da dies automatisch geschieht.
aus gründen der interaktion ist es sinnvoll bei größeren ladezeiten den benutzer über den ladezustand zu informieren, dass es nicht den anschein hat, dass sich nichts tut. meist wird hier ein ladesymbol angezeigt (vgl sanduhr bei windows).
bei einem vorhanden ajax.request sieht dies möglicherweise so aus (vereinfacht dargestellt):
new Ajax.Request('file.html', {
method:'post',
evalScripts:true,
onCreate:function() {
$('container').update("<img src=\"path/to/loading.gif\" />");
},
onComplete:function(transport) {
$('container').update(transport.responseText);
}
});
method:'post',
evalScripts:true,
onCreate:function() {
$('container').update("<img src=\"path/to/loading.gif\" />");
},
onComplete:function(transport) {
$('container').update(transport.responseText);
}
});
hier wird beim erzeugen des requests (onCreate) das ladesymbol in den container geladen und wenn die datei fertig geladen wurde (onComplete) durch den eigentlichen content ersetzt.
da aber bereits ein ajax.updater vorhanden war und ich einfach nur die onCreate und onComplete funktion kopiert habe (i love copy&paste although sometimes it's evil), kam es zum doppelten laden:
new Ajax.Updater('container','file.html', {
method:'post',
evalScripts:true,
onCreate:function() {
$('container').update("<img src=\"path/to/loading.gif\" />");
},
onComplete:function(transport) {
$('container').update(transport.responseText);
}
});
method:'post',
evalScripts:true,
onCreate:function() {
$('container').update("<img src=\"path/to/loading.gif\" />");
},
onComplete:function(transport) {
$('container').update(transport.responseText);
}
});
glücklicherweise kam ich bei genauerem hinsehen gleich auf die lösung.
mfg mailo
mailo - 7. Feb, 22:00