Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX] przeładowanie elementu co 30 sekund
Forum PHP.pl > Forum > Przedszkole
krzychu0808
16.08.2008, 08:32:03
Witam....
Nie znam języka ajax ale może zrobienie odświeżenia 1 elementu co 30 sekund nie będzie trudne...
mam zegarek graficzny który wygląda tak:
[PHP] pobierz, plaintext 
  1. <? $aData = date("Hi", time()+300);?>
  2. <center><img src="images/zegar/<?=$aData[0]?>.gif" alt="Zegar"/><img src="images/zegar/<?=$aData[1]?>.gif" alt="Zegar"/><img src="images/zegar/dwukropek.gif" alt="img"/><img src="images/zegar/<?=$aData[2]?>.gif" alt="Zegar"/><img src="images/zegar/<?=$aData[3]?>.gif" alt="Zegar"/></center>
[PHP] pobierz, plaintext


chodzi mi o to żeby co 30 sekund odświeżał się sam zegarek.. bez przeładowania strony a wiem że ajax daje taką możliwość... proszę o pomoc....
Maxik
16.08.2008, 13:41:20
Kod
function callAHAHget(url, div) {
    try {
         req = new XMLHttpRequest();
    } catch(err1) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(err2) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(err3) {
                req = false;
            }
        }
    }
    
    var rand = parseInt(Math.random()*99999999);
    req.onreadystatechange = function() {responseAHAH(div)};
    req.open("GET", url+'&rand='+rand, true);
    req.send(null);
}

function responseAHAH(div) {
    if(req.readyState==4) {
        if(req.status==200) {
            document.getElemenById(div).innerHTML = req.responseText;
        } else {
            alert('Błąd serwera')
        }
    } else {
        document.getElementById(div).innerHTML = 'Wczytywanie';
    }
}


Zapisz to sobie do pliku ahah.js .
W sekcji head strony daj: <script type="text/javascript" src="ahah.js"></script>
Do onLoad w body daj setInterval("callAHAHget('adres.php', 'zegarek');", 30000);

Pisane z palca, nic nie gwarantuję, powinno działać.
krzychu0808
16.08.2008, 15:02:32
Coś nie działa w head:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="ahah.js"></script>
[HTML] pobierz, plaintext


dodałem tak:
Kod
<body onload = "setInterval("callAHAHget('index.php', 'zegarek');", 30000);">
<? $aData = date("Hi", time()+300);?>
<center><img src="images/zegar/<?=$aData[0]?>.gif" alt="Zegar"/><img src="images/zegar/<?=$aData[1]?>.gif" alt="Zegar"/><img src="images/zegar/dwukropek.gif" alt="img"/><img src="images/zegar/<?=$aData[2]?>.gif" alt="Zegar"/><img src="images/zegar/<?=$aData[3]?>.gif" alt="Zegar"/></center>
</body>

ten kod co napisałem dałem jako ahah.js ale nic się nie dzieje nie odświeża..

proszę o pomoc....
Maxik
16.08.2008, 16:42:09
<body onload="setInterval("callAHAHget('adres.php', 'zegarek');", 30000);">

W miejscu gdzie powinien być zegarek daj <div id="zegarek"></div>
krzychu0808
16.08.2008, 17:06:33
Zrobiłem

Kod
<body onload="setInterval("callAHAHget('index.php', 'zegarek');", 30000);">
<div id="zegarek">
<div class="zegarek">
<? $aData = date("Hi", time()+300);?>
<center><img src="images/zegar/<?=$aData[0]?>.gif" alt="Zegar"/><img src="images/zegar/<?=$aData[1]?>.gif" alt="Zegar"/><img src="images/zegar/dwukropek.gif" alt="img"/><img src="images/zegar/<?=$aData[2]?>.gif" alt="Zegar"/><img src="images/zegar/<?=$aData[3]?>.gif" alt="Zegar"/></center>
</div>
</div>
</body>


i nadal nic się nie dzieje
nospor
16.08.2008, 17:10:28
Kod
<body onload="setInterval('callAHAHget(\'index.php\', \'zegarek\');', 30000);">
krzychu0808
16.08.2008, 17:34:49
wyrzuca "Błąd Serwera"....
Ajax jest zainstalowany na serwerze...
AxZx
16.08.2008, 18:59:20
tutaj masz przyklad jak mozna cos takiego zrobic
http://axzx.pl/technologie/
krzychu0808
16.08.2008, 19:16:22
hehe na tej stronie jest tylko przykład winksmiley.jpg
Cysiaczek
16.08.2008, 20:23:53
Cytat
hehe na tej stronie jest tylko przykład winksmiley.jpg


Dowiedz się, czy jest ajax
http://pl.wikipedia.org/wiki/AJAX

a potem użyj najprostszej biblioteki go obsłiugującej:
http://pl.wikipedia.org/wiki/AdvancedAJAX

Nie pytaj tylko skąd ściągnąć, bo się zdenerwuję smile.gif
Pozdrawiam.
AxZx
17.08.2008, 21:25:50
Cytat
hehe na tej stronie jest tylko przykład

no i? co w tym smiesznego?

Kod
setInterval('refresh2_shoutbox()', 2000);

