Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [AJAX][JS] obsługa ładowania danych
krzysiek_raven
post 6.04.2008, 10:52:11
Post #1





Grupa: Zarejestrowani
Postów: 86
Pomógł: 0
Dołączył: 28.09.2007

Ostrzeżenie: (0%)
-----

Witam. Niedawno zacząłem uczyć sie Ajaxa i js. Zrobiłem taki przykładowy program:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  
  6.  <script language="javascript">
  7.  
  8.      var XMLHttpRequestObject = false;
  9.  
  10.      // sposób 1
  11.      if (window.XMLHttpRequest){
  12.          XMLHttpRequestObject = new XMLHttpRequest();
  13.      }
  14.      else if (window.ActiveXObject){
  15.          XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  16.      }
  17.  
  18.      function getData(dataSource, divID) 
  19.      {
  20.          if (XMLHttpRequestObject){
  21.              var obj = document.getElementById(divID);
  22.              XMLHttpRequestObject.open("GET", dataSource);
  23.          }
  24.  
  25.          XMLHttpRequestObject.onreadystatechange = function() // funkcja anonimowa - sprawdza stan objektu XMLHttpRequestObject
  26.          {
  27.              if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){ // zakończone sukcesem
  28.                  obj.innerHTML = XMLHttpRequestObject.responseText; // wyświetlanie pobranego tekstu
  29.              }
  30.              if (XMLHttpRequestObject.readyState == 1){ // nie zakończone - ładowanie
  31.                  obj.innerHTML = "<img src='images/ajax-loader.gif' />"; // obrazek ładowania
  32.              }
  33.          }
  34.  
  35.          XMLHttpRequestObject.send(null);
  36.      }
  37.  
  38.  </script>
  39.  
  40.  
  41.  <title>Insert title here</title>
  42.  </head>
  43.  <body>
  44.  
  45.      <h1>Demonstracja działania AJAXa</h1>
  46.  
  47.      <form>
  48.          <input type="button" value="Pobierz" onclick="getData('test.txt', 'targetDiv')">
  49.      </form>
  50.  
  51.      <div id="targetDiv">
  52.          Tu pojawi sie pobrana wiadomość
  53.      </div>
  54.  
  55.  </body>
  56.  </html>
[HTML] pobierz, plaintext


Po kliknięciu w przycisk ma zostać pobrany tekst. No i w czasie ładowania tekstu chciałbym aby pojawiał się obrazek (gif - ładowanie). Wszystko działa dobrze na IE, natomiast na Firefoxie już obrazek sie nie pokazuje. Co zrobić żeby w FF pokazywał się obrazek w czasie ładowania tekstu?

Ten post edytował krzysiek_raven 6.04.2008, 10:57:19
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
sennin
post 6.04.2008, 11:05:40
Post #2





Grupa: Zarejestrowani
Postów: 16
Pomógł: 1
Dołączył: 8.03.2007

Ostrzeżenie: (0%)
-----

Przeglądarki nie gwarantują obsługi wszystkich stanów wykonywanego zapytania asynchronicznego. To, że w IE działa dobrze, wynika z tego, że akurat ta przeglądarka obsługuje readyState o wartości 1 (w trakcie pobierania). Jeśli chcesz pokazać obrazek w trakcie ładowania, wyświetl go przed wykonanie zapytania a schowaj po jego zakończeniu. Nie polegaj na wartościach readyState, gdyż ich implementacja różni się w zależności od przeglądarki. Proponuje Ci napisać prosty skrypt wyświetląjący po kolei wszystkie stany i przetestowanie go na kilku różnych przeglądarkach.
Go to the top of the page
+Quote Post
krzysiek_raven
post 6.04.2008, 21:00:31
Post #3





Grupa: Zarejestrowani
Postów: 86
Pomógł: 0
Dołączył: 28.09.2007

Ostrzeżenie: (0%)
-----

Z tego co zauważyłem to na IE działają kody 1, 2, 3, 4, na FF tylko 4, a na Operze wogóle nie chce sie załadować i jest tylko 1, 2, 3 :/
Ehhh, a było tak pieknie dopuki tego nie zobaczyłem:/

Już mam powoli dosyć tego Ajaxa...

[HTML] pobierz, plaintext 
  1. function getData(dataSource, divID, loader)
  2.     {
  3.         var XMLHttpRequestObject = false;
  4.  
  5.         if (window.XMLHttpRequest){
  6.             XMLHttpRequestObject = new XMLHttpRequest();
  7.         }
  8.         else if (window.ActiveXObject){
  9.             try    {
  10.                 XMLHttpRequestObject = new ActiveXObject("Msxml2.XMLHTTP");
  11.             }
  12.             catch(e) {
  13.                 XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  14.             }
  15.         }
  16.  
  17.  
  18.         if (XMLHttpRequestObject){
  19.             var obj = document.getElementById(divID);
  20.             XMLHttpRequestObject.open("GET", dataSource);
  21.  
  22.             XMLHttpRequestObject.onreadystatechange = function() // funkcja anonimowa - sprawdza stan objektu XMLHttpRequestObject
  23.             {
  24.                 if (XMLHttpRequestObject.readyState == 4 || XMLHttpRequestObject.readyState == 3){ // zakończone sukcesem
  25.                     if (XMLHttpRequestObject.status == 200){
  26.                         if(loader != 0){
  27.                             document.body.removeChild(document.getElementById('preloader'));
  28.                         }
  29.                         obj.innerHTML = XMLHttpRequestObject.responseText;
  30.                         delete XMLHttpRequestObject;
  31.                         XMLHttpRequestObject = null;
  32.                     }
  33.                 }
  34.                 else{
  35.                     if (!document.getElementById('preloader') && loader != 0){
  36.                         var preloader = document.createElement('div');
  37.                         preloader.id = 'preloader';
  38.                         preloader.align='center';
  39.                         preloader.innerHTML = 'Proszę czekać...<br /><img src="images/ajax-loader.gif" alt="prosze czekac..." />';
  40.                         document.body.appendChild(preloader);    
  41.                     }
  42.                 }
  43.             }
  44.  
  45.             XMLHttpRequestObject.send(null);
  46.         }
  47.     }
[HTML] pobierz, plaintext


Z pomocą różnych źródeł stworzyłem cos takiego. Zależy mi na tym żeby w czasie ładowania był pokazywany obrazek lub komunikat że strona sie ładuje. Działa mi ten kod na IE i Operze ale na FF nie działa - niechce sie pobrać tekst z serwera. Tutaj wsadziłem ten skrypt. Mam nadzieje że ktoś mi pomoze bo ja już nie mam na to pomysłów. Błąd sie pojawia chyba w momencie usuwania elementu preloader.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 03:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn