du brauchst erst einmal 2 Dateien: eine, die für die Darstellung im Webbrowser ist und JavaScript-Code enthält und eine, welche Inhalte aus der Datenbank strukturiert ausgibt (entweder als Klartext oder als XML möglich).
Wenn es um einzelne Flags oder Zahlen geht (z.B. Aktualisierung der Anzahl neuer PNs), dann reicht für gewöhnlich eine reine Textausgabe, bei Chats dagegen macht sich XML besser.
client-seitig (Java-Script):
als erstes musst du ein XML-HTTP-Request-Objekt erzeugen und dieses sollte sowohl von aktuellen Browsern (Gecko-Browser, KHTML/WebKit-Browser, Opera und aktuelle IEs) als auch von älteren IEs ordentlich erzeugt werden... dazu dieser Code-Schnipsel:
Code:
var XMLHTTP = null;
if (window.XMLHttpRequest) {
// moderne Browser wie
// - Mozilla (und andere Gecko-Engine-basierten Browser),
// - Opera,
// - Safari, Konqueror (und andere KHTML- / WebKit-Browser)
// - und InternetExplorer ab Version 7
XMLHTTP = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
//Internet Explorer 5
XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
} catch (ex) {
try {
//Internet Explorer 6
XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
}
}
}
die eigentliche Anfrage sieht dann wiefolgt aus:
Code:
if (XMLHTTP) {
XMLHTTP.open('GET', 'beispiel.xml');
XMLHTTP.onreadystatechange = function () {
if (XMLHTTP.readyState == 4) {
alert(XMLHTTP.responseText);
}
};
XMLHTTP.send(null);
}
In diesem Beispiel wird die beispiel.xml per GET geladen und mit alert() wird die komplette Ausgabe - als reiner Text interpretiert - ausgegeben.
Wenn du responseXml statt responseText nutzt, dann bekommst du ein (JavaScript-/DOM-)XML-Objekt zurück.
Die Arbeit mit dem DOM-Objekt:
Mit
Code:
var xml = XMLHTTP.responseXml;
var results = xml.getElementsByTagName('childnode');
bekommt man ein Array aller Child-Nodes mit dem Namen "childnode"
mit
bekommt man die Anzahl der Einträge zurück,
mit
Code:
results[i].firstChild.nodeValue
bekommt man (falls vorhanden) den Text-Inhalt zwischen <childnode> und </childnode>
und mit
Code:
results[i].getAttribute("attrib1");
bekommt man den Wert des Attributes "attrib1" zurück.
weitere Infos auf SelfHTML:
http://de.selfhtml.org/javascript/objekte/node.htm
Methoden des XMLHttpRequest-Objekts
abort()
Bricht eine Anfrage ab
getAllResponseHeaders()
Liefert alle HTTP-Header der HTTP-Antwort zurück
getResponseHeader(name)
Liefert den angegebenen HTTP-Header der HTTP-Antwort zurück
open(method, URL [, async[, User[, Pass]]])
Initialisiert ein XMLHttpRequest-Objekt
Parameter:
- method: die HTTP-Methode (GET, POST, HEAD, ...)
- URL: die aufzurufende Adresse (muss lokal sein, keine absoluten http://...-Adressen möglich!)
- async: optional, default: true - wenn Anfrage nicht asynchron ist, friert der Browser ein, bis eine Antwort da ist (was in 99% der Fälle nicht erwünscht ist)
- user: optional, Benutzer, wenn z.B. Authentifizierung per BasicAuth (z.B. per .htaccess) gefordert ist
- pass: optional, Passwort, wenn z.B. Authentifizierung per BasicAuth (z.B. per .htaccess) gefordert ist
Achtung: Benutzer und Passwort stehen dann im Klartext im JavaScript-Code...
send(data)
Setzt die HTTP-Anfrage ab.
Parameter kann entweder mit Daten (z.B. POST-Variablen) gefüllt sein oder "null"
setRequestHeader(name, value)
Setzt einen Header-Eintrag für die HTTP-Anfrage.
Eigenschaften des XMLHttpRequest-Objekts
onreadystatechange
EventHandler beim Zustandswechsel des XMLHttpRequest-Objekts (kann entweder ein Funktionsname oder eine anonyme Funktion sein)
readyState
Zustand des XMLHttpRequest-Objekts
- 0 : nicht initialisiert
- 1 : Lädt gerade
- 2 : fertig geladen
- 3 : wartet auf Rückgabe
- 4 : vollständig
responseText
HTTP-Rückgabe als Text
responseXML
HTTP-Rückgabe als (JavaScript-/DOM-)XML-Objekt
status
HTTP-Statuscode
statusText
Textbeschreibung des HTTP-Statuscodes
serverseitig (PHP)
Da die XML-Daten niemals aus dem Cache kommen sollen, muss dies über Header dem Browser mitgeteilt werden:
Code:
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Thu, 01 Jan 1970 00:00:00 GMT');
Desweiteren muss man dem Browser auch sagen, dass es sich bei der Ausgabe um XML-Daten handelt:
Code:
header('Content-type: text/xml');
Danach benötigt man den Root-Node des XML-Dokuments:
Code:
$xml = new SimpleXMLElement('<?xml version="1.0" encoding="UTF-8"?><rootnode></rootnode>');
Und nun können Child-Elemente hinzugefügt werden:
Code:
$child = $xml->addChild('childnode', 'content'); $child->addAttribute('attrib1', 'foo'); $child->addAttribute('attrib2', 'bar');
$child = $xml->addChild('childnode'); $child->addAttribute('attrib1', 'bla'); $child->addAttribute('attrib2', 'blub');
Dieser Code sorgt nun für folgende Ausgabe:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<rootnode>
<childnode attrib1="foo" attrib2="bar">content</childnode>
<childnode attrib1="bla" attrib2="blub" />
</rootnode>
In deinem Fall müsstest du per GET-Parameter eben noch nen Zeitstempel mitgeben, ab welchem neue Beiträge aus der Datenbank gelesen werden sollen...
Und wie du mit JavaScript HTML-Elemente erzeugst und bearbeitest, darauf bin jetzt ich auch nicht näher eingegangen... das findest du auch alles unter SelfHTML.
Quellen (ich heiß ja schließlich nicht Guttenberg 
):
Das JS-Grundgerüst und die Auflistung der Methoden und Eigenschaften stammen im wesentlichen übrigens aus diesem Buch, welches ich sehr empfehlen kann:
http://www.amazon.de/AJAX-schnell-kompakt-Christian-Wenz/dp/3935042922![[HaBo]](/styles/default/logoklein.png){kind=small}
