AJAX (Ajas) ist eine Webtechnologie, die die Interaktion mit dem Server ermöglicht, ohne die Seite neu zu laden. Beispiele für die Anwendung sind die Überprüfung der Verfügbarkeit eines Benutzernamens bei der Registrierung, das Hinzufügen eines Produkts zum Warenkorb ohne Neuladen, Google Suggest usw. AJAX basiert auf dem Objekt XMLHttpRequest. Wie der Name schon sagt, war es für die Arbeit mit XML konzipiert, was jedoch nicht davon abhält, es auch für andere Zwecke zu verwenden.
Das Funktionsprinzip ist wie folgt:
Das Skript besteht aus zwei Teilen
- Clientseitiger Teil: wird auf der Clientseite ausgeführt, geschrieben in JavaScript
- Serverseitiger Teil: wird auf dem Server ausgeführt, kann in jeder Programmiersprache geschrieben sein, die GET/POST-Anfragen versteht
Schritte zur Erstellung des clientseitigen Teils:
- Sammeln und Vorbereiten der Informationen für die Sendung der Anfrage an den Server;
- Erstellen einer Instanz des XMLHttpRequest-Objekts;
- Einrichten einer Ereignisbehandlungsfunktion für onreadystatechange. Dieses Ereignis tritt bei jeder Zustandsänderung des XMLHttpRequest-Objekts ein (siehe Tabelle unten). Diese Funktion ist im Wesentlichen der Hauptteil des Skripts, da hier die Verarbeitung der Serverantwort erfolgt;
- Öffnen der Verbindung unter Angabe des Anfrage-Typs (GET oder POST), der URL des serverseitigen Teils, des Flags für den asynchronen Modus und des Benutzernamens und Passworts (falls erforderlich);
- direktes Senden der Anfrage;
- Verarbeitung der Antwort des serverseitigen Teils.
Die Erstellung des XMLHttpRequest-Objekts unterscheidet sich für Internet Explorer und andere Browser, daher muss dieser Vorgang aus Kompatibilitätsgründen auf verschiedene Weise dupliziert werden:
01var req;0203if (window.XMLHttpRequest) // normal browser04req = new XMLHttpRequest(); 05else if (window.ActiveXObject) { //IE06try {07req = new ActiveXObject('Msxml2.XMLHTTP'); // IE разных версий08} catch (e){} // может создавать 09try { // объект по разному10req = new ActiveXObject('Microsoft.XMLHTTP');11} catch (e){}12}Verwendung der GET-Methode, Einrichten der Ereignisbehandlungsfunktion onreadystatechange und Senden der Anfrage:
1req.open("GET", url, true);2req.onreadystatechange = function() {3if (req.readyState == 4) { обработка результатов } 4}; 5req.send(null); //отправка запроса без параметров, т.к. они установлены в url In der Ereignisbehandlungsfunktion onreadystatechange muss unbedingt die Bedingung req.readyState == 4 überprüft werden, die angibt, dass die Daten geladen sind. Zusätzlich kann auch req.status == 200 überprüft werden. Siehe Tabellen unten.
Bei der Verwendung des XMLHttpRequest-Objekts mit der POST-Methode muss zusätzlich ein Header gesendet werden:
1req.open("POST", url, true);2req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");3req.onreadystatechange = function() {4if (req.readyState == 4) { обработка результатов } 5}; 6req.send('param1=1¶m2=0'); //теперь параметры передаются здесьMehrere Parameter werden durch kaufmännische Und-Zeichen (&) getrennt.
Vollständiges Beispiel:
01var req;0203if (window.XMLHttpRequest) req = new XMLHttpRequest(); 04else if (window.ActiveXObject) {05try {06req = new ActiveXObject('Msxml2.XMLHTTP');07} catch (e){}08try {09req = new ActiveXObject('Microsoft.XMLHTTP');10} catch (e){}11}1213if (req) {14req.onreadystatechange = function() {15if (req.readyState == 4 && req.status == 200) { alert(req.responseText); } 16}; 17req.open("POST", 'xmlhttp.php', true);18req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");19req.send('param=1&ajax=1');20} 21else alert("Браузер не поддерживает AJAX");Der Serverteil (URL in req.open) kann in jeder beliebigen Sprache geschrieben sein, solange er GET-/POST-Anfragen versteht. Der Rückgabewert (req.responseText) wird über die Standardausgabe generiert. Ein Beispiel für einen Serverteil in PHP:
1if(isset($_POST['param'])) 2echo ($_SERVER['REMOTE_ADDR'])?"Your IP ".$_SERVER['REMOTE_ADDR']:"IP неизвестен";Einige Referenzmaterialien:
Methoden der XMLHttpRequest-Klasse
| Methode | Beschreibung |
|---|---|
| abort() | bricht die aktuelle Anfrage ab |
| getAllResponseHeaders() | gibt die vollständige Liste der HTTP-Header als String zurück |
| getResponseHeader(headerName) | gibt den Wert des angegebenen Headers zurück |
| open(method, URL, async, userName, password) | definiert die Methode, die URL und andere optionale Parameter der Anfrage; der Parameter async bestimmt, ob die Arbeit im asynchronen Modus erfolgt |
| send(content) | sendet die Anfrage an den Server |
| setRequestHeader(label, value) | fügt der Anfrage einen HTTP-Header hinzu |
| overrideMimeType(mimeType) | ermöglicht die Angabe des MIME-Typs des Dokuments, wenn der Server ihn nicht übermittelt hat oder falsch übermittelt hat. Achtung: Diese Methode ist in Internet Explorer nicht vorhanden! |
Eigenschaften der Klasse XMLHttpRequest
| Eigenschaft | Beschreibung |
|---|---|
| onreadystatechange | Ereignis-Handler, der bei jeder Zustandsänderung des Objekts ausgelöst wird |
| readyState | gibt den aktuellen Zustand des Objekts zurück (0 — nicht initialisiert, 1 — geöffnet, 2 — Daten werden gesendet, 3 — Daten werden empfangen und 4 — Daten sind geladen) |
| responseText | Text der Antwort auf die Anfrage |
| responseXML | Text der Antwort auf die Anfrage im XML-Format, der anschließend mit DOM analysiert werden kann |
| status | gibt den HTTP-Status als Zahl zurück (404 — „Not Found“, 200 — „OK“ usw.) |
| statusText | gibt den Status als String zurück („Not Found“, „OK“ usw.) |