Die Tipps-Datenbank

Das Tippsforum

Erste Schritte mit AJAX

Um einen HTTP-Request mittels JavaScript an einen Server absetzen zu können, benötigt man eine Instanz einer Klasse, welche diese Funktionalität bietet. Solch eine Klasse, genannt XMLHTTP, wurde ursprünglich im Internet Explorer als ein ActiveX-Objekt eingeführt. Später implementierten Mozilla, Safari und andere Browser eine Klasse namens XMLHttpRequest, welche die Methoden und Eigenschaften des originalen ActiveX-Objektes von Microsoft unterstützt.

Einige Versionen einiger Mozilla-basierter Browser werden nicht korrekt arbeiten, wenn die Antwort des Servers keinen XML mime-type im Header hat. Um dem entgegenzuwirken, kann man einen zusätzlichen Methodenaufruf absetzen, um den vom Server gesendeten Header zu überschreiben – für den Fall, dass dessen mime-type nicht text/xml lautet. Im nächsten Schritt entscheidet man, was zu tun ist, nachdem man vom Server eine Antwort zu dem abgesetzten Request bekommen hat. An dieser Stelle muss man dem HTTP Request-Objekt lediglich mitteilen, welche JavaScript-Funktion die Antwort abarbeiten soll. Dies erreicht man, indem man die onreadystatechange-Eigenschaft des Objektes genauso nennt wie die JavaScript-Funktion, welche man benutzen möchte. Zur Erinnerung: beim Abschicken des Requests wurde der Name einer JavaScript-Funktion mitgegeben, welche die Antwort abarbeiten soll.

http_request.onreadystatechange = nameDerFunktion;

Schauen wir mal, was diese Funktion tun sollte. Zuerst muss die Funktion den Status des Requests abfragen. Hat dieser den Wert 4, bedeutet das, dass die Antwort des Servers vollständig empfangen wurde und dass sie nun bearbeitet werden kann. Methoden des XMLHttpRequest Objekts abort() Bricht die aktuelle Anfrage ab

getAllResponseHeaders()
Gibt den Antwort Header als String zurück

getResponseHeader(”xyz”)
Gibt Den Header xyz zurück

open(”method”, “URL“[, asyncFlag[, “userName”[, “password”]]])
Stellt die Verbindung zur Zielseite her

send(daten)
Sendet Daten an den Server

setRequestHeader(”key”, “value”)
Setzen von Header

setMimeType(”mimetype”)
Überschreibt den MimeType der angeforderten Daten

Eigenschaften des XMLHttpRequest Objekts

onreadystatechange
Callbackfunktion, die bei Events aufgerufen werden soll

readyState
Aktueller Status der Anfrage:

• 0 : Noch keine Verbindung hergestellt (open nicht aufgerufen?)

• 1 : Noch keine Anfrage gestellt (send nicht aufgerufen?)

• 2 : Anfrage gestellt, aber noch nicht abgeschlossen. Header und Status verfügbar

• 3 : Response Daten werden übertragen

• 4 : Anfrage abgeschlossen, alle Daten übertragen

responseText
Ergebnis der Anfrage als Text

responseXML
Ergebnis als XML (Falls gültiges XML-Dokument. Sonst null)

status
HTTP-Status der Anfrage (200=OK)

statusText HTTP-Status im Textformat

Jetzt könnten wir Beispielsweise ein Script schreiben, welches eine Datei ausließt und diese dann ausgiebt:
ajax1.html

<script type="text/javascript" language="javascript">    var http_request = false;function macheRequest(url) {http_request = false;if (window.XMLHttpRequest) { // Mozilla, Safari,...http_request = new XMLHttpRequest();if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/xml');

// zu dieser Zeile siehe weiter unten

}

} else if (window.ActiveXObject) { // IE

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

if (!http_request) {

alert('Ende   Kann keine XMLHTTP-Instanz erzeugen');

return false;

}

http_request.onreadystatechange = alertInhalt;

http_request.open('GET', url, true);

http_request.send(null);

}

