kostenloser Webspace werbefrei: lima-city

Javascript Divs einer anderen Datei kopieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   christian1603

   

   christian1603 hat kostenlosen Webspace.

   16:24, 7.2.2011

   Hallo LC,
   ich habe eine html Datei in der Divs sind.
   divs.php
   

   <div id="1">inhalt 1</div>
   <div id="2">inhalt 2</div>
   <div id="3">inhalt 3</div>
   <div id="4">inhalt 4</div>
   <div id="5">inhalt 5</div>
   <div id="6">inhalt 6</div>

   
   Jetzt möchte ich in der index.html mittels javascript Die divs der divs.php kopieren und ausgeben.
   Das ganze soll für ein Chat sein. Deshalb soll er die abfrage alle 4sec machen und prüfen ob eine Div mit einer hören ID vorhanden ist. (in diesen Fall wäre es eine 7)
   Hat jemand eine Idee wie ich das machen könnte?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. t*****b

   20:10, 7.2.2011

   christian1603 schrieb:
   Hat jemand eine Idee wie ich das machen könnte?
   

   
   
   Du rufst einfach per Ajax eine Datei auf und übergibst die letzte angezeigte ID. Zum Beispiel: "messages.php?lastid=123". Die Datei gibt dann alle einträger neuer als "lastid" zurück.

4. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   22:38, 7.2.2011

   So ganz nebenbei da wäre eine polling-Lösung besser, weil weniger Request anfallen und entsprechend weniger Traffic erzeugt wird.
   
   Dabei schickst du mittels Ajax eine Anfrage an den Server und der schickt die Antwort erst, wenn sich etwas verändert hat, spätestens aber nach einer bestimmten Zeit, am besten ca. 5 sec. vor der max_execution_time.
   Beispiel-Pseudocode:

   <?php
   // include Datenbankfunktionen und zugriffe
   include 'DB.php';
   // definiere die letzte aktive id oder 0
   $lastID = is_numeric($_GET['last_id']) ? $_GET['last_id'] : 0;
   // durchlaufe die schleife 30 mal, durch das sleep dauert dies 30 sec.
   for($i=30;$i--;sleep(1))
   {
       // definiere ein default-array als Eintrag
       // ID, entry => ID kann ja null sein, da sie so immer <= lastID ist
       $entry = array(0,'');
       // falls sich in der letzten Sekunde ein neuer Eintrag ergab
       // brich die schleife ab
       if($entry = DB::checkForNewEntries($lastID))
       {
           break;
       }
   }
   // gebe ein JS-String aus, der eine variable definiert,
   // welche ein object mit dem eintrag enthält
   echo "var ret = [".$entry[0].",".htmlspecialchars($entry[1])."];";
   ?>

   Und auf der Clientseite stände dann sowas in der Art:

   // diese Funktion wird ausgeführt, wenn der server antwortet
   // hierbei übergibt das ajax die rückgabe als txt-parameter
   var responseFn = function(txt)
   {
       // führe den JS Code aus,
       // danach ist eine lokale Variabel "ret" vorhanden, die den entry enthält
       eval(txt);
       // wenn die ID != 0 ist verarbeite den neuen eintrag
       if(ret[0] != 0)
       {
           handleNewEntry(ret);
       }
   }
   // der Ajax aufruf mir allen notwendigen Parametern
   var req = new Ajax({
       url:'getNewEntries.php',
       parameter:{last_id:id}, // ID-Wert, wird bei jedem neuen Eintrag geändert
       callback:responseFn
   });

   Der Code ist auf das nötigste zusammengestrichen und den eval-Quark kann man sich auch sparen, wenn man ein Framework wie jQuery oder MooTools benutzt, aber das Polling-Konzept sollte klar werden.
   
   Außerdem erfüllt das Beispiel nicht unbedingt alle Anforderungen, was passiert z.B., wenn innerhalb von einer Sekunde mehrere Nachrichten geschrieben werden, aber dazu kann man sich dann ja selber eine Lösung ausdenken.
   
   Mit freundliche Grüßen

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?