14. September '10
In diesem Artikel habe ich beschrieben, wie mit Hilfe der Ajax-Technologie ein PHP-Script einmalig nachgeladen werden kann. In diesem Artikel zeige, wie ein PHP-Script andauernd aktualisiert werden kann, ohne dass die Seite neu geladen werden muss.
Für was benötige ich die Ajax-Technologie?
Ein Anwendungsbeispiel für den laufenden Reload wäre z.B. in einem Nachrichtensystem das Überprüfen neuer Nachrichten. So muss der Benutzer nicht mehr jedes Mal die Seite aktualisieren, um zu überprüfen, ob er eine neue Nachricht bekommen hat, sondern bekommt die Anzahl der neuen Nachrichten sofort angezeigt.
Beispiel
Folgender Code wird in den head-Bereich der Homepage geschrieben:
$(document).ready(function() {
$("#refresh").load("refresh.php");
var refreshId = setInterval(function() {
$("#refresh").load('refresh.php?' + 1*new Date());
}, 1000);
});
</script>
Folgender Code wird dorthin geschrieben, wo später die Ausgabe des PHP-Scripts erscheinen soll:
Erklärung
Im head-Bereich wird das Javascript ausgeführt, das das PHP-Script im Intervall von 1000 Millisekunden (entspricht 1 Sekunde) neu lädt. Der erste load-Befehl lädt das Script, das beim ersten Aufruf der Seite angezeigt werden soll, der zweite load-Befehl enthält das Script, das dann im Intervall aufgerufen werden soll. Optional können auch hier bei beiden Aufrufen Parameter übergeben werden.
Auf der Homepage ist ein div-Container platziert, in dem die Ausgabe der PHP-Scripte angezeigt wird.
Demo
Loading ...
Meine letzte Rettung.
Ist es mit diesem Code möglich eine komplette php datei erst nach ca. 5 sec einmalig auszuführen. Habe eine abfrage für neu Registrierte User geschrieben. Bekomme dann eine Push nachricht auf das iPhone allerdings wird mein code schneller ausgeführt ,als die Registrierung für den Datenbankeintrag braucht. Meine einzige chance sehe ich jetzt darin meinen datei später auszuführen.
Hoffe konnte es ungefähr beschreiben
Frage:
Wozu eigentlich + 1*new date?
mhh iwie will das nicht
ich will en einfach test mit der ner zahl 7 wo sekundär +1 hochgezählt wird.
echo "
<script type='text/javascript'>
$(document).ready(function() {
$('#refresh').load(“$test);
var refreshId = setInterval(function() {
$('#refresh').load(‘$test + 1;
}, 1000);
";
wieso funktioniert das nicht
Javascript kann keine PHP-Variablen verändern.
danke
Was anderes, wäre es denn nicht möglich in der refresh.php auch ein kleinen JS-Code zu plazieren, welcher dann die Variable aus diesem Dokument prüft und wenn sie leer ist, sich dann selbst nach z.B. 3 Sekunden neu lädt?
Natürlich wäre das möglich, dann benötigt man aber den Aufruf der refresh.php gar nicht mehr. Diese können Sie dann direkt aufrufen.
Das Script funktioniert super!
Da ich kein JavaScript Experte bin, hätte ich da aber folgende Frage.
Wie kann man es machen dass das Script auf eine php-variable in refresh.php reagiert?
Stelle mir folgendes vor…
refresh.php ist ein PHP-Scritpt in dem eine externe Textdatei geladen wird, diese Textdatei hat aber nicht immer Inhalt. Nun dachte ich, das ich, wenn die Textdatei Inhalt hat eine Variable z.B. $js = “set”; setze, wenn nicht $js = “”;
Und nun müsste man Ihren JS-Code so anpassen das er auf die Veränderung der $js reagiert, wenn diese leer soll die refresh.php alle 5 Sekunden neu geladen werden, ist sie nicht leer dann alle 40 Sekunden.
Ist das machbar? falls ja, ich würde mich freuen wenn Sie mir helfen würden.
Wenn Sie statt der Zeile
die Funktion aus diesem Beispiel verwenden, können Sie Variablen zurückgeben und dann auch auswerten. Alles was in der PHP Datei ausgegeben wird, z.B. mit echo, kann abgefangen werden, im Beispiel wird das dann in die Variable “nachladen” geschrieben.
Verstehe nicht ganz wie ich das machen könnte, wo gebe ich dann die Zeiten an nach wieviel Sekunden neugeladen wird usw.?
Würde es ihnen ws ausmachen wenn Sie ein kleines Beispiel machen würden? würde mich freuen.
Hallo, ist ein gutes Skript was sie da veröffentlicht haben, nur für meine Zwecke funktioniert es noch nicht ganz.
Ich habe mit JQuery zwei Tabs die aktualisiert werden müssen, jedoch gibt es nur eine id für Content. Die beiden Tabs werden in tabs-container ausgegeben, mit Ihrem Code kann ich nur einen Link eingeben und somit haben beide Tabs den gleichen Inhalt, ich habe aber zwei PHP-Dateien und nur eine ID. Gibt es da eine andere Lösung? Meine JQ bzw. JS Kenntnisse sind noch sehr begrenzt so das ich auf Anhieb selbst keine Lösung gefunden habe.
Hier mal ein Teil des HTML-Codes.
<ul class="mytabs" id="tabs">
<li class="current"><a href="http://localhost/xxx/text_tab.php">Text</a></li>
<li><a href="http://localhost/xxx/video_tab.php">Videos</a></li>
</ul>
<div id="content_tabs">
<div class="mytabs-container" id="tabs-container">
Laden, bitte warten...
</div>
</div>
</div>
JS Code:
var tabsId = '#tabs';
$(document).ready(function(){
// Preload tab on page load
if($(tabsId + ' LI.current A').length > 0){
loadTab($(tabsId + ' LI.current A'));
}
$(tabsId + ' A').click(function(){
if($(this).parent().hasClass('current')){ return false; }
$(tabsId + ' LI.current').removeClass('current');
$(this).parent().addClass('current');
loadTab($(this));
return false;
});
});
function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');
$(containerId).load(tabObj.attr('href'), function(){
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
}
So ich habe jetzt mein Script geändert so das ich zwei Div-Elemente mit zwei Ids zur Verfügung habe, ich habe dann den erweiterten Code angewendet, jedoch lädt die Seite jetzt sofort immer wieder neu, ununterbrochen. An was kann das liegen?
Ich denke mal der ruft irgendwas doppelt auf was dann eine Endlosschleife ergibt. Idee an was das liegen kann?
$("#refresh").load("refresh.php");
var refreshId = setInterval(function() {
$("#refresh").load('refresh.php?' + 1*new Date());
}, 1000);
$("#refresh2").load("refresh2.php");
var refreshId2 = setInterval(function() {
$("#refresh2").load('refresh2.php?' + 1*new Date());
}, 1000);
});
Sie produzieren die Endlosschleife doch selbst, indem Sie alle 1000 Millisekunden die Seiten neu aufrufen. Wenn Sie stattdessen 10000 verwenden, werden die Seiten nur noch alle 10 Sekunden neu geladen.
Stimmt, mein Fehler, hatte vorhin zwar die Zeit vergrößert gehabt, aber hatte da noch einen anderen Fehler drin gehabt, somit habe ich das Zeitproblem übersehen. Besten dank
Ich find cool
Hallo,
also, ich bekomm es nicht hin, eine Variable zu senden. Weiss jemand wo der Fehler liegt??
so sieht das aus:
$(document).ready(function() {
$(“#refresh”).load(“abruf.php?x=$zeit1″);
var refreshId = setInterval(function() {
$(“#refresh”).load(‘abruf.php?x=$zeit1′ + 1*new Date());
}, 5000);});
auf der abruf.php steht dann: echo $zeit1;
und auf der Hauptseite (wo abgeholt wird)
$rein1=$_GET[$zeit1];
aber leider ist $_GET[$zeit1] immer leer.
Kein Plan mehr.
Hallo,
ich habe Ihnen bereits eine E-Mail geschrieben.
$_GET['zeit1'] ist deswegen leer, weil Sie es gar nicht übergeben. Die Variable, die Sie übergeben heißt “x”.
Versuchen Sie doch mal den Aufruf $(“#refresh”).load(‘abruf.php?zeit1=’ + 1*new Date());
und geben Sie die Variable dann mit echo $_GET['zeit1'] aus.
Viele Grüße
Hallo nochmal,
hab das jetzt so gemacht wie Sie beschrieben haben, aber leider geht das auch nicht.
P.S. Die mail war hier erst später eingetroffen, sorry. Yahoo ist die letzten Tage oft nicht erreichbar.
Viele Grüsse
Hallo!
Ich habe jetzt mal in eine test.html datei das eingetragen:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#refresh").load("refresh.php?x=");
var refreshId = setInterval(function() {
$("#refresh").load('refresh.php?x=' + 1*new Date());
}, 1000);
});
</script>
</head>
<body>
<div id="refresh" style="text-align:center;"></div>
</body>
</html>
in der refresh.php steht:
echo $x;
?>
Das funktioniert aber leider nicht…
was mach ich falsch?
mfg, Geri
hab den fehler gefunden…
das script sollte auch includiert sein
war doch zu schnell am testen…
mfg,
Geri
Schön und es funktioniert nur verstehe ich eines nicht…
Warum wird refresh.php 2 mal geladen bzw. ist es im Script angegeben? ist das nötig und wenn ja warum? ich würde das gerne wissen weil ich es verstehen möchte, danke.
Dann noch eine Frage, wäre es eventuell möglich das Script als Link zu benutzen? weil ich suche sowas auch dafür wenn ich auf einen Link klicke der Inhalt eines Containers ausgetauscht wird. Irgendwie finde ich nix brauchbares und das hier ist ja wircklich micro klein und eigentlich leicht zu benutzen..dafür danke ich dem Macher hier recht herzlich.
Hallo!
Der erste Aufruf lädt das Script sofort beim Laden der Seite, der zweite Aufruf ist die Schleife. Würde man den ersten Aufruf weglassen, so würde erst der Timer einmal durchlaufen, und dann würde das Script geladen werden.
Wenn ich Sie richtig verstehe, möchten Sie einen Refresh-Link:
Erstellen Sie einen Link mit der ID “link”. Wird der Link angeklickt, so wird nun das Script geladen.
Viele Grüße
Also wäre es rein technisch auch möglich, beim ersten Aufruf eine ganz andere Seite zu laden? die dann durch die refresh.php ersetzt wird und erst wieder erscheint wenn man im Browser auf aktualisieren klickt?
–
Nein, das meint ich nicht, eher das ich sowas suche aber, das beim Klick halt in einem Container der Inhalt ausgetauscht wird. Also nur austauschen nicht refreshen, also Klick -> Seite wurde eingefügt, Klick Link daneben -> eine andere Seite wurde eingefügt und die zuvor entfernt.
Ja es ist möglich, einfach beim ersten Aufruf eine andere Seite einsetzen.
Durch den Code, den ich vorher gepostet habe, wird genau das ausgelöst. Wenn man nun mehrere von dieses Funktionen einbaut (z.B. #link1, #link2) und jedem Link eine andere Seite in load-Bereich zuweist, dann erhält man den oben beschrieben Effekt
Ja ich dann nochmal. Ist es möglich mit dem Script auch aus PHP Seite zum Beispiel die Strings $a, $B, $c abzuholen und dann an verschiedenen Stellen!!! der Seite einzubinden?? Ohne das Script 3mal verschieden aufzurufen?? Bin nicht so der Java Script Mensch, bin in PHP fitt. Hab einige Seiten, wo dieser Ablauf Sinn macht, und nicht immer der komplette DIV-Container.
Thx
Nun also zuerstmal zum Ablauf: Beim Aufruf der Seite wird zuerst das komplette PHP Script ausgeführt (Serverseitig), dann wird die Seite an den Client (Browser) gesendet und dort wird dann das Javascript ausgeführt.
Mir ist jetzt der Sinn der ganzen Operation nicht klar, warum geben Sie die Variablen nicht einfach mit echo $a etc. aus?
Es ist allerdings möglich, dass Sie in Javascript Variablen definieren, denen Sie einen PHP Wert zuweisen:
Nun können Sie mit der (Javascript-) Variablen weiterarbeiten.
Hallo und danke.
Der Sinn: ich hole Php + xml Seiten bei Shoutcast ab, die ich aber auf einer PHP seite zusammenführe und auswerte. Darin befinden sich diverse Variablen die ich aber nur 1mal abholen möchten, aber die Ausgabe an verschiedenen Stellen der Seite habe. Da das Script ja die komplette Seite ausliest, müsste es doch möglich sein die mit echo ausgegebenen Daten zu separieren?
Wie gesagt, bin nicht der Java Script Versteher.
Und danke für diese galaktische schnellen Antworten.
Also ich vermute die einfachste Methode wäre, das PHP Script im Javascript-Aufruf mit einem Parameter zu versehen (refresh.php?var=a) und dann in PHP auf $_GET['a'] etc. zu prüfen und bereits dort zu separieren.
Alternativ (vermutlich das was Sie möchten) können Sie ein Array zurückgeben und dieses auswerten. Da im aktuellen Script allerdings keine Auswertung vorgenommen werden kann, müssten Sie das Script aus diesem Artikel verwenden und statt der Zeile 5 des aktuellen Scripts einsetzen. Dann können Sie die Javascript-Variable (heißt im Beispiel “nachladen”) prüfen und ggf. das Array zerlegen und in verschiedenen Containern ausgeben.
Yep danke. Verstanden hab ich das leider nicht. Dies Script hat nur 4 zeilen, da kann ich dann nicht Zeile 5 austauschen?? Oder wat mach ich da falsch? Wie gesagt, Java net mein Ding.
Aber trotzdem vielen Dank!!!
Die Zeile
austauschen mit dem Javascript-Code dieses Artikels (natürlich ohne
und
). Dann müssen nur noch Kleinigkeiten wie z.B. der Scriptaufruf und die Container-ID angepasst werden!
Hi,
alles tutti.
Werde es am Abend umbauen. Danke Danke.
Tipp: Diese Variante hier auch auf die Seite stellen!
Gruss aus Hamburg
Jo nochmal hier. Hab mal nen Test gebaut. Aber in den $_GET['paramerter1'] kommt nix an. Sind immer leer.
Gedankenfehler oder muss das Ajax Script doch anders sein??
Wenn ich die Abholseite an sich selbst schicke, werden die Parameter mitgeschickt.
Ok, ich gehe jetz davon aus, dass Sie 3x das Script aufrufen, mit “refresh.php?var=a”, “refresh.php?var=b” und “refresh.php?var=c”.
Im PHP Script benötigen Sie also eine if-Struktur:
Nun wird in den Containern der Buchstabe A, B oder C ausgegeben. Wenn Sie jetzt vor den echo-Befehl (den Sie in irgendeiner Form zwingend benötigen) Ihre Abfrage platzieren und dann das Ergebnis der Abfrage mit echo ausgeben, dann sollte Ihr Problem gelöst sein!
Hi,
da script funzt wunderbar.
Aber wie wohl immer, noch eine Frage.
Wie ist es möglich mit dem Scipt verschiedene Seiten abzufragen und dann in verschiedenen DIV-Containern darzustellen?
Danke schon mal im Vorraus
Hallo,
dazu müssten Sie das Script erweitern, etwa so:
$("#refresh").load("refresh.php");
var refreshId = setInterval(function() {
$("#refresh").load('refresh.php?' + 1*new Date());
}, 1000);
$("#refresh2").load("refresh2.php");
var refreshId2 = setInterval(function() {
$("#refresh2").load('refresh2.php?' + 1*new Date());
}, 1000);
});
Entsprechend müssen dann auch Container mit den IDs “refresh” und “refresh2″ auf der Seite vorhanden sein.
Oh man, das ging schnell.
Ja wunderbar. Wie Weihnachten. Danke
DerAlien
Ich freue mich, dass ich Ihnen helfen konnte.
Viele Grüße
Danke, war mir nur etwas unklar da ich mit JavaScript bzw. Ajax noch nie was gemacht habe.
Finde diese Sache super erklärt und ich als Anfänger habe das auch schnell umgesetzt.
Würde mich über mehr derartiger Tipps/Tricks hier freuen z.B. würde mich mal interessieren, wie man mit so einem Script wie dieses, in Verbindung mit z.B. einem PHP-Script eine Textdatei auf aktualität prüft und einen Inhalt in einem Container nur aktualisiert wenn sich der Inhalt dieser Textdatei auch geändert hat.
Also nicht nach Zeit sondern wenn sich eine Datei geändert hat. Eine Anleitung wie sowas funktionieren könnte wäre super.
Danke.
P.S. Tolle Seite!
Das könnte etwas schwierig werden, da ja der Inhalt der Datei mit irgendetwas verglichen werden müsste. Auf die Schnelle würde mir da bloß das Änderungsdatum einfallen, der Code in der refresh.php in etwa so:
// Gibt z.B. aus: somefile.txt was last modified: 29. December 2002 22:16:23.
$filename = 'somefile.txt';
if (file_exists($filename)) {
echo "$filename was last modified: " . date ("d. F Y H:i:s.", filemtime($filename));
}
?>
Solange die Datei nicht verändert wird, ändert sich auch die Ausgabe nicht. Erst wenn eine Änderung vorgenommen wird, und damit auch die Zeitstempel der letzten Änderung aktualisiert wird, ändert sich der Containerinhalt. Um eine andere Ausgabe zu erhalten als den Zeitstempel müsste man einfach auf die Dauer prüfen, als Schema:
Ja, es geht eigentlich nur mit dem Zeitstempel, das Problem aber ist, das JavaScript fügt trotzdem Inhalt in den Container ein egal ob neu oder alt, also eingefügt wird nach der anmgegebenen Zeit immer was weil das Script ja nicht weiß ob da jetzt was neues drin steht oder nicht.
Vielmehr dachte ich an etwas wie…
JavaScript startet, schaut in eine Kontroll-Datei “temp” wo der letzte Zeitstempel steht, vergleicht diesen Zeitstempel mit dem der aktuellen Datei, sind die Stempel identisch macht das JavaScript nichts, es bricht also ab = fügt garnichts ein. Sind die Zeitstempel unterschiedlich dann startet die refresh Routine bzw. Funktion und tauscht den Inhalt in den Container aus und aktualisiert die Kontroll-Datei mit dem neuen Zeitstempel.
Man müsste also ein Ajax-Script haben welches min. 2 Funktinen hat.
Die erste Funktionen vergleicht die Zeitstempel, gibt es ein true wird die Refreshfunktion ausgeführt, gibt es ein false wird das Script einfach abgebrochen und der alte Inhalt bleibt unberührt.
So würde es keine unnötigen Requests/Aktualisierungen geben und nur dann Inhalt aktualisiert wenn sich dieser geändert hat. Nur wie könnte man sowas machen?
Geht das per Ajax überhaupt?
Ich habe Ihnen ein kleines Beispiel geschrieben. Ich hoffe, dass ich Ihre Frage richtig aufgefasst habe.
→ zum Artikel
Hallo,
ich möchte ein Nachrichtensystem mit Ajax verwirklichen auf der Mainpage sollte ein Menülink sein wo steht Nachrichten (0) und daneben ein kleines brief icon, diese anzahl soll sich sofern neue eintreffen reloaden (1 Minuten intervall).
Könnte ihr mir hier ansätze oder tipps oder “snippeds” posten würdet mir sehr sehr helfen big thanks
Hallo
Eine Frage dazu. Wird immer nur der Inhalt zwischen den .. aktualisiert oder auch das also Container auch? bzw. muss die Seite welche das Script nonstop einfügt auch den Container beinhalten? also 1:1 sein?
Also:
Die Seite refresh.php <— muss diese auch diesen div container beinhalten oder reicht nur der Inhalt?
z.B.
Das Script oben ist bei mir im <head … eingebunden, an einer Stelle in der index.php ist dann halt der Container definiert, nun möchte ich wissen ob dieser Container auch in der Seite die immer eingefügt wird auch diesen Container beinhalten muss?
Hallo!
Es wird immer nur der Inhalt des div-Containers aktualisiert. Wäre das nicht so, gäbe es ja beim zweiten Aktualisierungsvorgang schon keinen Container mehr, der aktualisiert werden könnte.
Die refresh.php muss keinen Container beinhalten, es genügt eine einfache Ausgabe. Selbstverständlich können Sie aber dort Container etc. verwenden.
Hey Tobias,
also ich find deine Seite schonmal recht gut. Kurz und bündiig erklärt und dein Demo läuft auch Super bei mir. Auch im IE.
Allerdings habe ich dein Script kopiert und hab es aufm localem Server sowie auf 2 verschiedene Server von verschiedenen Anbietern.
Allerdings aktualisiert sich MEINE Seite nicht.
Woran kann das liegen ?
So komplett ohne Code kann ich dazu leider nichts sagen, aber vielleicht haben Sie das jQuery-Framework noch nicht eingebunden?
Download: jquery.com
Code:
Habe die Demo und den Artikel aktualisiert, das Script läuft jetzt auch im Internet Explorer.
Danke
Neee ich bin Webmaster und wuerde sowas niemals tun.
( Im IE )
Die Demo läuft nicht.
Die Demo funktioniert einwandfrei, wurde gerade überprüft. Vielleicht haben Sie in Ihrem Browser Javascript deaktiviert?
In Firefox laueft sie aber im Internet explorer nicht.