Dynamische Seite ganz einfach bauen, ohne dass wir einen Reload brauchen? Das geht! Schaut Euch mal das folgende an.

[sourcecode language=’php‘]






Auswahl:

Ergebnis:

[/sourcecode]

Die Seite besteht nun aus einem Drop-Down Feld aus dem wir die Einträge „Datum“, „Uhrzeit“ und „Datum + Uhrzeit“ wählen können. Wenn wir nun auf den Button „Anzeigen“ klicken, wird uns im unteren Teil der Seite in einem DIV-Block entsprechend unserer Auswahl das Datum, die Uhrzeit oder halt beides angezeigt. Tooooll….. Nix neues? Doch! Denn das Ergebnis wird uns dort angezeigt, ohne dass die Seite neu geladen wird. Ok, das Beispiel mit Datum und Uhrzeit geht natürlich auch direkt mit JS, aber man damit noch ganz andere Sachen, z.B. Datenbankabfragen machen. Wie? Nun ja, in unserem Beispiel wird die Berechnung von Datum und Uhrzeit nicht in JS vorgenommen, sondern erfolgt in einem PHP-Skript, dass irgendwo auf einem Erreichbaren Rechner liegen kann.

Das entscheidende sind die Zeilen 4 und 15. In Zeile 4 binden wir das folgenden JavaScript „request.js“ ein:

[sourcecode language=’php‘]
// Hier wird die Antwort Ausgegeben (ID des Ausgabeelements, z.B. ein DIV-Block)
var ResponseTargetID = “;

// Funktion zum Erzeugen eines XMLHttpRequest-Objekts
function createRequestObject(){
var request_o;
var browser = navigator.appName;

if (browser == „Microsoft Internet Explorer“) {
request_o = new ActiveXObject(„Microsoft.XMLHTTP“);
} else {
request_o = new XMLHttpRequest();
}
return request_o;
}

// Erzeuge XMLHttpRequest-Objekt
var http = createRequestObject();

/**
* Funktion zum Abrufen der Informationen
*
* @param uri – URI der abzurufenden Seite
* @param parameter – Abfrage Parameter, z.B. ‚id‘
* @param value – Wert des Parameters
* @param targetID – ID des Elements, dass die Ausgabe anzeigen soll
*/
function httpRequest(uri,parameter,value,targetID){

ResponseTargetID = targetID;

http.open(‚GET‘, uri + ‚?‘ + parameter + ‚=‘ + value);

// Handler definieren
http.onreadystatechange = handleResponse;

// Daten senden. In unserem Fall nix!
http.send(null);
}

/**
* handleResponse()
*
* verarbeitet die Antworten des Requests
*/
function handleResponse(){

/* Das XMLHttpRequest-Objekt hat eine Eigenschaft readyState. Diese kann
folgende Werte annehmen:
0: Uninitialized
1: Loading
2: Loaded
3: Interactive
4: Finished */
if(http.readyState == 4) { // Finished?
if (http.status == 200) { // Status OK?
var response = http.responseText;

// Ergebnis in das Element einfügen.
document.getElementById(ResponseTargetID).innerHTML = response;
}
}
}
[/sourcecode]
Dies stellt uns die Möglichkeit zur Verfügung per JS Anfragen an einen Server zu stellen. Dazu wird die Funktion XMLHttpRequest() benutzt. Es wird einfach per XMLHttpRequest-Objekt.open() eine Seite abgerufen und das Ergebnis an unsere Seite zurückgeliefert. handleResponse() zeigt das Ergebnis wird dann im Response-Target an. In unserem Fall ist das der DIV-Block mit der ID „answer“.

Die Anfrage selber geschieht in Zeile 15 unserer HTML-Seite. Dort wird die JS-Funktion httpRequest aus unserem JS-Script benutzt, um eine Anfrage an einen anderen Rechner zu stellen. Das Ergebnis wird dann in DIV-Block mit der id=“answer“ angezeigt.

Schauen wir uns mal den Server-Code in request.php an:
[sourcecode language=’php‘]
‚.date(‚H:i:s‘).‘‚;
}

if ($_GET[‚id‘] == ‚datetime‘) {
echo date(‚Y-m-d / H:i:s‘);
}

?>
[/sourcecode]
Das ist ja nun ganz simpel. Je nach per GET übergebener ID, wird einfach eine andere Ausgabe erzeugt.

Wie benutze ich das nun?

Was ich brauche ist eine HTML-Seite mit einem Formular. Auf der Seite binde ich per
[sourcecode language=’html‘]