JavaScript - Ajax, żądanie HEAD, pamięć podręczna i AJAX, automatyczna aktualizacja stron

Kod:

Ewentualne Objaśnienia:

Kiedy serwer odpowiada nam na dane żądanie może zwracać pewne nagłówki. Jeśli interesuje nas taki nagłówek (ale bez całej odpowiedzi) użyjemy wtedy żądania HEAD czyli :
request.open("HEAD",url)

Kiedy readyState przyjmie wartość 4 uzyskujemy dostęp do nagłówków przez metodę getResponseHeader() obiektu request. I tak jak w tym przykładzie będziemy potrzebować nagłówek "Last-Modified" więc zapiszemy to :
request.getResponseHeader("Last-Modified") na podstawie zwróconych informacji będziemy mogli utworzyć obiekt typu Date podając jako jego parametr naszą zwróconą wartość nagłowka.

Aby pobrać nagłówki na przykład ze skryptu PHP musimy w nim utworzyć taki nagłówek, czyli konstrukcja : header('Nazwa_nagłówka: wartość'); Jeśli przykładowo skrypt PHP zwracałby dane w formie XML należy również ustawić odpowiedni nagłówek czyli : header("Content-Type: text/xml");

Kolejna sprawa, która jest bardzo ważna dla tego przykładu to problem pamięci podręcznej - używając metod GET, POST i HEAD zawsze podajemy jakiś adres docelowy np. skryptu PHP. Adres ten zawsze jest taki sam i tutaj pojawia się często problem z Internet Explorerem, który zakłada, że skoro ma do czynienia z tym samym adresem to strona nie została zaktualizowana.
W tym przykładzie problem ten zostanie pokonany poprzez modyfikację za każdym razem adresu. Jednym z parametrów tego adresu będzie pewien czas, który generowany przez zapis typu Date().getTime() będzie zawsze inny, więc i cały adres będzie zawsze inny .

Przejdźmy do przykładu, pochodzi on z książki, o której już tutaj w kursie nie raz wspominałem i pokazywałem również z niej przykłady czyli http://helion.pl/ksiazki/jscpod.htm .

Przykład ten generalnie odczytuje zawartość pliku tekstowego (przez skrypt PHP), co 5 sekund sprawdzane jest czy czasem data modyfikacji pliku nie zmieniła się. Jeżeli tak należy odczytać plik ponownie oraz zmienić datę ostatniej aktualizacji w odpowiedniej zmiennej skryptu.
Zobaczmy dokładniej :
    - po kliknięciu wywoływana jest funkcja callReadFile, jako jej parametr nazwa pliku, który chcemy odczytać. Wywołuje ona funkcję readFileDoFunction :
        - jej argumenty to nazwa pliku, metoda żądania oraz funkcja - zwróćcie uwagę na przekazanie funkcji anonimowej do kolejnej funkcji
        - funkcja ta wykonuje całe znane już nam działanie - 'zapytanie ajaxowe' - zwróć uwagę na przekazywany parametr t w adresie pliku php - to wspominana metoda, która powoduje, że za każdym razem adres jest inny
        - właściwość onreadystatechange wywołuje funkcję przekazaną jako parametr (ta anonimowa przekazana z funkcji callReadFile), funkcja ta pobiera z pliku PHP nagłówek ostatniej modyfikacji naszego docelowego pliku (tekstowego), z wartości tej tworzymy obiekt typu Date, a następnie wywołujemy funkcję displayResults :
            - jej argumenty to dane do wyświetlenia, nazwa pliku oraz data ostatniej modyfikacji pliku ( w formie milisekund poprzez getTime() )
            - do odpowiedniego DIVa jest wpisana zawartość naszego pliku tekstowego
            - w odstępnie czasowym 5 sekund wywoływana jest funkcja callUpdateIfChanged :
                - jej argumenty to data modyfikacji oraz nazwa pliku
                - funkcja ta wywołuję funkcję readFileDoFunction, ale już z żądaniem nagłówka HEAD - odczytywany jest nagłówek modyfikacji pliku, inna jest też przekazywana funkcja anonimowa jak widzicie
                - porównywane są 2 data - data modyfikacji przekazana z pliku PHP oraz data przekazana do funkcji z funkcji poprzedniej
                - jeśli daty te są różne, czyli od momentu ostatniego sprawdzenia dokonano aktualizacji pliku tekstowego, więc należy odczytać jego zawartość i tą nową zawartość wyświetlić, czyli wywołujemy funkcję callReadFile
                - tworzony jest nowy limit czasu, po którego upłynięciu jest ona wywoływana ponownie

Zerknijmy jeszcze na plik PHP :

Jak widać ustawiany jest odpowiedni nagłówek w formacie, który JS może sobie odczytać. Również jest sprawdzane czy przesłano żądanie HEAD - jeśli tak to nie zwracamy zawartości pliku, a jedynie nagłówek czyli datę ostatniej modyfikacji pliku. Jeśli jest to inne żądanie, czyli w tym przykładzie GET przekazywana jest również zawartość pliku.
Tego kodu oczywiście dokładnie nie tłumaczę, od tego jest Kurs PHP :-)