Beitrag erstellt am
25. Juli 2008
unter Technik.
Hier kannst Du die Kommentare per RSS 2.0 abonieren.
Du kannst entweder einen Kommentar oder einen Trackback von Deiner eigenen Seite hinterlassen.
Alle wollen es, keiner kann es, so geht es: AJAX
Man findet im Internet sehr viele AJAX Turorials, welche teilweise gut, teilweise aber auch sehr schlecht sind. Das Problem in der heutigen Zeit bzw. der Web 2.0 Bewegung ist, dass alle versuchen auf diese Zusammenführung der zwei alten Technologien XML und Javascript aufbauen wollen. Problem: Für die meisten ist es Neuland und gar nicht so einfach sich mit der neuen Technologie AJAX oder auch Asynchronous JavaScript and XML vetraut zu machen. Um euch das ein wenig zu erleichtern, hier ein simples Mini-Tutorial um AJAX bzw. einen AJAX Request besser zu verstehen:
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
In diesem ersten Teil passiert prinzipiell nichts anderes, als den bevorstehenden HTML Request auf den Client anzupassen. Das heißt auf Deutsch gesagt, dass wir analysieren mit welchem Browser unser Besucher gerade auf unseren Seiten herumdümpelt und in Anbetracht dessen die Methode mit der wir den Request durchführen wollen anpassen. Denn die Browser reagieren, wie fast immer, unterschiedlich.
var http = createRequestObject();
Um automatisch die oben erstellte Funktion zu durchlaufen bzw. den Request an den verwendeten Browser anzupassen, speichern wir den Rückgabewert “ro” in der Variable “http” und machen weiter…
function sndReq(action) {
http.open('get', 'file.php?action='+action);
http.onreadystatechange = handleResponse;
http.send(null);
}
sndReq ist die Funktion mit der wir die Anfrage an z.B. ein PHP-Script schicken, welches später die Anfrage auswertet. Hierbei öffnet man den Request mit der Methode GET und sendet ihn an die entsprechende Datei (hier: file.php). Dann sagen wir der Funktion noch wie es weitergeht indem wir “handleResponse” aufrufen.
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
Die Funktion handleResponse empfängt eigentlich nur die Antwort von der Funktion sndReq und gibt sie im Dokument aus. Man kann mit AJAX prüfen in welchem Status sich der Prozess befindet. Dabei bedeutet 0 = nicht inizialisiert, 1 = laden, 2 = fertig geladen, 3 = interaktiv und 4 = fertig. Wenn die Abfrage gleich 4, also fertig ist, geben wir das Ergebnis einfach aus.
Um diesen ganzen Ablauf nun aufzurufen reicht ein einfacher Link, welcher die Funktion sndReq aufruft:
<a href="javascript:sndReq('foo')">[foo]</a>
In der PHP Datei (file.php) können wir nun mit dem übergebenen Wert “foo” in der Datei switchen und so unterschiedliche Funktionen, je nach eingabe oder auswahl durch den User, ausführen:
switch($_REQUEST['action']) {
case 'foo':
// das was gemacht werden soll
echo "foo|foo done";
break;
// usw...
}
Die Funktion macht also das was getan werden muss, hier nämlich nichts ^^, und gibt per echo einen String zurück. Diesen String splitten wir anhand der Pipe (|) in der handleResponse Funktion in ein Array auf und haben so den DIV-Container (update[0]=”foo”, update[1]=”foo done”) lokalisiert (foo) und können ihm gleichzeitig seinen Ausgabetext (foo done) zuweisen.
Alles was noch zu tun ist, ist einen solchen DIV-Container als Platzhalter im HTML Dokument zu integrieren:
<div id="foo"></div>
Das Tutorial basiert auf diesem (Englisch).
Verwandte Beiträge:
deutsche Datenschützer wollen den Einsatz von Google Analytics verbieten...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
Thanks!
Habe gerade ein Snippet für 205 Euro an einen Kunden verkauft, was zu 90% aus Deinem Code besteht.
:-)