Zaczynam od tego czym właściwie jest AJAX. Wygooglowałem i... coś skomplikowanie jest to opisane - a tak po prostu, na mój chłopski rozumek, jest to zaprzężenie JavaScriptu do ingerencji w kod HTML strony. JavaScript wysyła żądanie do serwera i otrzymuje odpowiedź, na jej podstawie modyfikuje cały czas otwartą stronę HTML.

Z technicznego punktu widzenia, technologia ta, opiera się na "magicznym" obiekcie przeglądarki - XMLHttpRequest, który na zadane żądanie dostaje od serwera odpowiedź w postaci tekstu (responseText) lub w postaci XML (responseXML). JavaScript "obrabia" odpowiedź i ingeruje w kod HTML (np. innerHTML lub window.write() ). Implementacja obiektu XMLHttpRequest zależy od przeglądarki (np. w FF jest to obiekt JavaScritp, a w IE jest to obiekt ActiveX). Spokojnie - na szczęście nie musimy się martwić o to jak jest u nas - zrobią to za nas odpowiednie klasy.

Googluję dalej, aby dowiedzieć się jak się z tego korzysta. W moje ręce wpada jedna z lepszych (chyba jedyna polska) klasa advAJAX autorstwa Łukasza Lacha. Klasa ta pozwala w prosty sposób kontrolować stan, w jakim jest nasze zapytanie. W skrócie polega to na tym, że wywołujemy metodę get() lub post() obiektu advAJAX i otrzymujemy odpowiedź (obj):

advAJAX.get({
   url: "http://www.example.com/page.html",  
   onSuccess : function(obj) { alert(obj.responseText); }
});

W przykładzie tym próbujemy wykonać zapytanie (metodą get() ) na adresie: http://www.example.com/page.html. Po zakończeniu (wywołanie metody onSuccess) wyświetlamy cały tekst w okienku (alert).

Równie dobrze mogłaby być tutaj dowolna funkcja JS:

advAJAX.get({
   url: "http://www.example.com/page.html",   
   onSuccess : function(obj) { dodajHTML(obj.responseText);}
});

Możemy też przekazać w urlu jakieś zmienne:

page = parseInt(document.getElementById("page").value);
advAJAX.get({
   url: "http://www.example.com/page.php?p="+page,
   onSuccess : function(obj) { dodajHTML(obj.responseText);}
});

Klasa ta pozwala nie tylko kontrolować sytuację, w której strona załadowała się pomyślnie (onSucces), ale również w kilkunastu innych przypadkach, min w momencie inicjalizacji, podczas ładowania, po zakończeniu, po zakończeniu błędem, po zakończeniu sukcesem (pełny spis na http://advajax.anakin.us/index-pl.htm#a6). Np. aby dodać loadera:

page = parseInt(document.getElementById("page").value);
advAJAX.get({
   url: "http://www.example.com/page.php?p="+page,  
   onInitialization : function(obj) { ShowLoading();},  
   onSuccess : function(obj) { dodajHTML(obj.responseText);},  
   onFinalization : function(obj) { HideLoading();}
});;

Wszystkie statusy polegają na interpretowaniu właściwości obiektu http_request.readyState odpowiedzi, ale znowu nie musimy się o to martwić, bo martwi się za nas omawiana klasa.

Klasa advAJAX obsługuje również ponawianie połączenia, pamięć tymczasową przeglądarki, obsługę formularzy i grupowanie wywołań.

Myślę, że ciekawym przykładem, będzie przykład samego autora tej klasy. Będzie to stronicowanie dancyh. Do działania przykładu potrzebne są cztery pliki: 2.html który zawiera cały kod html strony. Kod ten będzie modyfikowany przez JavaScript zawarty w pliku 2.js . W pliku 2.js jest funkcja getRecords() która wysyła proźbę (zapytanie) do pliku 2.php , który generuje odpowiedni XML. Działa to tak:

• użytkownik wczytuje stronę 2.html
• kod JS zawarty w pliku 2.js wysyła żądanie do pliku 2.php
• plik 2.php generuje odpowiedni kod XML i wysyła go z powrotem do JS (plik 2.html jest ciągle otwarty w oknie przeglądarki)
• kod JS otrzymuje odpowiedź w postaci obj.responseXML i funkcją parseXML modyfikuje kod strony 2.html (dodaje odpowiednie tagi do

<tbody id="dataTable"></tbody>

Oczywiście nie możemy zapomnieć o ostatnim, najważniejszym pliku - klasie advAJAX.js. Przykładowy kod generujący XML może wyglądać tak:

<?php
header("Content-type: text/xml; charset=UTF-8");
$query="SELECT count(*)AS total FROM zamowienia_old;";
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
$total = $row['total'];  
$query="SELECT * FROM zamowienia ORDER BY Z.ID LIMIT 0,10";$result =  		mysql_query($query); 
echo '<?xml version="1.0" encoding="UTF-8"?><records total="'.$total.'"  		max_per_page="'.$per_page.'" page="'.$page.'" count="'.mysql_affected_rows().'">';  		

while ($row = mysql_fetch_assoc($result)){  
   echo '<record>';    
   while(list($Index,$Value)=each($row)){      
      echo '<'.$Index.'>'.convert($Value).'</'.$Index.'>';
   }    
   echo '</record>';
} 
echo '</records>';
?>

Oczywiście nic nie stoi na przeszkodzie by korzystać z innych klas, lub samemu napisać dla siebie klasę obsługi AJAXa, a nawet - w ostateczności używać "gołego" XMLHttpRequest.

Uff to by było na tyle.

Może na sam koniec troszkę linków:

A oto co można zrobić przy pomocy AJAXa:

Mam nadzieję, że przybliżyłem problematykę związaną z technologią AJAX. Jednak jak każda technologia ma swoje wady i zalety, nie można jej używać do wszystkiego, jednak to pozostawiam już czytelnikom...