JavaScript - Ajax

Kod:

Ewentualne Objaśnienia:

AJAX - całkiem młoda technologia, potrafiąca "działać cuda" i nie tylko ze względu na to, że rzeczy Ajaxowe są wizualnie bardzo efektywne, ale również sama idea technologii jest czymś wyjątkowym.
Nie będę tutaj specjalnie się rozpowiadał tytułem wstępu - jeśli chcesz poczytać ogólnie o Ajaxie - http://pl.wikipedia.org/wiki/AJAX.

JavaScript w Ajaxie jest wykorzystywany do tworzenia zapytań, wysyłania ich do serwera, analizowania danych XML oraz aktualizacja strony. Kluczem do tego wszystkiego jest obiekt request - jest to obiekt wbudowany w przeglądarki IE, Firefox, Opera oraz Safari. Obiekt ten wykorzystujemy do wysyłania zapytań do serwera, przechowywania odpowiedzi oraz aktualizacji strony.
Obsługa zapytania Ajax w JS to 4 etapy :
    - utworzenie wspomnianego obiektu
    - zdefiniowanie źródła, z którego mają być pobrane dane
    - określenie postępowania z odpowiedzią
    - instrukcja przesyłająca zapytanie

utworzenie wspomnianego obiektu
I znowu  pojawiają się różnice w przeglądarkach, tworzenie obiektu request :
    - w IE var request = new ActiveXObject("Microsoft.XMLHTTP");
    - inne var request = new XMLHttpRequest();

Dlatego aby w skrypcie poprawnie utworzyć obiekt należy stosować zapis typu :

var request = null;
if (window.XMLHttpRequest)
{
    request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
    request = new ActiveXObject("Microsoft.XMLHTTP");
}

zdefiniowanie źródła, z którego mają być pobrane dane
Nasz utworzony obiekt pobiera dane z wyznaczonego źródła (zazwyczaj będzie to po prostu serwer), więc chcemy uzyskać adres programu/skryptu znajdującego się na serwerze. Ten oto programik przeanalizuje zapytanie i odpowie nam. Możemy również  wysłać zapytanie do pliku umieszczonego w tym samym folderze co plik ze skryptem. Wtedy wystarczy jedynie określić nazwę pliku, przykładowo  :

request.open("GET","plik.txt"); czy też request.open("GET","plik.txt", nazwa_usera, haslo_usera);

Pierwszy parametr metody open to typ zapytania (GET, POST itd.), drugi określa gdzie ma zostać wysłane zapytanie. Jeśli dostęp do źródła wymaga podania nazwy użytkownika i hasła należy to podać tak jak wyżej.

określenie postępowania z odpowiedzią
Musimy określić czynności, które mają być wykonywane po pobraniu ze źródła informacji związanych z danym zapytaniem. Do tego służy nam właściwość readyState.
 

Podstawowa technika to stworzenie funkcji, która wywoływana jest za każdym razem gdy wartość readyState się zmieni :

request.onreadystatechange = function () {
alert("Wartość stanu się zmieniła!');
}

W praktyce jest tak, że nic nie robimy do momentu kiedy readyState nie będzie mieć wartość 4 (patrz tabelka), więc:
request.onreadystatechange = function () {
    if( request.readyState == 4)
    {
        alert("Pobieranie odpowiedzi zakończone!");
    }
}

Oczywiście nie chodzi tutaj o to, że po zakończeniu wywołujemy alert - przeprowadzane są odpowiednie operacje, ale o tym dalej.

instrukcja przesyłająca zapytanie
Instrukcja do przesłania zapytania ma postać: request.send(null) - przesyła zapytanie z użyciem metody send obiektu request. Parametr zawiera informacje przesyłaną do serwera wraz z zapytaniem POST. Ponieważ na razie zajmiemy się przesyłaniem GET [definiowane w request.open przypominam] definiujemy parametr jako null .

Przedstawiony przykład (bardzo prosty zresztą) zawiera w sobie wszystko to co wyżej omówiłem. Należy sobie zdawać, że niezwykłość AJAXa polega na tym, że kiedy nasz obiekt request wykonuje swoje zadania i pobiera dane z danego źródła przeglądarka nie przerywa pracy, a stronie nie jest przeładowywana. Czujecie tą potęgę ??

W przykładzie mamy dwa przyciski - jeden wiąże naszą funkcję z plikiem tekstowym, a drugi z plikiem PHP. Rzeczą, o której nie mówiłem jest wyświetlanie informacji jakie uzyskał w odpowiedzi obiekt request. Rezultaty zapisane w postaci ciągu tekstowego umieszczane są we właściwości responseText - tak jak w przykładzie, natomiast otrzymane dokumenty XML są reprezentowane przez obiekt XML umieszczony we właściwości  responseXML .
W przypadku pliku tekstowego zostaje nam wyświetlona jego zawartość. A w przypadku PHP ? No właśnie oczywiście nie jego zawartość (czyli kod PHP) tylko już przetworzony przez serwer kod. Tutaj widać jakie możliwości daje Ajax - nasza strona sobie ciągle działa, nie przeładowuje się, możemy na niej robić coś nowego, a tam w tle 'bez przeszkadzania nam' wykonywany jest skrypt PHP, a jego rezultat jest przesyłany do nas i wyświetlany w momencie wykonania skryptu.

Plik PHP, do którego odwołuje się ten przykład ma kod :

Nie będę go oczywiście tłumaczył bo to nie ten kurs,  a kod i tak jest banalny ;-)