AJAX

Ziele

An dieser Stelle soll nur ein kurzer Einblick in die Möglichkeiten von AJAX gegeben werden.

Mehr Details dazu finden Sie z.B. bei  http://www.w3.org/TR/XMLHttpRequest/ und http://www.admin-wissen.de/

Ajax (Asynchronous JavaScript and XML) ermöglicht es einer Webseite Informationen mit dem Webserver auszutauschen
ohne jedesmal eine neue Webseite laden zu müssen. Es werden nur die jeweils relevanten Informationen in der bereits
geöffneten Webseite angezeigt.

 

Diese Seite ruft alle 2 Sekunden ein PHP-Skript auf. Dieses liefert zufällig ausgewählte Sprüche aus einem Array.
Die Aktion passierst automatisch im Hintergrund ohne das die Webseite neu geladen werden muss.

 

Die HTML-Datei und die PHP-Datei müssen sich hier im selben Ordner auf dem Webserver befinden.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
····<title>Titel</title>
<script>
var request=createRequestObject();
function createRequestObject()
{
····/*  Diese Funktion erstellt ein Request-Objekt, dass die
····  Kommunikation mit dem Webserver herstellt.
····*/
····var obj;
····if(window.ActiveXObject)
····{
········try
········{
············obj=new ActiveXObject("Microsoft.XMLHTTP");
········}
········catch(e)
········{
············obj=false;
········}
····}
····else
····{
········try
········{
············obj=new XMLHttpRequest();
········}
········catch(e)
········{
············obj=false;
········}
····}
····if(!obj)
····{
········alert("XMLHttpRequest-Objekt konnte nicht erstellt werden!");
····}
····else
····{
········return(obj);
····}
}
function process()
{
····/*   Hier wird das PHP-Script aufgerufen, falls
········das Objekt dazu bereit ist. Nach dem Aufruf des PHP-Scripts
········wird das Ergebnis in der Funktion RequestBearbeiten verarbeitet.
····*/
if(request.readyState==4 || request.readyState==0)
{
········request.open("GET","server.php", true);
········request.onreadystatechange = RequestBearbeiten;
········request.send(null);
}
else
{
····   setTimeout("process()",2000);
}
}
function RequestBearbeiten()
{
····/*  Der vom PHP-Script zurückgelieferte Text
········wird im Container ausgegeben.
····*/
····if(request.readyState==4)
····{
········if(request.status==200)
········{
········   document.getElementById('eins').innerHTML = request.responseText;
········   setTimeout("process()",2000);
········}
········else
········{
············alert("Serverproblem: "+request.statusText);
········}
····}
}
</script>
</head>
<body onload="process()">
<div id="eins" style="width:240px; height: 60px;border:1px solid;"></div>
<input type="button" onclick="document.getElementById('eins').innerHTML = ''" value="L&ouml;schen!"/>
</body>
</html>