Ich bitte um Hilfe: Ajax Page Refresh

elecfuture · 31. August 2007

Hallo leute,
erfahrene programmierer werden sicherlich jetzt erstmal vor langerweile in die Hand husten, aber für mich stellt dies ein großes Problem dar.

Nach langem Suchen (Google) habe ich ein Script gefunden, welches mir einen Bestimmten Div Layer einer bestimmten ID nach xx sekunden neu läd. Dabei wird allerdings eine Datei includiert.

Dieses Script bewirkt, dass die Datei "content.html" in einem DIV angezeigt wird und nach xx Sekunden refresht wird. Das DIV trägt die ID=content. Also es lädt nur einen bestimmten Teil einer Website alle xx Sekunden neu.

HTML:

<script type="text/javascript">
       function Refresh()
       {
           var req =(window.XMLHttpRequest) ?    new XMLHttpRequest() :((window.ActiveXObject)? new ActiveXObject("Microsoft.XMLHTTP"): false);
           req.open("GET","content.html",true);
           req.onreadystatechange = function()
           {
               if (req.readyState == 4)
               {
                   if (req.status == 200)
                   {
                       var d = document.getElementById("content")
                       var e = document.getElementById("button")
                       window.setTimeout("Refresh()", 100000);
                       e.innerHTML = "aktuallisieren";
                       d.innerHTML = req.responseText;
                       
                   }
               }
           }
           req.send(null)
       }
       window.onload = Refresh();
       
   </script>

Das Problem allerdings ist, dass es nicht erst ein Datei "content.html" aufrufen soll, sondern gleich das DIV mit beliebigem Inhalt nach xx Sekunden neu lädt.

Also noch mal: Das JavaScript greift auf eine Datei zu "content.html". Diese Datei fügt das Script dann in ein DIV ein mit der ID=content.

HTML:

<div id="content"> Hier steht dann der Inhalt der content.html </div>

Dieses DIV wird dann aller xx Sekunden aktualisiert ( resfresht ). Da ich aber mehrere Bereiche habe die Aktualisiert werden sollen, bringt mir ein Dateiimport nix.

Das hier ist nun ein Auszug aus dem Bereich der Website, der ständig aktualisiert werden soll:

HTML:

<!--BEGIN name="viewbar"  -->
<!-- WILLKOMMEN & USER ONLINE -->
<div class="willkommen">
<span class="fontsize_zehn">Es sind <strong>{iBarOnlineUser}</strong> User Online</span>
</div>

<!-- SMALL TALKS & EINSTELLUNG -->
<div class="menue_container">
<div class="menue">
<!--BEGIN name="is_smalltalk" -->
<strong class="pink">{iAnzSmalltalks}</strong> Smalltalk(s)
<!--ENDis_smalltalk  -->
			
<!--BEGIN name="not_smalltalk" -->
<strong>{iAnzSmalltalks}</strong> Smalltalks
<!--ENDnot_smalltalk  --><br />
			
<!--BEGIN name="is_einladung" -->
<strong class="pink">{iAnzEinladungen}</strong> Einladung(en)
<!--ENDis_einladung  -->
			
<!--BEGIN name="not_einladung" -->
<strong>{iAnzEinladungen}</strong> Einladungen
<!--ENDnot_einladung --><br />
</div>
</div>
	
<!--BEGIN name="bar_list" in="viewbar" loop="1" -->
<div class="user_list">
<div class="userbild">
<img src="passfotos/{sPassbild}" alt="" width="19" height="19" border="0" />
</div>
		
<div class="userinfo">
<a href="javascript:void(0)" onClick="SearchParty('FrameViewLocation&amp;frame_id={iID}&amp;hash={sHash}&amp;location={sLocation}');" onfocus="if(this.blur) this.blur()">
<strong class="fontsize_zehn">{sLoginname}</strong></a><br />
<span class="fontsize_zehn">{iAlter} Jahre | {sLand}-{iPlz}</span>
</div>

<div class="usermenue">
<a href="javascript:void(0)" ="Small Talk starten!" onClick="OpenWindow('Smalltalk&amp;url=new&amp;id={iAnPersonID}&amp;bar=1','Smalltalk')" onfocus="if(this.blur) this.blur()">
<img src="smalltalk.gif" width="16" style="float:left" height="18" border="0" alt="" /></a>
<img src="images/{sSexBild}" alt="" width="18" height="18" border="0" style="float:left" align="left" />
</div>
</div>
<!--ENDbar_list  -->
<!--ENDviewbar  -->

Also, diese DIVs sollen nach xx Sekunden neu geladen werden.

<div class="willkommen"></div>
<div class="menue"></div>
<div class="user_list"></div>

