Jak działa AJAX ?

W opisach skupiałem się głównie na praktycznym wykorzystaniu ajaxa. Dzisiaj jednak przedstawię ideę działania ajaxa, dzięki któremu możliwe jest to, co kiedyś było jedynie marzeniem.

Trochę historii (ale nie za dużo)
Swoją przygodę z htmlem zacząłem około wersji 3, w czasach kiedy Internet Explorer był do ściągnięcia jako osobny program. Początkowe strony nie były zbyt skomplikowane, ale w miarę ich tworzenia odkrywałem ograniczenia statycznego html. Można było dodać formularz, ale albo wysyłał on jedynie pocztę, albo kierował na jakiś serwis z gotowcami. Tymi gotowcami były księgi gości czy proste fora dyskusyjne napisane w c lub c++. Około 2000 roku poznałem PHP, dzięki któremu można było zrobić szybko wiele podstron z tym samym menu (nie mówiąc o przyjmowaniu danych z formularzy). Dlaczego menu było takie ważne ? W czasach html dodanie nowej podstrony wiązało się ze zmianą wszystkich plików html zawierających określoną listę linków. Można było zrobić menu jako skrypt js, ale w tych dzikich czasach przeglądarki interpretowały skrypty jak chciały i trzeba było poświęcić sporo czasu na dopasowanie do każdej z nich. PHP rozwiązywało większość problemów, ale przy okazji dodawało niedosyt. Cokolwiek się kliknęło powodowało to przeładowanie strony. Ew. trzeba było rozbudowywać formularz. Dodanie nowej kategorii bezpośrednio z listy produktów ? Proszę bardzo, wystarczy dodać kolejne pole, na liście wyboru wstawić opcję „dodaj nowy”, a przy odbiorze dodatkowe sprawdzenie danych w $_POST. Im więcej elementów do dodania przy okazji edycji produktu, tym bardziej skomplikowany robił się skrypt zapisujący dane. I tu pojawił się AJAX.

Jak to działa ?
Dzięki gotowcom typu sajax, advajax lub jQuery nie trzeba zbytnio skupiać się na technicznej stronie. Wystarczy dodać do strony odpowiedni kod javascript i cieszyć się z możliwości dawanych przez AJAXa. Cała reszta nie różni się niczym od zwykłego skryptu. Tak właśnie działa AJAX – robi za przeglądarkę wyświetlającą zadaną stronę. Jednak jest na tyle zmyślny, że robi to nie angażując głównej przeglądarki. Pozwala to wykonywać operacje bez konieczności opuszczania aktywnej strony. Dane wędrują w tle, najpierw do skryptu, a następnie jako odpowiedź ze skryptu do przeglądarki. Jedyne co należy zrobić, to przygotować reakcję na dane odesłane przez skrypt.

Prosty przykład
Na początek skrypt php data.php, którego zadaniem będzie pokazanie daty wygenerowanej przez date():

<?
echo "skrypt php pokazał datę: ".date( "Y-m-d H:i:s" ) ;
?>

Można wywołać go bezpośrednio z przeglądarki. Na ekranie pokażą się data i czas odczytane z serwera.
Pora na mały skrypt js, którego zadaniem będzie pokazanie komunikatu zawierającego treść wygenerowaną przez php.

function pokaz_date() {
$.ajax({
   type: "GET",
   url: "data.php",
   success: function(msg){
     alert( msg );
   }
 });
}

Każde wywołanie pokaz_date() spowoduje pokazanie się na ekranie komunikatu zawierającego tekst: skrypt php pokazał datę: rrrr-mm-dd hh:ii:ss. Zamiast alert() można wstawić inną instrukcję, np. funkcję podmiany zawartości pola input:

function pokaz_date() {
$.ajax({
   type: "GET",
   url: "data.php",
   success: function(msg){
     $("#id_pola_input").val( msg ) ;
   }
 });
}

Wystarczy w kodzie strony umieścić pole <input id=”id_pola_input” type=”text” />, a każde wywołanie pokaz_date() spowoduje umieszczenie w tym polu treści odesłanej przez skrypt php.

Bardziej skomplikowane zastosowania
AJAX może służyć nie tylko jako odbieracz daty z serwera. Możliwość wykonywania operacji w tle pozwala zapisywać, pobierać i kasować dowolne dane znajdujące się na, i poza serwerem. Przykładowo pobieranie danych można zapętlić (przy pomocy setTimeout lub setInterval) i zrobić przy jego pomocy shoutbox. Wcześniej opisane pobieranie daty nada się do tego wprost idealnie. Sam skrypt PHP zmieniamy tak, żeby pobierał kilka ostatnich rekordów z bazy. Po stronie javascriptu robimy funkcję:

function pokaz_chatbox() {
$.ajax({
   type: "GET",
   url: "chatbox.php",
   success: function(msg){
     $("#id_pola_chatbox").html( msg ) ;
     setTimeout( "pokaz_chatbox()", 5000 ) ;
   }
 });
}

Teraz wystarczy odpalić pokaz_chatbox(), żeby co określony czas okienko z wiadomościami było odświeżane. Metoda nie jest idealna, ponieważ zawartość całego okienka jest non-stop zmieniana, ale liczy się sama idea. Gdy już zadziała, to można zająć się dopracowaniem szczegółów. Shoutbox wymaga jeszcze dodawania wypowiedzi do bazy. W javascript robimy funkcję wywołującą plik chatbox_zapisz.php z odpowiednimi parametrami (data: „pole1=”+wartosc1+”&pole2=”+wartosc2), która zostaje podpięta pod <input type=”button” />. Sam skrypt chatbox_zapisz.php będzie robić jak za zwykły skrypt obsługujący dane przesłane formularzem. Na początku połączenie z bazą, odebranie i zabezpieczenie danych (na wypadek, gdyby ktoś chciał wpisać javascript albo drop database), na koniec zapis danych do bazy i odesłanie wyniku: echo 0 lub echo 1 (w zależności od ogólnego rezultatu). To wszystko.

Jeżeli połączy się AJAX z curl, to uzyska się jeszcze więcej możliwości: wysyłanie danych na inny serwer, pobieranie danych z zewnętrznego serwera (zawartość RSS, plików xml z integratorów, itd.). W sklepie internetowym takie połączenie pozwala wyeksportować dane paczki do firmy kurierskiej, albo np. pobrać aktualny cennik z hurtowni.

Możliwe problemy
Większość problemów występuje w samych skryptach. Przeważnie są to literówki, albo pomylone wywołanie ($_POST zamiast $_GET). Jeżeli do wywołań stosowany jest jQuery, to wystarczy w przeglądarce wpisać odpowiedni adres i zobaczyć wygenerowaną odpowiedź (error_reporting(E_ALL); na początku skryptu PHP). Pomocny będzie także Firebug. Otwieramy zakładkę „konsola” i po wygenerowaniu ajaxowego wywołania możemy podejrzeć odpowiedź odesłaną przez serwer.
Innym problemem jest wpisanie nieprawidłowego adresu do skryptu. Czasami nie da się wpisać prostego „ajax.php” i konieczne jest podanie pełnego „http://www.adres.pl/ajax.php”. Zadziała to pod warunkiem, że użytkownik będzie miał w adresie przeglądarki dokładnie to samo, czyli www.adres.pl. W przeciwnym wypadku skrypt zostanie wykonany, ale jego odpowiedź zostanie pominięta i odpalona zostanie funkcja związana z błędami (funkcja success, gdy wszystko jest ok, funkcja error gdy wystąpił błąd).

• Tweet
• Pin It