Programmierung
Mit Javascript / Ajax Inhalte nachladen
Es ist ja mittlerweile kein Geheimnis mehr, dass Javascript Funktionalitäten zur Verfügung stellt, mit einfachen Mitteln Daten über ein request-Objekt nachzuladen. Somit muß also nicht die komplette Seite neu aufgebaut werden.
Ein kleines Ajax-Tutorial
Sinnvolle "Bestandteile", bzw. was man brauchen kann:
Ohne Javascript gehts nicht, denn via Javascript wird die Anfrage an den Server gestellt.
CSS, denn mit CSS werden Elemente positioniert, man kann sie verstecken oder zeigen, etc.
Wertvoll, aber nicht unabdingbar: eine serverseitige Scriptsprache wie z.B. Java oder PHP. Hier im Tutorial ist PHP präferiert, aber auch andere Scriptsprachen ermöglichen Dynamik und sind somit geeignet, Inhalte zu generieren.
Fangen wir von oben an:
<script type="text/javascript">
<!--
/*@cc_on @if (@_win32 && @_jscript_version >= 5) if (!window.XMLHttpRequest) function XMLHttpRequest() { return new ActiveXObject('Microsoft.XMLHTTP') } @end @*/
//-->
</script>
Wir kennen ja die Problematik, dass die Browser oftmals Quelltext unterschiedlich interpretieren bzw. nicht alle Standard-Funktionalitäten immer unterstützt werden. Da wir für die Anfrage ein XMLHttpRequest-Objekt benötigen, ältere MS-Browser dieses aber nicht kennen, bauen wir uns einfach eins ;-).
Wir erweitern den Quelltext um eine weitere Funtion, die dann die Anfrage an den Server handelt:
function getText(thema) {
var request = new XMLHttpRequest();
request.onreadystatechange = updateContent;
request.open("GET","./textgeber.php?thema="+thema,true);
request.send("");
function updateContent() {
switch(request.readyState) {
case 4:
if (request.status==200) {
window.document.getElementById('neuertext').innerHTML=request.responseText;
}
break;
default:
break;
}
}
}
Diese Funktion kann entweder in einer externen .js-Datei notiert sein oder innerhalb des script-Bereiches (wie oben). Betrachten wir uns die einzelnen Zeilen, allerdings recht oberflächlich, der Einfachheit halber:
var request = ... hier wird ein XMLHttpRequest-Objekt gebaut
request.onready... dem Objekt wird ein Verhalten "mitgegeben"
request.open... Hier wird das "thema" als Parameter weitergereicht an eine PHP-Seite
request.send... und ab die Post (bzw. hier GET ;-) )
function updateContent()
Innerhalb dieser Funktion wird die Antwort der Anfrage verarbeitet.
switch-case... Es gibt verschiedene Stati (sagt man Stati?), die ein request-Objekt haben kann. Jeder Status ist wertvoll, ich habe mich aber hier auf denjenigen konzenztriert, der letztlich das gewollte Ergebnis zurückliefert.
window.document... Hier an dieser Stelle wird die Antwort letztendlich verarbeitet. Wir haben uns entschlossen, den Inhalt eines <div>-Bereichs auszutauschen.
Der Inhalt der .php-Datei:
Als erster Versuch empfiehlt sich ein simples "Hallo Welt":
<?php
echo "Hallo Welt";
?>
Achten Sie aber auf die korrekte Adressierung, fehlerhafte Adressierung ist ein häufig vorkommender Fehler. Später kann man dann auf gewohnter Art und Weise Datenbank-Zugriffe realisieren, anhand der Parameter Auswahlen treffen etc.
Die html-Datei, auch ganz simpel. Die Funktion "getText()" wurde in diesem Falle in eine externe .js-Datei ausgelagert:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/layout.css" />
<script type="text/javascript">
<!--
/*@cc_on @if (@_win32 && @_jscript_version >= 5) if (!window.XMLHttpRequest)
function XMLHttpRequest() { return new ActiveXObject('Microsoft.XMLHTTP') }
@end @*/
//-->
</script>
<script type="text/javascript" src="/javascripterei.js"></script>
</head>
<body>
<div>
<p onmouseover="javascript:getText('einThema')">das Thema</p>
</div>
<div id="neuertext">Hier erscheint der Text</div>
</body>
</html>
Das war es schon. Wer will, der kann natürlich über die php-Datei Abfragen an Datenbanken machen usw. und dann mehr als nur ein "Hallo Welt" ausgeben lassen. Der Phantasie sind da kaum Grenzen gesetzt.