Es darf hier nicht mit PHP gearbeitet werden, weil ich nur den dateitype .html verwenden kann.

Ich hoffe Du kannst mir bei diesem Problem Helfen.
Also, ich danke dir schon mal ^^

LG: elecfuture

Sven Mintel · 31. August 2007

Was genau vrstehst du unter "inkludieren"?

Ich sehe nichts, was dort inkludiert wird, sofern du damit [phpf]include[/phpf] meinst.
AJAX sendet eine Anfrage an den Server, in dem Fall an die include.php, und der Server antwortet mit der Ausgabe der include.php.... das hat alles nichts mit "inkluden" zu tun.

Wenn du die Sache dynamisch haben willst, dann gebe dem Aufruf der include.php als Parameter die ID des <div> mit...dann kann diese Anhand dessen den gewünschten Inhalt ausliefern.

elecfuture · 1. September 2007

AJAX sendet eine Anfrage an den Server, in dem Fall an die include.php

Richtig. dieser Inhalt wird zu diesem DIV geleitet.
<div id="DIV1">hier steht der inhalt der include.php</div>

Aber genau diese Abfrage will ich nicht weil ich nicht nur ein DIV ansprechen will, sondern mehrere und das gleich direkt ohne den umweg mit der include.php

Sven Mintel · 1. September 2007

Was meinst du mit "Umweg"

<div>'s fliegen nicht im freien Raum herum, woher soll der Inhalt nach deiner Vorstellung kommen?

Wenn du mehrere <div>'s ansprechen willst, dann lasse die include.php gleich den kompletten JS-Code ausgeben, um die einzelnen DIVs zu manipulieren, den musst du dann nur noch per eval() ausführen und fertitsch.

elecfuture · 1. September 2007

du schreibst das so leicht. Aber ich hab null plan.

Ok, ich versuchs mal bissl ausführlicher:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head><title>Script 1 - AJAX Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
        function Refresh()
        {
            var req =(window.XMLHttpRequest) ?    new XMLHttpRequest() :((window.ActiveXObject)? new ActiveXObject("Microsoft.XMLHTTP"): false);
            req.open("GET","include.php",true);
            req.onreadystatechange = function()
            {
                if (req.readyState == 4)
                {
                    if (req.status == 200)
                    {
                        var d = document.getElementById("DIV1")
                        var e = document.getElementById("button")
                        window.setTimeout("Refresh()", 100000);
                        e.innerHTML = "aktuallisieren";
                        d.innerHTML = req.responseText;
                        
                    }
                }
            }
            req.send(null)
        }
        window.onload = Refresh();
        
    </script>
</head>
<body>

<!-- Dieser Bereich (DIVs) soll(en) nach 60 sekunden aktuallisert werden -->
<div id="useronline">Hier steht die anzahl der User die derzeit Online sind</div>
<div id="userliste">Diese liste listet die momentanen User auf die Online sind</div>
<div id="neue_nachrichten">Neue Nachrichten die der registrierte user erhalbten hat</div>

<!-- Dieser Bereich (DIVs) soll(en) von der aktuallisierung ausgeschlossen werden -->
<div id="navigation"></div>
<div id="copyright"></div>

</body>
</html>

Das Problem ist, ich kann derzeit nur einem DIV sagen, das es nach xx sekunden aktuallisiert werden soll und dabei noch auf die include.php angewiesen bin.
Aber wie du siehst, benötige ich drei bzw. mehrere.

Das Script müsste so umgebaut werden, das es diese drei DIVs ohne "umwege" anspricht und aktuallisiert.

Könntest du mir das bitte zeigen wie du das meinst? oder besser wie ich das meine? Wäre echt cool.

EDIT: Des Weiteren funktioniert der "include" (ich nenns mal so) nicht in IE6 und IE7. Der fügt den inhalt nicht an diese stelle ein.

Sven Mintel · 1. September 2007

Ich verstehe immer noch nicht, was du mit "Umweg" meinst.
Irgendwer muss ja die Daten aus der DB holen und zurückschicken, und das macht halt die include.php

Wenn sie die Daten für ein Div zurückgeben kann, dann kann sie es auch für 3...damit JS auch weiss, was wo hin muss, lasse per PHP nicht nur den Text, sondern gleich die kompletten JS-Anweisungen ausgeben(also das Zuweisen der neuen innerHTML-Eigenschaft an die einzelnen DIVs)...das ist schon alles.

Wenn du keine separate include.php haben willst, dann schreib halt alles in eine einzelne Datei, das geht auch, hier ein lauffähiges Beispiel:

PHP:

<?php


// die naechsten 3 Zeilen dienen nur dem erzeugen wechselnder Daten 
// und koennen bei dir weg...deine Daten kommen ja aus der DB

