Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [ajax] aktualizowany tekst
Forum PHP.pl > Forum > Po stronie przeglądarki
kicaj
16.08.2005, 12:09:38
Napisalem cos takiego:
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.  
  4.         <script language="JavaScript" type="text/javascript">
  5.  
  6.             function makeRequest( strFileName )
  7.             {
  8.                 if( window.XMLHttpRequest )
  9.                 {
  10.                     resHttpRequest = new XMLHttpRequest();
  11.                 }
  12.                 else if( window.ActiveXObject )
  13.                 {
  14.                     resHttpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
  15.                 }
  16.  
  17.                 resHttpRequest.onreadystatechange = createAlert;
  18.                 resHttpRequest.open( 'GET', strFileName, true );
  19.                 resHttpRequest.send( null );
  20.             }
  21.  
  22.             function createAlert()
  23.             {
  24.                 if( resHttpRequest.readyState == 4 )
  25.                 {
  26.                     if( resHttpRequest.status == 200 )
  27.                     {
  28.                         var xmlDoc = resHttpRequest.responseXML;
  29.                         var strPhone = xmlDoc.getElementsByTagName( 'phone' )[0];
  30.                         document.write( strPhone.firstChild.data );
  31.                     }
  32.                     else
  33.                     {
  34.                         alert( 'Blad!' );
  35.                     }
  36.                 }
  37.             }
  38.  
  39.         </script>
  40.  
  41.     </head>
  42.  
  43.     <body>
  44.  
  45.         <a href="#" onclick="makeRequest( 'default.xml' );">Otwórz</a>
  46.  
  47.     </body>
  48. </html>
[HTML] pobierz, plaintext

i default.xml:
[XML] pobierz, plaintext 
  1. <?xml version="1.0" ?>
  2. <root>
  3.     <name>Radek</name>
  4.     <phone type="mobile">123456789</phone>
  5. </root>
[XML] pobierz, plaintext


Opis:
Po kliknięciu w 'Otworz', zostaje pobrany numer telefonu (z xml-a 'phone'). W jaki sposob zrobic tak aby ten numer telefonu byl aktualizowany kiedy plik xml zostanie zmodyfikowany?

P.S. Dopiero poczatki w AJAX-ie
matid
16.08.2005, 12:28:50 
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="makeRequest( 'default.xml' );setTimeout(\"makeRequest('default.xml');\", 1000 );">Otwórz</a>
[HTML] pobierz, plaintext

Oczywiście tą część z setTimeout możesz też wrzucić gdzie indziej, np. do makeRequest.
kicaj
17.08.2005, 09:52:25
Nie dziala:(

Głownie chodzi o to, ze jak otworze dana strone to wyswietli mi sie numer telefonu, jednak gdy zmienie wartosc ('phone') to automatycznie zmieni mi sie na stronie.

Jak to zrobic?
orson
17.08.2005, 09:56:15
witam ...

a nie wystarczy ci że numer będzie zmieniony po odświerzeniu strony questionmark.gif przecież numeru do siebie nie zmieniasz 40 razy na godzinę ...
jeżeli już musisz to tylko setTimeout lub setInterval ... ze strony serwera nie można wymusić aktualizacji po stronie usera ...

pozdrawiam
kicaj
17.08.2005, 10:01:02
Cytat(orson @ 2005-08-17 10:56:15)
jeżeli już musisz to tylko setTimeout lub setInterval...

Musze musze...

To jak to zastosowac?
orson
17.08.2005, 14:23:28
witam ...

normanie ... wiesz wogóle co one robią questionmark.gif przecież to banalne ... dodaj gdzieś na początku skryptu
Kod
<script type="text/javascript">
window.setInterval('wyrażenie poprawne do funkcji eval()', czas_w_ms);
</script>


pozdrawiam
kicaj
18.08.2005, 14:52:25
Juz rozumiem, ale potrzebna byla lekka przebudowa:)
ActivePlayer
18.08.2005, 20:44:37
Kicaj, przedstaw kod proszę... moze tez cos z tego wyciągnę...
kicaj
18.08.2005, 22:39:59
Cytat(ActivePlayer @ 2005-08-18 21:44:37)
Kicaj, przedstaw kod proszę...

