Forum PHP.pl > [AJAX][JS] obsługa ładowania danych

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX][JS] obsługa ładowania danych

krzysiek_raven

6.04.2008, 10:52:11

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

[HTML] pobierz, plaintext 
<!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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 <script language="javascript">
 
     var XMLHttpRequestObject = false;
 
     // sposób 1
     if (window.XMLHttpRequest){
         XMLHttpRequestObject = new XMLHttpRequest();
     }
     else if (window.ActiveXObject){
         XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
     }
 
     function getData(dataSource, divID) 
     {
         if (XMLHttpRequestObject){
             var obj = document.getElementById(divID);
             XMLHttpRequestObject.open("GET", dataSource);
         }
 
         XMLHttpRequestObject.onreadystatechange = function() // funkcja anonimowa - sprawdza stan objektu XMLHttpRequestObject
         {
             if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){ // zakończone sukcesem
                 obj.innerHTML = XMLHttpRequestObject.responseText; // wyświetlanie pobranego tekstu
             }
             if (XMLHttpRequestObject.readyState == 1){ // nie zakończone - ładowanie
                 obj.innerHTML = "<img src='images/ajax-loader.gif' />"; // obrazek ładowania
             }
         }
 
         XMLHttpRequestObject.send(null);
     }
 
 </script>
 
 
 <title>Insert title here</title>
 </head>
 <body>
 
     <h1>Demonstracja działania AJAXa</h1>
 
     <form>
         <input type="button" value="Pobierz" onclick="getData('test.txt', 'targetDiv')">
     </form>
 
     <div id="targetDiv">
         Tu pojawi sie pobrana wiadomość
     </div>
 
 </body>
 </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?

sennin

6.04.2008, 11:05:40

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.

krzysiek_raven

6.04.2008, 21:00:31

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 
function getData(dataSource, divID, loader)
    {
        var XMLHttpRequestObject = false;
 
        if (window.XMLHttpRequest){
            XMLHttpRequestObject = new XMLHttpRequest();
        }
        else if (window.ActiveXObject){
            try    {
                XMLHttpRequestObject = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e) {
                XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
 
 
        if (XMLHttpRequestObject){
            var obj = document.getElementById(divID);
            XMLHttpRequestObject.open("GET", dataSource);
 
            XMLHttpRequestObject.onreadystatechange = function() // funkcja anonimowa - sprawdza stan objektu XMLHttpRequestObject
            {
                if (XMLHttpRequestObject.readyState == 4 || XMLHttpRequestObject.readyState == 3){ // zakończone sukcesem
                    if (XMLHttpRequestObject.status == 200){
                        if(loader != 0){
                            document.body.removeChild(document.getElementById('preloader'));
                        }
                        obj.innerHTML = XMLHttpRequestObject.responseText;
                        delete XMLHttpRequestObject;
                        XMLHttpRequestObject = null;
                    }
                }
                else{
                    if (!document.getElementById('preloader') && loader != 0){
                        var preloader = document.createElement('div');
                        preloader.id = 'preloader';
                        preloader.align='center';
                        preloader.innerHTML = 'Proszę czekać...<br /><img src="images/ajax-loader.gif" alt="prosze czekac..." />';
                        document.body.appendChild(preloader);    
                    }
                }
            }
 
            XMLHttpRequestObject.send(null);
        }
    }
[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.

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.