[HaBo]

selig · 01.03.11, 15:58

Hallo und guten Tag an alle,
ich hab mal wieder ne Frage :/

und zwar:

ich würde gerne einen Teil meiner Seite aktualisieren. z.B. das Datum auf der Seite. Soweit ich weiß funktioniert das mit Ajax recht gut.

Ich würde auch gerne einen chat auf der Seite einbinden der dann eben auch so funktionieren soll -> abfrage aus der Datenbank -> wenn ne änderung vorliegt soll die Änderung für den Besucher ausgegeben werden (zs mit dem alten inhalt -> also hinzugefügt)

Mein Problem ist jetzt nur, das ich nicht weiß wie sowas zu realisieren ist, da ich mich mit js so gut wie gar nicht auskenn und mit ajax gar nicht.

Wie ist soeine Abfrage über Ajax an ne php datei aufgebaut, was benötige ich für Dateien, usw?

Würde mich sehr freuen wenn mir jemand helfen könnte,...
eine Antwort mit kleinem Beispiel würde mich noch bedeutend glücklicher machen, da ich mir unter irgendwelchen "Fachbegriffen" nicht allzu viel vorstellen kann

Vielen Dank schonmal,

Selig

beavisbee · 01.03.11, 16:43

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

Code:

results.length

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-ko.../dp/3935042922

Anzeige

- Anzeige -

selig · 01.03.11, 16:54

oooh shi.... aber danke,... werd mich wohl intensiver damit beschäftigen müssen als ich anfangs dachte :/
du hast mir aber aufjedenfall sehr geholfen!

beavisbee · 01.03.11, 17:07

Wenn du das erst ein bis zwei mal gemacht hast, dann ist es echt ganz einfach. Hab mich selbst auch lange Zeit davor gedrückt

Hab per EDIT gerade noch eine Auflistung der Methoden und Eigenschaften des XML-HTTP-Request-Objekts in den oberen Beitrag gepostet, vielleicht hilft's...

selig · 01.03.11, 17:20

ja ich hab's bis jetzt auch einige zeit aufgeschoben, aber wenn du sagst das es nicht sooo kompliziert ist wie's aussieht, dann glaub ich dir das mal - lieber "nicht" gutenberg

ich geh stark davon aus das mir dein beitrag helfen wird!
& danke für den Link zu dem Buch,... werd ich mir wohl auch besorgen.

greetz selig

blue182 · 02.03.11, 12:01

Wenn du es einfacher haben moechtest, nutze ein geeignetes Framework wie z.B. Prototype.

selig · 02.03.11, 17:52

soooooo,...
hab das script jetzt mal hingebastelt - es funktioniert auch bei firefox und opera, leider aber nicht bei internet explorer (obwohl leider da nicht so ganz stimmt,... aber man muss ja auch mit nutzern rechnen die mit katastrophen surfen )

eingebunden ist es auf dieser Seite: www.usa2007.de
mit Firefox und Opera wir alles Wunderbar angezeigt, und die uhr funktioniert,... beim IE tut sich nix :/

dankeschön

Anzeige

- Anzeige -

01.03.11, 15:58	#1 (permalink)
selig Registriert seit: 27.10.09 Likes: 0	Ajax Seitenteile aktualisieren Anzeige Hallo und guten Tag an alle, ich hab mal wieder ne Frage :/ und zwar: ich würde gerne einen Teil meiner Seite aktualisieren. z.B. das Datum auf der Seite. Soweit ich weiß funktioniert das mit Ajax recht gut. Ich würde auch gerne einen chat auf der Seite einbinden der dann eben auch so funktionieren soll -> abfrage aus der Datenbank -> wenn ne änderung vorliegt soll die Änderung für den Besucher ausgegeben werden (zs mit dem alten inhalt -> also hinzugefügt) Mein Problem ist jetzt nur, das ich nicht weiß wie sowas zu realisieren ist, da ich mich mit js so gut wie gar nicht auskenn und mit ajax gar nicht. Wie ist soeine Abfrage über Ajax an ne php datei aufgebaut, was benötige ich für Dateien, usw? Würde mich sehr freuen wenn mir jemand helfen könnte,... eine Antwort mit kleinem Beispiel würde mich noch bedeutend glücklicher machen, da ich mir unter irgendwelchen "Fachbegriffen" nicht allzu viel vorstellen kann Vielen Dank schonmal, Selig

01.03.11, 16:43	#2 (permalink)
beavisbee Member of Honour Registriert seit: 22.02.07 Likes: 77	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 Code: results.length 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-ko.../dp/3935042922 Geändert von beavisbee (01.03.11 um 17:12 Uhr) Grund: Methoden und Eigenschaften des XML-HTTP-Request-Objekts + Buch-Tipp

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

01.03.11, 16:54	#3 (permalink)
selig Themenstarter Registriert seit: 27.10.09 Likes: 0	oooh shi.... aber danke,... werd mich wohl intensiver damit beschäftigen müssen als ich anfangs dachte :/ du hast mir aber aufjedenfall sehr geholfen!

01.03.11, 17:07	#4 (permalink)
beavisbee Member of Honour Registriert seit: 22.02.07 Likes: 77	Wenn du das erst ein bis zwei mal gemacht hast, dann ist es echt ganz einfach. Hab mich selbst auch lange Zeit davor gedrückt Hab per EDIT gerade noch eine Auflistung der Methoden und Eigenschaften des XML-HTTP-Request-Objekts in den oberen Beitrag gepostet, vielleicht hilft's...

01.03.11, 17:20	#5 (permalink)
selig Themenstarter Registriert seit: 27.10.09 Likes: 0	ja ich hab's bis jetzt auch einige zeit aufgeschoben, aber wenn du sagst das es nicht sooo kompliziert ist wie's aussieht, dann glaub ich dir das mal - lieber "nicht" gutenberg ich geh stark davon aus das mir dein beitrag helfen wird! & danke für den Link zu dem Buch,... werd ich mir wohl auch besorgen. greetz selig

02.03.11, 12:01	#6 (permalink)
blue182 Registriert seit: 21.08.10 Likes: 10	Wenn du es einfacher haben moechtest, nutze ein geeignetes Framework wie z.B. Prototype.

02.03.11, 17:52	#7 (permalink)
selig Themenstarter Registriert seit: 27.10.09 Likes: 0	soooooo,... hab das script jetzt mal hingebastelt - es funktioniert auch bei firefox und opera, leider aber nicht bei internet explorer (obwohl leider da nicht so ganz stimmt,... aber man muss ja auch mit nutzern rechnen die mit katastrophen surfen ) eingebunden ist es auf dieser Seite: www.usa2007.de mit Firefox und Opera wir alles Wunderbar angezeigt, und die uhr funktioniert,... beim IE tut sich nix :/ dankeschön

[HaBo]

Ajax Seitenteile aktualisieren