Wprowadzenie do technologii AJAX

autor: Bartosz 'regua' Reguła, ostatnia modyfikacja: 2008-01-23

szukaj: AJAX PHP XML

Technologia AJAX nie jest niczym nowym, tak naprawdę jest używana już od 1998 roku. Popularność zyskała niedawno, w latach 2004-2005, kiedy to Google zaczęło używać AJAXa na szerszą skalę, w swoich projektach takich jak chociażby GMail. Wtedy właśnie webmasterzy zrozumieli, że połączenie JavaScript z XML daje im bardzo duże możliwości.

"Wyższość" stron wykonanej z użyciem AJAXa nad tą w czystym HTMLu jest taka, że AJAXowa strona nie odświeża się po kliknięciu na link. Jak to działa? Wszystkie dane pobierane są w tle. Minusem takiego rozwiązania jest niedziałający przycisk "wstecz" w przeglądarce - wypadałoby zaopatrzyć naszą stronę we wbudowany, JavaScriptowy "cofnij".

Zakładam, że skoro czytasz ten artykuł, masz przynajmniej podstawową wiedzę o języku JavaScript - jeśli nie, zachęcam do zapoznania się z jakimkolwiek kursem JavaScript dostępnym w sieci.

Część 1 - Wprowadzenie

Spójrz proszę na przykładowy kod w AJAXie. Niektóre funkcje wyglądają znajomo? Tak, to jest JavaScript :)

<!-- DOCTYPE -->
<html>
<head> 

<title>Przykładowy skrypt AJAX</title>

<script type="text/javascript"> // pierwsza część kodu var ObiektXMLHttp = false;
if (window.XMLHttpRequest) 
  { 
   ObiektXMLHttp = new XMLHttpRequest(); } 
   else if (window.ActiveXObject) 
      { 
       ObiektXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); } 

// druga część kodu 
function getData(zrodlo, cel) { 
 if(ObiektXMLHttp) 
  {
   var cel = document.getElementById(cel);
   ObiektXMLHttp.open("GET", zrodlo);

ObiektXMLHttp.onreadystatechange = function() 
{
 if (ObiektXMLHttp.readyState == 4)
   {
    cel.innerHTML = ObiektXMLHttp.responseText; 
   }
} 
// trzecia część kodu 
ObiektXMLHttp.send(null); } } </script> 

</head>
<body>

<h1>AJAX w praktyce</h1> 

<form> 
<input type = "button" value = "Pokaż wiadomość" onclick = "getData('http://adres.pl/wiad.txt', 'div')"> 
</form> 

<div id="div"> Tutaj pojawi się wiadomość. </div> 

</body>
</html>

Spokojnie, wiem, że większość tego kodu jest dla ciebie niezrozumiała. Zaraz wszystko wyjaśnimy, krok po kroku.

Pierwsza część kodu inicjuje obiekt XMLHttp - warunek if() jest tam tylko dlatego, że Internet Explorer nie potrafi zainicjować tego obiektu bez ActiveX - więc musimy mu trochę pomóc.

Druga część kodu zawiera funkcję getData z dwoma atrybutami: zrodlo (źródło), czyli skąd ma pobrać dane, oraz cel - dokąd ma je wysłać. Jak pewnie zauważyłeś, przy otwieraniu pliku z danymi podajemy nie tylko jego adres (najlepiej, aby plik z którego pobierasz dane znajdował się na tym samym serwerze co plik pobierający dane), ale też dodatkowy atrybut - "GET". Co to jest? Mianowicie, jak dowiedziałeś się z kursu PHP, język ten obsługuje dwa najważniejsze sposoby otrzymywania danych - przez tablice $_GET oraz $_POST. AJAX może bardzo prosto wysłać dane za pomocą jednego z tych sposobów - ale jako że POST jest trudniejszy, na razie nie będę go omawiał.

Zauważ też, że treść z pliku pobierana jest dopiero wówczas, gdy ObiektXMLHttp.readyState będzie miał wartość 4. Co to oznacza? Po prostu, że ObiektXMLHttp zakończył swoje działania i można spokojnie wyświetlić pobrane dane. Spójrz tutaj - gdy klikniesz "Pobierz dane przez AJAX", na chwilkę (jest to dosłownie pół sekundy, gdyż plik jest mały - gdybyś za to chciał pobierać kod źródłowy Windowsa z pliku i wyświetlić go na stronie, mogłoby to zająć kilka godzin ;)) ujrzysz napis "Ładowanie....". Jak to zrobić? Naszą funkcję zastąpimy bardziej rozbudowaną:

ObiektXMLHttp.onreadystatechange = function() { 
if (XMLHttp.readyState == (1 || 0)) {
document.getElementById('loading').innerHTML = "Ładowanie..."; }

if (XMLHttp.readyState == 4) {
document.getElementById('loading').innerHTML = "";
document.getElementById(cel).innerHTML = XMLHttp.responseText; }

if (XMLHttp.readyState != (1 || 0 || 4)) { document.getElementById('loading').innerHTML = "" } }

W tym wypadku potrzebujemy div'a o id "loading", który podczas ładowania strony przybierze wartość "Ładowanie....", a w każdym innym wypadku pozostanie pusty. Co oznaczają te liczbowe wartości readystate? Już objaśniam:

0 - niezainicjowany
1 - ładowanie
2 - załadowany
3 - interakcja z dokumentem
4 - zakończono

Użycie readystate 3 na tym poziomie nie będzie nam potrzebne. Zauważ za to, że funkcja odpowiedzialna za wyświetlanie pobranych danych wywoływana jest zawsze wtedy, kiedy następuje onreadystatechange - czyli zmiana readystate. Gdy ten przybierze wartość 4, pobierana jest treść zwrócona przez plik, z którym się połączyliśmy - responseText. W przypadku plików .txt, .html lub podobnych jest to cała zawartość pliku, w przypadku PHP - tylko to, co zostało wydrukowane na ekranie przez funkcje typu echo() lub print().

Trzecia cześć kodu powoduje wysłanie do obiektu XMLHttp swoistego potwierdzenia, które w przypadku pobierania danych przez GET ma wartość zerową, czyli null.

Jak widzisz, AJAX daje wiele możliwości - między innymi obejścia się bez odświeżania strony, czy wyświetlania zawartości innych plików bez użycia języków takich jak PHP.

Do podstawowych prac z AJAXem te informacje wam wystarczą, bardziej zaawansowane funkcje tej technologii (jak łączenie się z plikami PHP przez POST, czy wreszcie użycie plików XML - w końcu do tego ten język został stworzony) postaram się opisać w przyszłości.

Bartosz 'regua' Reguła

szukaj: AJAX AJAX PHP PHP XML XML

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!