function alertInhalt() {

if (http_request.readyState == 4) {

var answer = http_request.responseText;

if(document.getElementById("inhalt").innerHTML != answer){

document.getElementById("inhalt").innerHTML = answer;

}

else{

document.getElementById("inhalt").innerHTML = "";

}

}

}

</script>

<span

style="cursor: pointer; text-decoration: underline"

onclick="macheRequest('test.html')">Einen Request absetzen

</span>

<div id="inhalt"></div>

Dieses Script ließt den Inhalt der test.html aus. Diese hat den Inhalt:

 Ich bin die Ausgabe

Natürlich kann man auch XML-Dateien auslesen, das geht so:

ajax2.html:



<script type="text/javascript" language="javascript">    var http_request = false;function macheRequest(url) {http_request = false;if (window.XMLHttpRequest) { // Mozilla, Safari,...

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/xml');

// zu dieser Zeile siehe weiter unten

}

} else if (window.ActiveXObject) { // IE

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

if (!http_request) {

alert('Ende   Kann keine XMLHTTP-Instanz erzeugen');

return false;

}

http_request.onreadystatechange = alertInhalt;

http_request.open('GET', url, true);

http_request.send(null);

}

function alertInhalt() {

if (http_request.readyState == 4) {

var xmldoc = http_request.responseXML;

var root_node = xmldoc.getElementsByTagName('nachricht').item(0);

var answer = root_node.firstChild.data;

//var answer = http_request.responseText;

if(document.getElementById("inhalt").innerHTML != answer){

document.getElementById("inhalt").innerHTML = answer;

}

else{

document.getElementById("inhalt").innerHTML = "";

}

}

}

</script>

<span

style="cursor: pointer; text-decoration: underline"

onclick="macheRequest('test.xml')">Einen Request absetzen

</span>

<div id="inhalt"></div>

In der XML-Datei “test.xml” steht dann:



<?xml version="1.0"?><nachricht>Wie gehst?!</nachricht>

Mit unserem bissherigem Können, könnten wir auch ein Script schreiben, welches mit AJAX und PHP arbeitet. D.h. wir rufen mit Hilfe einer PHP-Datei die aktuelle Uhrzeit ab.

ajax3.html



<script type="text/javascript" language="javascript">    var http_request = false;function macheRequest(url) {

http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/xml');

// zu dieser Zeile siehe weiter unten

}

} else if (window.ActiveXObject) { // IE

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

if (!http_request) {

alert('Ende   Kann keine XMLHTTP-Instanz erzeugen');

return false;

}

http_request.onreadystatechange = alertInhalt;

http_request.open('GET', url, true);

http_request.send(null);

}

function alertInhalt() {

if (http_request.readyState == 4) {

var answer = http_request.responseText;

//var answer = http_request.responseText;

if(document.getElementById("inhalt").innerHTML != answer){

document.getElementById("inhalt").innerHTML = answer;

}

else{

document.getElementById("inhalt").innerHTML = "";

}

}

}

setInterval("macheRequest('uhrzeit.php')",1000);

</script>

Dieses Script gibt die aktuelle Serverzeit aus:<br>

<div id="inhalt">Lade..</div>

In der uhrzeit.php müsste dann folgendes stehen:

uhrzeit.php



<?php

echo date("H:i:s", time());

?>

Abschluss Im ersten Kapitel haben wir angesprochen, dass das Navigieren mit den Vor- und Zurückbutton sehr schwierig ist, doch so schwierig ist es nun auch wieder nicht…
Hier ein Beispiel, wo das Navigieren mit den Buttons klappt: http://ajax.solin.ch/
Wie man sieht Arbeitet dieser “Ajaxaner” mit Ankern (<a name=”so_und_so”>) dadurch ist das Navigieren möglich… (näheres siehe Source-Code auf der Seite).

Dieses Tutorial wurde von Netbuster geschrieben und von Think bearbeitet. Es steht unter Creativ Commons 2.0. Copyright by ajax-community.de

Verwandte Artikel

• Keine verwandten Artikel