Hallo,
Ich hab ein chat. Nur Ladet er mit der meta refresh funktion die seite neu.
Wie kann ich das mit Ajax machen ohne den ganzen Quelltext zu verändern. Ich möchte nur das die seite immer wieder aktualisiert wird.
Hallo privatecitypage,
Den Chat um eine Ajax funktion zu erweitern ohne den
Quelltext zu verändern sollte sich als schwierig
heraustellen.
Wenn Sie die Seite einfach nur neu Laden möchten , so
wie es jetzt per meta-refresh passiert benötigen sie
gar keine Ajax technik. Das kann man auch einfach über
Javascript lösen.
Falls sie nur einen bestimmten bereich (asynchronens
nachladen) der Seite aktualiseren möchte, ohne das die
ganze Seite neu gealden wird, sollten sie sich etwas
näher mit der Thematik beschäftigen. Mit dem jetzigen
wissenstand ist ihre Frage nicht zu ihrer zufriedenheit
zu beantworten.
Ein Beispiel für ein Ajax chat finden sie z.b. hier:
http://www.praxiswissen-ajax.de/
Viel erfolg.
Hallo privatecitypage,
Den Chat um eine Ajax funktion zu erweitern ohne den
Quelltext zu verändern sollte sich als schwierig
heraustellen.
Wenn Sie die Seite einfach nur neu Laden möchten , so
wie es jetzt per meta-refresh passiert benötigen sie
gar keine Ajax technik. Das kann man auch einfach über
Javascript lösen.
Falls sie nur einen bestimmten bereich (asynchronens
nachladen) der Seite aktualiseren möchte, ohne das die
ganze Seite neu gealden wird, sollten sie sich etwas
näher mit der Thematik beschäftigen. Mit dem jetzigen
wissenstand ist ihre Frage nicht zu ihrer zufriedenheit
zu beantworten.
Ein Beispiel für ein Ajax chat finden sie z.b. hier:
http://www.praxiswissen-ajax.de/
Viel erfolg. .
Hallo „privatecitypage“
das geht zB mit dem Javascript Befehl
location.reload()
Ich weiß nicht wie dein Chat funktioniert, aber wenn du per Ajax prüfst, ob jemand was geschrieben hat, dann kannst du das ja auch gleich mit JS anzeigen und brauchst gar keinen kompletten Seiten Refresh.
Das ist ja eigentlich der Sinn von Ajax! 
Falls ich dich falsch verstanden hab, schreib nochmal. Aber bitte mit mehr Details (wie arbeitet der Chat, was soll passieren, was funktioniert und was nicht…)
Viele Grüße
Thomas
Danke für die schnelle antwort.
Mein Chat arbeitet mit PHP.
Mich würde gern interressieren wie man prüft ob jemand was geschrieben hat. Bin Leider nur Javascript anfänger.
Also erstmal würde ich dir empfehlen ein Javascript Framework zu benutzen. Das macht die Sache deutlich einfacher.
http://jquery.com/
ist zB sehr gut.
Da gibst eine Ajax-Funktion die dir viel abnimmt:
http://docs.jquery.com/Ajax/jQuery.ajax#options
Du kannst mit dieser periodisch ein PHP Script aufrufen, dass in der DB (oder wo immer du deine Chateinträge speicherst) prüft ob was neues gekommen ist.
Falls ja, müssten die neuen Einträge sinnvoll zurück gegeben werden (JSON oder XML oder so) und können dann zB mit append (http://docs.jquery.com/Manipulation/append#content) irgendwo angefügt werden.
Aber wenn du noch ganz am Anfang stehst hilft dir am besten Google. Suchbegriffe: ajax chat tutorial
http://www.ajaxprojects.com/ajax/tutorialdetails.php…
http://www.dynamicajax.com/pg/193-.html
Ist vielleicht erstmal besser für die Grundlagen.
Viele Grüße
Thomas
Hallo,
da eine komplette erklärung dafür zu aufwendig wäre, verweise ich auf diverse Ajax-Tutorials im Internet.
Vom Prinzip her müsste in bestimmten Abständen (eine Sekunde?) eine JavaScript-Funktion aufgerufen werden (das geht mit setTimeOut) und diese fragt am Server (evtl. ein PHP-Script) nach, ob neue Nachrichten vorhanden sind und wenn ja, wird die neue Nachricht per innerHTML += message an die bestehenden angehängt, oder der ganze Bereich ersetzt.
Mfg
Mario
Es gibt mehrere Möglichkeiten solch einen Chat zu realisieren, Ajax brauchst du dafür nicht umbedingt…
Für eine Ajax Version verweise ich dich einfach mal auf diese Seite:
http://www.linuxuser.at/chat/index.html
Der Quellcode lässt sich sehr gut verstehen, da er auf Sachen wie einen Datanbankzugriff verzichtet…
greetz
Es gibt mehrere Möglichkeiten solch einen Chat zu realisieren, Ajax brauchst du dafür nicht umbedingt…
Für eine Ajax Version verweise ich dich einfach mal auf diese Seite:
http://www.linuxuser.at/chat/index.html
Der Quellcode lässt sich sehr gut verstehen, da er auf Sachen wie einen Datenbankzugriff verzichtet…
greetz
Hallo,
Sollte ich das erwähnen das mein chat über eine datenbank läuft?
danke erstmal für die tollen seiten. Ich werde mir die zu Hertzen nehmen.
Danke fürs erste.
Hallo,
da ich selbst noch Anfänger in Sachen Ajax bin, kann ich Dir leider nicht weiterhelfen.
Aber schau mal z.B. hier: http://www.xajaxproject.org/ .
Tut mir Leid, Gruß
Erhard
Cool. Danke.
Werde mir alles ansehen.
Aber das meiste ist nicht grad so wie ich es mir vorstelle.
Ich möchte ja nur das nach einer Millisekunden zeit angabe die seite automatisch Reloadet wird um traffic zu Sparen.
Ich Zahle für 100 Megabyte 0,29€
und hab immer wieder ein Traffic von 10-20 Gigabyte.
leider bin ich da nicht so versiert, aber du koenntest mal nach jquery such. jquery
ist mein favorisiertes ajax-framework und außerdem gibt es dafuer ein plugin das
sich livequery nennt, vielleicht suchst du mal danach?
ich wuensch dir viel glueck!
aha. Das ist schon eher was ich suche.
Ich gucks mir auch mal an wie es auf den Chat wirkt.
Hallo zurück,
Ich schicke Dir eine Antwort, die jQuery (http://jQuery.com &
http://docs.jquery.com/Main_Page)
benötigt, da sie am einfachsten ist. Es ist nur eine Kleinigkeit, deshalb kannst Du
jQuery auch
umgehen, aber ich habe nicht genug Zeit den Unterschied zu dokumentieren.
Die Antwort besteht aus 2 Teilen.
Teil 1 - Server (Antwort):
Du brauchst eine function auf dem server, die Dir die neuen Posts, oder gar den
ganzen Chat als
HTML zurückgibt. Die function sollte als Subadresse erreichbar sein (e.g.
http://meineURL/AJAXChatNews). Wenn die Addresse aufgerufen wird sollte also
einfach der Chat
(oder ein Teil davon) dargestellt werden (wahrscheinlich nicht hübsch, weil das CSS
nicht greift?).
Soweit so gut.
Teil 2 - Client (Anfrage):
A) Du brauchst ein Script (ajax.js), (siehe ende dieser Antwort), wenn Du probleme
mit dem Client
hast, antworte einfach wieder. In der Antwort schicke mir bitte das HTML des Chats,
damit ich die
Filter für jQuery beschreiben kann. Falls Du dich mit jQuery oder CSS selectors (z.B.:
„div#id.class>.child .descendant“) auskennst, kannst Du sicher selbst den Rest
erledigen…
B) Du benötigst einen CSS selector (z.B.: „#Chat>.post“), der die Maske für die
Elemente beschreibt,
die Du per AJAX hinzufügen willst.
C) Du benötigst eine JavaScript function z.B.:
chat.renderNewPosts = function($newPostsFromAJAX){
// nimmt die jQuery-Auswahl vom AJAX und hängt sie an den chat an.
$("#Chat").html($newPostsFromAJAX)
}
D) der client muss regelmässig beim server das HTML abholen und die JS-function
muss als handler
für die Antwort auf die Nachfrage gelinkt werden.
Zum Beispiel so:
document.setInterval(a.update(„http://meineURL/AJAXChatNews“,[],{filter:
„#Chat>.post“, callback:
chat.renderNewPosts}), 1000)
damit würde der Browser jede Sekunde die subAddresse aufrufen, das HTML als
Antwort erhalten
und via chat.renderNewPosts die elemente an das element
anhängen ohne zu flimmern (oder die Seite neu zu generieren)
aber Vorsicht: der ober-simple handler (chat.renderNewPosts) nimmt keine Rücksicht
auf eventuell
geöffnete forms, in denen vielleicht gerade eine Antwort formuliert wird. Alles
innerhalb des tags wird ersetzt durch die liste der Posts, die Du mit dem „#Chat>.post“
filter erreichst.
Also musst Du entweder die Antworten ausserhalb der Liste der posts generieren
lassen, oder den
handler Rücksicht auf geöffnete editoren nehmen lassen.
So kurz und knapp, aber hier ist mein Script. Es ist zwar optimiert für ein Projekt an
dem ich gerade
arbeite, aber generell genug für unsere zwecke…
a = {}
a.refreshElements = function( responseText, responseStatus, responseXML, kw) {
if ( responseStatus==200) {
$("#TBWidgets").html(responseText)
var $response = $("#TBWidgets")
if (kw) {
if (kw.filter) $response = $response.find(kw.filter)
if (kw.target) $(kw.target).html($response)
if (kw.callback) kw.callback($response, kw)
}
}
}
a.evalScripts = function(tag) {
$(tag).find(‚script‘).each(function(){eval( $(this).html() )});
}
a.ajaxObject = function (url, callbackFunction, kw) { // originally:
http://www.hunlock.com/blogs/The_Ultimate_Ajax_Object
// url: ajax url
// callbackF: function handling server response
// kw: hashable keyword arguments for handling function {‚id‘: 4, target: jQuery
object…}
var that=this;
if (url == undefined){url = ‚/ajax‘}
//if (callbackFunction == undefined){callbackFunction = refreshElements}
this.updating = false;
this.abort = function() {
if (that.updating) {
that.updating=false;
that.AJAX.abort();
that.AJAX=null;
}
}
this.update = function(passData, postMethod) {
if (postMethod == undefined) {postMethod = „POST“}
if (passData == undefined) {passData = „“}
if (that.updating) { return false; }
that.AJAX = null;
if (window.XMLHttpRequest) {
that.AJAX=new XMLHttpRequest();
} else {
that.AJAX=new ActiveXObject(„Microsoft.XMLHTTP“);
}
if (that.AJAX==null) {
return false;
} else {
that.AJAX.onreadystatechange = function() {
if (that.AJAX.readyState==4) {
that.updating=false;
that.callback(that.AJAX.responseText, that.AJAX.status,
that.AJAX.responseXML, that.kw);
that.AJAX=null;
}
}
that.updating = new Date();
if (/post/i.test(postMethod)) {
var uri=urlCall//+’?ui=’+(that.updating.getTime());
that.AJAX.open(„POST“, uri, true);
that.AJAX.overrideMimeType( ‚text/xml‘); // get xml
that.AJAX.setRequestHeader(„Content-type“, ‚application/x-www-form-
urlencoded‘); // send
form data
that.AJAX.send(passData);
}
else {
var uri=urlCall+’?’+passData+’×tamp=’+(that.updating.getTime());
that.AJAX.open(„GET“, uri, true);
that.AJAX.send(null);
}
return true;
}
}
var urlCall = url;
this.kw = kw;
this.callback = callbackFunction || function () { };
}
a.update = function (url, ps, kw) {
/*
communication between server and client
ps: client/request parameters
kw: server/response parameters
for addresssing database instances table (kind) and id have to be specifie.
remaining attributes will be updated on the object, if their class supports them.
* change an attribute value of a DB instance *
update([„action=save“,
„kind=Canvas“,
„id=5“,
„name=daVinci“])
* (re)render a widget *
update([„update1=canvas_library“])
*/
var data = ‚‘;
for ( var i = 0; i = 0) {
var t = ps[i].indexOf( ‚=‘);
var att = ps[i].substring( 0, t);
var val = ps[i].substring( t + 1);
val = encodeURIComponent(val);
var tokenizer = ‚‘;
if (i) tokenizer = ‚&‘;
data += tokenizer + att + ‚=‘ + val;
}
}
if ( kw ) {
// set default values
kw.evalscripts = kw.evalscripts ? kw.evalscripts : true
}
A = new a.ajaxObject(url, a.refreshElements, kw);
A.update(data)
return A
}
Soweit ich das überblicke, gibt es dazu div. Push-Mechanismen für das Bean, aber wohl nichts natives.
Ich benutze das Icefaces Framework, da gibt es da easy push dafür.
Vielleicht schaust Du Dir das mal an.
kann ich /ajax auch in content.php ändern?
Ich möchte nur das die seite immer wieder
aktualisiert wird.
Hallo,
also entweder realisiert du das über einen Iframe, den du dann von deinem parent aus ja jederzeit akutalisieren kannst oder aber du fragst in regelmäßigen Abständen via Ayax deine Datenbank ab, ob neue Einträge vorhanden sind. Diese kannst du dann über javascript in deinen Chat schreiben.
Hoffe, das hilft als Denkansatz.
Gruß
Ingo
kann ich /ajax auch in content.php ändern?
ja, vorrausgesetzt du änderst unter punkt C)
document.setInterval(a.update(„http://meineURL/AJAXChatNews“,[],{filter:
„#Chat>.post“, callback:
chat.renderNewPosts}), 1000)
in
document.setInterval(a.update(„http://meineURL/content.php“,[],{filter:
„#Chat>.post“, callback:
chat.renderNewPosts}), 1000)
Iframes sind ja schon vorhanden.
So sieht der erste version meines chats aus.
http://little-chatting.xe.cx/eigener_chat/
Der chat auf der Startseite gehört nicht mir sondern ein freund.