Wolltet ihr schon immer Ajax kennen lernen? Hier gibt es den Ajax Crashkurs.
Ajax in weniger als 5 Minuten? Dieses kleine Ajax-Tutorial bringt euch das grundlegende Wissen um Ajax-Anwendungen zu bauen und das Funktionsprinzip von Ajax zu verstehen. Vorraussetzung ist allerdings, dass ihr ein wenig Javascript könnt und ein wenig PHP-Kenntnisse mitbringt, die helfen beim verstehen des PHP-Scripts.
Ajax-Tutorial
Wir erstellen zwei Dateien. Eine Datei, mit der wir die Ajax-Anfrage starten und eine Datei, die für die Antworten zuständig ist. Die Datei ajax.html ist die Datei mit der wir den Ajax-Request bauen. Das vollständige Script steht im Listing 1. Ihr könnt die Datei auch hier fertig testen.
Listing 1 - ajax.html
Download Code!
<html>
<title>Ajax-Tutorial Entwickler-Blog.de</title>
<head>
</head>
<body>
<script type="text/javascript">
// Gibt das HTTP-Request Objekts zurück
function getXMLHttpRequestObject() {
var requestObject;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer") {
requestObject = new ActiveXObject("Microsoft.XMLHTTP");
}else{
requestObject = new XMLHttpRequest();
}
return requestObject;
}
// Löst eine Get-Anfrage an das Script ajaxResponse.php aus
function ajaxGet(text) {
httpRequestObject.open('GET', 'ajaxResponse.php?query='+text);
httpRequestObject.onreadystatechange = ajaxEvent;
httpRequestObject.send(null);
}
// Diese Funktion wird aufgerufen, wenn eine Ajax-Anfrage abgesendet wurde.
function ajaxEvent() {
// Ajax-Anfrage erfolgreich?
if(httpRequestObject.readyState == 4){
// Holt die Antwort aus der Anfrage
var ajaxResponse = httpRequestObject.responseText;
// Ändert den Textinhalt, des HTML-Elements mit der ID ajax
document.getElementById("ajax").innerHTML = ajaxResponse;
}
}
// Holen des HTTP-Request Objekts
var httpRequestObject = getXMLHttpRequestObject();
</script>
<h1 id="ajax">Text text</h1>
<a href="javascript:ajaxGet('hello');">Hallo?</a><br/>
<a href="javascript:ajaxGet('test');">Ajax?</a><br/>
<a href="javascript:ajaxGet('42');">Wie ist die Antwort auf das Leben, dem Universum und dem ganzen Rest?</a><br/>
</body>
</html>
Die andere Datei, hat den Namen ajaxResponse.php den Inhalt der Datei könnt ihr in Listing 2 sehen. Sie verarbeitet den HTTP-GET-Request und gibt entsprechend des Parameter-Wertes ($_GET['query]) etwas zurück
Listing 2 - ajaxResponse.php
Download Code!
<?php
if(isset($_GET['query'])) { switch ($_GET['query']) {
case 'hello':
break;
case '42':
echo 'Die Antwort ist 42!'; break;
default:
echo 'Hmm? Kenn ich nicht!'; break;
}
}
?>
Ajax-Script Erklärung
Das Grundlegende, was aufjedenfall gebraucht wird ist das XMLHttpRequest Object. Mit dem XMLHttpRequest ist es möglich beliebigen Daten über das HTTP-Protokoll zu transferieren.
Das XMLHttpRequest holen wir uns über die Funktion getXMLHttpRequestObject(). Desweitern wird eine Funktion benötigt, mit der wir die Ajax-Anfrage absenden können. Das macht die Funktion ajaxGet(). Schlussendlich brauchen wir noch einen Evenhandler, der Aufgerufen wird, wenn sich der der Status ändert. Der Eventhandler heisst in unserem Fall ajaxEvent().
Bei dem Aufrufen der Datei ajax.html, wird das XMLHttpRequest-Objekt instanziert. Das Objekt steht nun in der Variablen httpRequestObject bereit.
Im unteren HTML-Teil könnt ihr eine Überschrift und drei Links sehen. Im Detail nochmal in Listing 3.
Listing 3
Download Code!
<h1 id="ajax">Text text
</h1> <a href="javascript:ajaxGet('hello');">Hallo?
</a><br/> <a href="javascript:ajaxGet('test');">Ajax?
</a><br/> <a href="javascript:ajaxGet('42');">Wie ist die Antwort auf das Leben, dem Universum und dem ganzen Rest?
</a><br/>
Klickt ihr nun auf einen Link, wird die Javascript-Funktion ajaxGet mit einem Parameter aufgerufen. Diese Funktion stellt dann eine HTTP-GET-Anfrage an das Script ajaxResponse.php.
Wie schon erwähnt, wird der Eventhandler ajaxEvent() dannach aufgerufen. Diese Funktion fügt dann als Inhalt der Überschrift das Ergebnis der Ajax-Anfrage ein.
Und schon sind wir am Ende des Ajax-Tutorials.
Ajax-Script online test.