function refresh2_shoutbox(){    
    $.get('responder.php?c=shoutbox&m=get', function(data){
        $('#shoutbox_content').html(data);
    });
}
Trojan
17.08.2008, 21:42:17
krzychu0808 z tego co wiem Ajax działa po stronie przeglądarki (czyli nie jest potrzebny po stronie servera) . I trochę źle rozumiesz co koledzy mają na myśli.

TWORZYSZ 3 pliki:

ahah.js czyli to co podał Maxik w 2-gim poscie
zegarek.php czyli to co napisałeś w pierwszym poście (nic tam nie dodawaj nie zmieniaj)
index.html ma on wygladać tak:
[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<script type="text/javascript" src="ahah.js"></script>
  4. 	</head>
  5.  
  6. 	<body onload = "setInterval("callAHAHget('zegarek.php', 'zegarek');", 30000);">
  7. 		<div id="zegarek"></div>
  8. 	</body> 
  9. </html>
[HTML] pobierz, plaintext


umieść wszystkie pliki w jednym folderze
zegarek powinien pojawić się gdy odpalisz Index.html
Maxik
17.08.2008, 21:43:57
Sprostuję post Trojana:
index.html:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="ahah.js"></script>
  4. </head>
  5.  
  6. <body onload = "setInterval(\"callAHAHget('zegarek.php', 'zegarek');\", 30000);">
  7. <div id="zegarek"></div>
  8. </body> 
  9. </html>
[HTML] pobierz, plaintext
Trojan
17.08.2008, 22:26:06
hehe Maxik \ nie pomaga w tym wypadku, zresztą zauważyłem że cała funkcja callAHAHget nie działa sadsmiley02.gif (przynajmniej u mnie) napisałem coś prostszego:
index.html
[XML] pobierz, plaintext 
  1. <html>
  2.       <head>
  3.             <script type="text/javascript">
  4.  
  5.       //aby dzialalo na IE (niewiem kto tego uzywa jeszcze)
  6.       var ObiektXMLHttp = false;
  7.  
  8.       if (window.XMLHttpRequest){
  9.             ObiektXMLHttp = new XMLHttpRequest();
  10.             }else if(window.ActiveXObject){
  11.                   ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
  12.                   }
  13.  
  14.       function zegar(){
  15.             if(ObiektXMLHttp){
  16.                   //pobieranie danych
  17.                   ObiektXMLHttp.open("GET", 'zegarek.php');
  18.  
  19.                   ObiektXMLHttp.onreadystatechange = function(){
  20.                         if(ObiektXMLHttp.readyState == 4){
  21.                               i = ObiektXMLHttp.responseText;
  22.                               document.getElementById('zegarek').innerHTML=i;
  23.                         }
  24.                   }
  25.  
  26.                   ObiektXMLHttp.send(null);
  27.             }
  28.       }
  29.  
  30.             </script>
  31.       </head>
  32.  
  33.       <body onload="setInterval('zegar();', 30000);">
  34.             <div id="zegarek"></div>
  35.       </body>
  36. </html>
[XML] pobierz, plaintext

w tym wypadku ahah.js nie jest już potrzebny
działa na 100% (sprawdzałem)
Maxik
18.08.2008, 00:05:51
Z mojej biblioteki korzystam juz dobre 3 miesiące i zawsze działała. Chyba nawet wiem w czym był błąd: url jest nastawiony na minimum 1 parametr gdyż rand dodaje odrazu & zamiast ? więc zegarek.php?abc=abc już by działało.
krzychu0808
18.08.2008, 09:35:30
Działa ale jest 1 problem jak ustawiliśmy co 30 sekund to zegarek się pojawia dopiero po 30 sekundach i się odświeża co 30 sekund skorzystałem z

Cytat
[HTML] pobierz, plaintext 
  1. index.html
  2. XML
  3. <html>
  4.      <head>
  5.            <script type="text/javascript">
  6.  
  7.      //aby dzialalo na IE (niewiem kto tego uzywa jeszcze)
  8.      var ObiektXMLHttp = false;
  9.  
  10.      if (window.XMLHttpRequest){
  11.            ObiektXMLHttp = new XMLHttpRequest();
  12.            }else if(window.ActiveXObject){
  13.                  ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
  14.                  }
  15.  
  16.      function zegar(){
  17.            if(ObiektXMLHttp){
  18.                  //pobieranie danych
  19.                  ObiektXMLHttp.open("GET", 'zegarek.php');
  20.  
  21.                  ObiektXMLHttp.onreadystatechange = function(){
  22.                        if(ObiektXMLHttp.readyState == 4){
  23.                              i = ObiektXMLHttp.responseText;
  24.                              document.getElementById('zegarek').innerHTML=i;
  25.                        }
  26.                  }
  27.  
  28.                  ObiektXMLHttp.send(null);
  29.            }
  30.      }
  31.  
  32.            </script>
  33.      </head>
  34.  
  35.      <body onload="setInterval('zegar();', 30000);">
  36.            <div id="zegarek"></div>
  37.      </body>
  38. </html>
[HTML] pobierz, plaintext

w tym wypadku ahah.js nie jest już potrzebny
działa na 100% (sprawdzałem)
golaod
18.08.2008, 09:53:38
<body onload="zegar();setInterval('zegar();', 30000);">
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.