AJAX
Ajax steht für "Asynchronous JavaScript and XML" und dient der asynchronen Datenübertragung zwischen dem Browser und einem Server. Es ermöglicht Anfragen an den Server zu stellen ohne das die HTML Seite neu geladen wird. Der Vorteil besteht darin das nur gewisse Teile einer HTML Seite oder Nutzdaten nachgeladen werden.
...fast jeder hat schon einmal davon gehört, aber was genau ist das eigentlich? Der
gebildete Informatiker würde jetzt sagen: AJAX ist ein Apronym für die Wortfolge
„Asynchronous Java Script and XML“. Da das aber keinem so wirklich weiterhelfen würde
sagen wir doch einfach: AJAX ist eine auf Javascript basierende Technik um Webseiten
asynchron nachzuladen oder kurz gesagt um einzelne Bereiche von Webseiten dynamisch
nachzuladen ohne dabei die ganze Seite neu laden zu müssen.
Oft verwendet man AJAX in Webanwendungen um ähnliches Verhalten wie auf dem
Desktop simulieren zu können. Im Folgenden wollen wir eine Javascript-Funktion
entwickeln, die es uns ermöglicht einen AJAX-Request abzuschicken und die Antwort zu
verarbeiten.
Zuerst einmal brauchen wir einen sinnigen Funktionsnamen z.B. ajaxCall:
function ajaxCall() {
}
Als nächstes brauchen wir eine Variable in der wir dann das Request-Objekt ablegen
können und hier beginnt dann auch direkt der Spaß mit den unterschiedlichen Browsern,
da natürlich nicht alle das gleiche Request-Objekt unterstützen. Wir müssen das hier also
unterscheiden. Sollte jede Möglichkeit fehlschlagen geben wir natürlich netterweise eine
Fehlermeldung aus, die den Anwender darauf hinweist, dass sein Browser AJAX nicht
unterstützt. Unsere Funktion sieht dann so aus:
function ajaxCall() {
var ajax;
try {
ajax = new XMLHttpRequest();
} catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support AJAX.");
return false;
}
}
}
}
Nun braucht unsere Funktion natürlich noch ein paar Parameter, damit sie auch weiß, was
sie eigentlich abfragen soll und wo das Ergebnis rein soll (es geht hier ja darum einzelne
Bereiche einer Webseite nachzuladen). Also ergänzen wir zwei Parameter mit denen
einmal die URL übergeben wird, die abgefragt werden soll und einmal die Id eines Divs,
das als Ziel für den Inhalt dient, den wir aus dem Request zurück bekommen:
function ajaxCall(url, targetDiv) {
var ajax;
try {
ajax = new XMLHttpRequest();
} catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support AJAX.");
return false;
}
}
}
}
Jetzt sind wir so weit, dass wir den Request abschicken und die Antwort verarbeiten
können. Um die Antwort auch mitzubekommen, müssen wir zunächst eine Funktion im
onreadystatechange-Listener des Request-Objekts definieren, die dann die Antwort
verarbeitet. In unserem Fall heißt Verarbeiten, dass ganz simpel die Antwort des Requests
als innerHTML in das Target-Div geschrieben wird:
function ajaxCall(url, targetDiv) {
var ajax;
try {
ajax = new XMLHttpRequest();
} catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support AJAX.");
return false;
}
}
}
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
document.getElementById(targetDiv).innerHTML = ajax.responseText;
} else {
alert("Error: "+ ajax.statusText +" "+ ajax.status);
}
}
}
}
Jetzt müssen wir nur noch den Request abschicken und fertig wäre die erste, simple
AJAX-Funktion, welche dann so aussieht:
function ajaxCall(url, targetDiv) {
var ajax;
try {
ajax = new XMLHttpRequest();
} catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support AJAX.");
return false;
}
}
}
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
document.getElementById(targetDiv).innerHTML = ajax.responseText;
} else {
alert("Error: "+ ajax.statusText +" "+ ajax.status);
}
}
}
ajax.open("get", url, true);
ajax.send(null);
}
Es gibt nun natürlich noch ein paar Möglichkeiten, um die ganze Sache etwas flexibler zu
gestalten. Zuerst einmal kann man für den Fall, dass kein Target-Div übergeben wurde ein
Standard-Ziel angeben, welches ich gerne „mainDiv“ nenne und welches innerhalb der
Webseite den Haupt-Inhaltsbereich darstellt. So kann man sich dann z.B. bei Aufrufen, die
neue Bereiche im Hauptmenü der Seite öffnen die Angabe eines Ziels ersparen:
function ajaxCall(url, targetDiv) {
var ajax;
if (!targetDiv) {
targetDiv = 'mainDiv';
}
try {
ajax = new XMLHttpRequest();
} catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support AJAX.");
return false;
}
}
}
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
document.getElementById(targetDiv).innerHTML = ajax.responseText;
} else {
alert("Error: "+ ajax.statusText +" "+ ajax.status);
}
}
}
ajax.open("get", url, true);
ajax.send(null);
}
Weiterhin besteht natürlich die Möglichkeit, dass man einfach nur einen Request
abschicken möchte, der z.B. etwas in eine Datenbank speichert und überhaupt keine
Antwort benötigt. Um diesen Fall auch abdecken zu können erweitern wir die Funktion um
den Parameter „noResponse“ über den wir steuern, ob innerhalb des
onreadystatechange-Listeners die erhaltene Antwort in dsa Target-Div geschrieben
werden soll oder nicht:
function ajaxCall(url, targetDiv, noResponse, noAjax) {
var ajax;
if (!targetDiv) {
targetDiv = 'mainDiv';
}
try {
ajax = new XMLHttpRequest();
} catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support AJAX.");
return false;
}
}
}
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
if (!noResponse) {
document.getElementById(targetDiv).innerHTML = ajax.responseText;
}
} else {
alert("Error: "+ ajax.statusText +" "+ ajax.status);
}
}
}
ajax.open("get", url, true);
ajax.send(null);
}
Zusätzlich gibt es jetzt auch noch die Möglichkeit, die Funktion so zu erweitern, dass man
damit auch ganz normale Requests abschicken kann und AJAX quasi abschalten. Dazu
fügen wir noch einen weiteren Parameter hinzu, über den wir steuern, ob der
onreadystatechange-Listener gesetzt werden soll oder nicht:
function ajaxCall(url, targetDiv, noResponse, noAjax) {
var ajax;
if (!targetDiv) {
targetDiv = 'mainDiv';
}
try {
ajax = new XMLHttpRequest();
} catch(e) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support AJAX.");
return false;
}
}
}
if (!noAjax) {
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
if (!noResponse) {
document.getElementById(targetDiv).innerHTML = ajax.responseText;
}
} else {
alert("Error: "+ ajax.statusText +" "+ ajax.status);
}
}
}
}
ajax.open("get", url, true);
ajax.send(null);
}
Nun haben wir eine fertige, kleine AJAX-Funktion und dabei auch noch festgestellt, dass
sich hinter dem ganzen Geheimnis eigentlich gar nicht so viel versteckt. Auch das
Verwenden der Funktion innerhalb einer Webanwendung ist jetzt keine Kunst mehr. Ein
Aufruf, der das Ergebnis einer PHP-Datei in ein Div schreibt würde jetzt zum Beispiel so
aussehen:
ajaxCall('php/forms/login.php', 'menuRight');
Mit diesem Aufruf wird schlichtweg eine Formularseite in einen Menubereich der Webseite
geladen und dort dargestellt. Die PHP-Datei gibt dabei den HTML-Code des Formulars
zurück.
Das soll dann aber jetzt auch erst einmal genug sein. Es gibt natürlich sicherlich noch
etliche Möglichkeiten die Funktion weiter zu ergänzen, aber an dieser Stelle wollen wir
zunächst aufhören. Viel Spaß beim Experimentieren!
|