Inainte de a folosi o tehnologie eu cred ca programatorul trebuie sa stie intai la ce foloseste.

Pana la AJAX utilizatorul trebuia sa completeze formularul, sa apese submit, sa astepte ca serverul sa proceseze cererea si primeasca inpoi o pagina complet noua(serverul trimite pagina intreaga). Tot acest proces inseamna asteptare destul de suparatoare mai ales pentru un utilizator nerabdator.
Cu AJAX aplicatiile web pot fi facute mult mai dinamice. Concret AJAX foloseste mai multe tehnologii "mai vechi", HTML, Javascript, DHTML, DOM pentru a actualiza o pagina web fara o reincarcare completa.
AJAX foloseste obiectul XMLHttpRequest si Javascript ca intermediari intre formular si server. Cand utilizatorul introduce datale si apasa submit formularul nu mai este trimis la server. Input-ul este preluat de codul Javascript si trimis la server fara ca utilizatorul sa isi dea seama ce se intampla. Partea si mai buna este cererile catre server se fac asincron ceea ce inseamna ca utilizatorul nu trebuie sa astepte raspunsul cererii anterioare pentru a continua sa foloseasca aplicatia. Pe masura ce sosesc raspunsurile de la server portiuni din pagina sunt actualizate.

O aplicatie care foloseste AJAX consta din 3 parti esentiale:

1. Obtinerea obiectului XMLHttpRequest.

Dupa cum am spus AJAX foleste un obicet XMLHttpRequest. Obtinerea obiectului XMLHttpRequest este diferita pentru browsere diferite. Urmatorul cod urmareste obtinerea obiectelui pentru orice tip de browser.

function createXMLHttp()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}

2. Cererile catre server si raspunsurile acestuia.

AJAX interpune codul Javascript intre browser si server pasii urmatori sunt prezenti in majoritatea aplicatiilor AJAX.
- extrage datele din formular
- construieste URL-ul
- deschide o conexiune catre server
- setaza o functia ce va fi apelata cand primeste raspunsul
- trimite cererea

//cererea
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) (city == "")) return;
if ((state == null) (state == "")) return;

// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

// Open a connection to the server
xmlHttp.open("GET", url, true);

// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;

// Send the request
xmlHttp.send(null);
}

//raspuns
function updatePage()
{
if (xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}

3. Legatura cu pagina web

Singurul lucru care a mai ramas de facut este sa invocam scriptul cand apare o shimbare in formular.


<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
</form>