Obiectul XMLHttpRequest

Toate script-urile Ajax folosesc obiectul XMLHttpRequest, astfel e util sa cunoasteti elementele principale ale acestui obiect.
Scopul obiectului XMLHttpRequest este de a permite JavaScript sa formuleze cereri HTML si sa le trimita la server, dand astfel posibilitatea comunicarii cu serverul si afisarea datelor primite fara a fi necesara reincarcarea paginii, in plus, pot fi procesate in paralel mai multe conexiuni cu serverul, fara a bloca browser-ul pana la primirea raspunsului.
Inainte de a putea utiliza XMLHttpRequest, trebuie creata o instanta a acestui obiect cu formula:
                var xmlHttp = new XMLHttpRequest()   ("xmlHttp" poate fi orice nume de variabila)
XMLHttpRequest este suportat de toate browserele moderne si de principalele sisteme de operare: Windows, UNIX/Linux si Mac OS; totusi, implementarea acestuia difera intre unele navigatoare web, versiuni de Internet Explorer mai mici de 7 creaza acest obiect ca obiect de tip ActiveX. Trebuie sa tineti cont de acest aspect (destul de important) si sa creati instantierea obiectului XMLHttpRequest in functie de browser-ul care va fi folosit, pe de o parte pentru Mozila Firefox, Opera, Safari, .. (si IE7+, care urmaresc standardul de baza) si pe de alta parte pentru Internet Explorer care, in functie de versiune, creaza obiectul ca ActiveX. Aceasta difereta intre browsere mai complica lucrurile, dar nu e ceva dificil, pentru a crea obiectul XMLHttpRequest pentru toate navigatoarele, puteti folosi urmatoarea functie:

function get_XmlHttp() {
  // Creaza variabila care va contine instanta la XMLHttpRequest, initial cu valoare nula
  var xmlHttp = null;

  if(window.XMLHttpRequest) {		// Daca browser-ul e Forefox, IE7+, Opera, Safari, ...
    xmlHttp = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {	// Daca browser-ul este Internet Explorer 6 sau 5
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlHttp;
}
		

Proprietatile si metodele obiectului XMLHttpRequest

Dupa ce a fost creata instanta la XMLHttpRequest, puteti folosi proprietatile si metodele acestui obiect. Mai jos este prezentata lista acestora.
        Proprietati

• onreadystatechange - Folosit ca un "event handler", determina care eveniment va fi apelat la schimbarea starii "readyState".
• readyState - un numar intre 0 si 4 care reprezinta starea cererii ( 0 : neinitializat, 1 : incarca, 2 : incarcat (date trimise), 3 : interactiv (incep sa se primeasca date de raspuns), 4 : complet (raspuns primit complet)).
• responseText - returneaza raspunsul primit de la server, in format sir text (string).
• responseXML - returneaza raspunsul primit de la server in format XML.
• status - codul de stare HTTP al raspunsului de la server, in format numeric (200 pt. raspuns corect, 404 pt. "Ne gasit", 500 pt. o eroare de server, etc.).
• statusText - codul de stare HTTP al raspunsului de la server, in format text ("OK", "Not found", "Internal Server Error", etc.).

Metode

• abort() - Anuleaza cererea curenta
• getAllResponseHeaders() - Returneaza sub forma de sir toate Header-ele HTTP primite ca raspuns
• getResponseHeader(x) - Returneaza valoarea Header-ului 'x' specifat
• open(method, URL, flag) - Creaza cererea care va fi trimisa.
  • - "metoda" defineste metoda prin care sunt trimise datele la server (GET sau POST)
  • - "URL" este adresa paginii /scriptului care va fi apelat, cu valorile care vor fi transmise
  • - "flag" este o valoare booleana true sau false. Daca este adaugat false, executia scriptului se opreste pana la primirea raspunsului de la server, daca este adaugat true, script-ul isi continua executia, astfel se pot trimite mai multe cereri simultan. Acest argument "flag" este optional, poate fi omis, in acest caz fiind considerat true.
• send(content) - Trimite cererea curenta la server. Parametrul "content" indica informatia care poate fi trimisa impreuna cu datele din "open()", poate fi un sir, array, obiect XML DOM sau null si se foloseste de obicei cand datele sunt trimise prin POST. Daca trimiteti doar date prin GET si nu e nevoie sa folositi acest parametru, adaugati "null".
• setRequestHeader('eticheta', 'valoare') - Perminte stabilirea de Headere care sa fie transmise la server impreuna cu cererea creata cu "open()"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Teste XMLHttpRequest</title>

<script type="text/javascript">
<!--
// Functia care verifica si creaza obiectul XMLHttpRequest in functie de browser
function get_XmlHttp() {
  // Creaza variabila care va contine instanta la XMLHttpRequest, initial cu valoare nula
  var xmlHttp = null;

  if(window.XMLHttpRequest) {		// Daca browser-ul e Forefox, Opera, Safari, ...
    xmlHttp = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {	// Daca browser-ul este Internet Explorer
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlHttp;
}

// Functia care trimite datele la un fisier extern si returneaza raspunsul
function makerequest(serverPage, tagID) { //alert(serverPage+' - '+tagID);
  var cerere_http =  get_XmlHttp();			// Apeleaza functia pt. crearea instantei la obiectul XMLHttpRequest

  cerere_http.open("GET", serverPage);			// Defineste datele pt. efectuarea cererii
  cerere_http.send(null);		// Efectuiaza trimiterea datelor

  // Verifica starea cererii
  // Daca raspunsul e primit complet, il transfera in eticheta HTML cu id-ul din "tagID"
  cerere_http.onreadystatechange = function() {
    if (cerere_http.readyState == 4) {
      document.getElementById(tagID).innerHTML = cerere_http.responseText;
    }
  }
}
//-->
</script>
</head>
<body>

<h5 style="cursor:pointer;" onclick="makerequest('test.txt', 'raspuns')"><u><u>Click</u></u></h5>
<div id="raspuns">Continutul initial din tag-ul DIV</div>

</body>
</html>