$users=array('nobbi','straps-babs','uschi','hans-hubert','doktormolle');
shuffle($users);
$users=array_splice($users,0,rand(1,count($users)));

// Hier werden die Daten ermittelt ...in den Array muessen die 
// Ergebnisse deiner DB-Abfragen hinein

$ajax=array(
            'useronline'        =>  'User Online:'.count($users),
            'userliste'         =>  '('.implode(',',$users).')',
            'neue_nachrichten'  => 'Du hast '.rand(0,9).' neue Nachrichten'
            );

//Die JS-Anweisungen werden erzeugt und ausgegeben
if(isset($_GET['fresh']))
  {
    $fresh=explode(',',$_GET['fresh']);
    foreach($ajax as $key => $value)
      {
        if(in_array($key,$fresh))echo 'document.getElementById("'.$key.'").innerHTML=unescape("'.rawurlencode($value).'");';
      }
  exit();
  }

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head><title>Script 1 - AJAX Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
  var req=false;
        function Refresh()
        {
        
            if(req){req.abort();}
            req =(window.XMLHttpRequest) ?    new XMLHttpRequest() :((window.ActiveXObject)? new ActiveXObject("Microsoft.XMLHTTP"): false);
            req.open("GET","<?php echo $_SERVER['PHP_SELF'];?>?fresh="+encodeURIComponent(Refresh.arguments[0].join(','))+'&amp;'+new Date().getTime(),true);
            req.onreadystatechange = function()
            {
                if (req.readyState == 4)
                {
                    if (req.status == 200)
                    {
                      try{eval(req.responseText);}
                      catch(e){}
                    }
                }
            }
            req.send(null)
        }
        window.onload = function()
          {
            //Refresh() erwartet als Parameter die DIV-Ids in Array-Form
            setInterval("Refresh(['useronline','userliste','neue_nachrichten'])",3000);
          }
        
    </script>
</head>
<body>

<!-- Dieser Bereich (DIVs) soll(en) nach 60 sekunden aktuallisert werden -->
<div id="useronline"><?php echo $ajax['useronline'];?></div>
<div id="userliste"><?php echo $ajax['userliste'];?></div>
<div id="neue_nachrichten"><?php echo $ajax['neue_nachrichten'];?></div>

<!-- Dieser Bereich (DIVs) soll(en) von der aktuallisierung ausgeschlossen werden -->
<div id="navigation"></div>
<div id="copyright"></div>

</body>
</html>

elecfuture · 1. September 2007

Ich bin dir für deine Arbeit sehr Dankbar, aber versteif dich mal bitte nicht auf diese Include.php Diese Datei kann genannt werden wie man will. datei.html, dingsbums.txt etc. Spielt keine rolle. Desweiteren kann ich kein PHP in diesem Dokument verwenden. Ist aber mein Fehler, das hab ich nicht gesagt.

EDIT: ICH HAB MEINEN EINLEITUNGSBEITRAG GEÄNDERT

Glaubs mir, ist nicht leicht für mich eine Sache zu erklären wovon ich keine Ahnung habe

swoppi · 12. Dezember 2008

hallo sven ich habe noch ne frage zu dem script. ist es möglich eine ausgabe . zum beispiel die useronline in eine variable zu packen und zu aktualisieren anstatt in das div zu legen ?

oder frage mal anders. kann ich mit der methode auch variablen füllen die sich ständig aktualisieren ?

kuddeldaddeldu · 12. Dezember 2008

Hi,

swoppi hat gesagt.:
oder frage mal anders. kann ich mit der methode auch variablen füllen die sich ständig aktualisieren ?

Klar. Du könntest das serverseitige Script aus Sven's Beispiel z.B. so abändern, dass es Javascript-Anweisungen zurückgibt, die Variablen setzen, statt DIV-Inhalte zu verändern. Oder Du lässt es einen String mit einem JSON-Objekt zurückgeben und machst die Zuweisungen im onreadystatechange-Handler.

LG

swoppi · 12. Dezember 2008

sorry wegen den pn. kommt nicht mehr vor. das mit den json verstehe ich nicht. werde ich noch viel lesen müssen . habe mich das erste mal in diese gefilde gewagt. aber danke erst mal .

Ich bitte um Hilfe: Ajax Page Refresh

elecfuture

Mitglied

Sven Mintel

Mitglied

elecfuture

Mitglied

Sven Mintel

Mitglied

elecfuture

Mitglied

Sven Mintel

Mitglied

elecfuture

Mitglied

swoppi

Grünschnabel

kuddeldaddeldu

Erfahrenes Mitglied

swoppi

Grünschnabel

Neue Beiträge