Proszę:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script language="JavaScript" type="text/javascript">
  4.  
  5. function makeRequest( strFileName )
  6. {
  7.     if( window.XMLHttpRequest )
  8.     {
  9.         resHttpRequest = new XMLHttpRequest();
  10.     }
  11.     else if( window.ActiveXObject )
  12.     {
  13.         resHttpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
  14.     }
  15.  
  16.     resHttpRequest.onreadystatechange = createAlert;
  17.     resHttpRequest.open( 'GET', strFileName, true );
  18.     resHttpRequest.send( null );
  19.  
  20.     setTimeout( 'makeRequest( strFileName )', 1500 );
  21. }
  22.  
  23. function createAlert()
  24. {
  25.     if( resHttpRequest.readyState == 4 )
  26.     {
  27.         if( resHttpRequest.status == 200 )
  28.         {
  29.             var xmlDoc = resHttpRequest.responseXML;
  30.             var strPhone = xmlDoc.getElementsByTagName( 'phone' )[0];
  31.             document.getElementById( 'displayPhone' ).innerHTML = strPhone.firstChild.data;
  32.         }
  33.         else
  34.         {
  35.             alert( 'Problem ze statusem!' );
  36.         }
  37.     }
  38. }
  39.  
  40. makeRequest( 'default.xml' );
  41.  
  42. </script>
  43. </head>
  44.  
  45. <body>
  46.  
  47. <div id="displayPhone"></div>
  48.  
  49. </body>
  50. </html>
[HTML] pobierz, plaintext

Aby przetestowac ten kod nalezy recznie (lub poprzez formularz) zmienic wartosc 'phone' w pliku 'default.xml'.
ActivePlayer
19.08.2005, 07:08:56
analiza:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script language="JavaScript" type="text/javascript">
  4.  
  5. function makeRequest( strFileName )
  6. {
  7. // tutaj widze jakies tworzenie requesta, troszeczke nie wiem dlaczego tak, to pewnie z mojej niewiedzy
  8. if( window.XMLHttpRequest )
  9. {
  10. resHttpRequest = new XMLHttpRequest();
  11. }
  12. else if( window.ActiveXObject )
  13. {
  14. resHttpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
  15. }
  16.  
  17. //jesli zmienia status wywołuje funkcje createAlert?
  18. resHttpRequest.onreadystatechange = createAlert;
  19. // wysyła żądanie GETem do strFileName ?
  20. resHttpRequest.open( 'GET', strFileName, true );
  21. //wysyła getem null ? what for ?
  22. resHttpRequest.send( null );
  23.  
  24. // ustawia timeout na siebie, co 1,5s... zastanawiam sie czy to sie nie zapętli przypadkiem
  25. setTimeout( 'makeRequest( strFileName )', 1500 );
  26. }
  27.  
  28. function createAlert()
  29. {
  30.  
  31. if( resHttpRequest.readyState == 4 )
  32. {
  33. // jesli status == 200 ? czemu akurat 200 ?
  34. if( resHttpRequest.status == 200 )
  35. {
  36. // stworz xml doca
  37. var xmlDoc = resHttpRequest.responseXML;
  38. // pobierz 'phone'
  39. var strPhone = xmlDoc.getElementsByTagName( 'phone' )[0];
  40. // i wpisz do diva.
  41. document.getElementById( 'displayPhone' ).innerHTML = strPhone.firstChild.data;
  42. }
  43. else
  44. {
  45. alert( 'Problem ze statusem!' );
  46. }
  47. }
  48. }
  49. // wywołanie make Request...
  50. makeRequest( 'default.xml' );
  51.  
  52. </script>
  53. </head>
  54.  
  55. <body>
  56. <!-- div w którym wstawiasz value-->
  57. <div id="displayPhone"></div>
  58.  
  59. </body>
  60. </html>
[HTML] pobierz, plaintext
kicaj
19.08.2005, 09:03:45
questionmark.gif?

Jakies pytania, czy co?
ActivePlayer
19.08.2005, 10:24:10
w komentarzach są smile.gif prześledź kod dokładniej smile.gif bylbym wdzieczny gdybys mogl odpowiedziec smile.gif
kicaj
21.08.2005, 13:21:33
ok smile.gif

Tworzenie requesta, czyli uruchamianie, w przegladarkach Mozilla itp jest xmlhttprequest zas u Microsoft uzywa sie tego jako obiekt ActiveX. W wiekszosci wyjasnien o AJAX-ie, mozna o tym poczytac wiecej.

'onreadystatechange' uruchamia funkcje o nazwie createAlert();

Dlaczego GET? Pobieram dane z pliku o nazwie `strFileName`.

Dlaczego wysylam `null`? Rownie dobrze moze byc pusty nawias (przeciez to to samo). Poczytaj wiecej o `open` i `send` w DOM.

Jesli chodzi o `setTimeout()` to sie poprostu "jakby" odswieza sie o liczbe milisekund podanych w drugim parametrze. Petla trwa bez konca, ale bez odczucia dla serwera, przegladarki - uzytkownika.

Dlaczego `readyState == 4`?
Poniewaz:
0 = niezainicjowane
1 = w trakcie pobierania
2 = pobrano
3 = interaktywne
4 = gotowe

Dlaczego `status == 200`?
Poniewz:
200 = OK
404 = Nie odnaleziono
500 = Wewnętrzny błąd serwera
(...jest tego sporo)


Mysle ze jasno wyjasnilem, jak cos to pytaj:)
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.