Programarea client-server cu AJAX – XMLHttpRequest

Acesta este un ghid și o referință pentru obiectul XMLHttpRequest, o componentă cheie de știut în programarea Ajax.

Exemplu

Iată un scurt exemplu de pagină web care utilizează XMLHttpRequest. Vom intra în detalii și modalități de a rezolva diverse probleme care pot merge prost mai târziu.

<html><!-- example.html : public domain -->
<script language="JavaScript" type="text/JavaScript" >
function alertContents(httpRequest) {
  if (httpRequest.readyState == 4) {
    // Everything is good, the response is received
    if ((httpRequest.status == 200) || (httpRequest.status == 0)) {
      // FIXME: perhaps a better example is to *replace* some text in the page.
      var htmlDoc = document.createElement('div'); // Create a new, empty DIV node.
      htmlDoc.innerHTML = httpRequest.responseText; // Place the returned HTML page inside the new node.
      alert("The response was: " + httpRequest.status + httpRequest.responseText);
    } else {
      alert('There was a problem with the request. ' + httpRequest.status + httpRequest.responseText);
    }
  }
}
function send_with_ajax(the_url) {
  var httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
  httpRequest.open("GET", the_url, true);
  httpRequest.send(null);
}
</script>
<p onClick="send_with_ajax('example.html');">
Click me!
</p>
</html>

 

Referință obiect

Metode

abort()

 Anulează cererea curentă.

getAllResponseHeaders()

Returnează setul complet de antete HTTP sub formă de șir de caractere.

getResponseHeader(headerName)

Returnează valoarea antetului HTTP specificat.

open(method, URL)

open(method, URL, async)

open(method, URL, async, userName)

open(method, URL, async, userName, password)

Specifică metoda, URL-ul și alte atribute opționale ale unei cereri.

• Parametrul method poate avea valorile GET, POST, HEAD, PUT, DELETE sau o varietate de alte metode HTTP listate în specificația W3C.
• Parametrul URL poate fi un URL relativ sau complet.
• Parametrul async specifică dacă cererea ar trebui gestionată asincron sau nu – true înseamnă că procesarea scriptului continuă după metoda send(), fără a aștepta un răspuns, iar false înseamnă că scriptul așteaptă un răspuns înainte de a continua procesarea scriptului.

send(content)

Trimite cererea. Conținutul poate fi un șir de caractere sau o referință la un document.

setRequestHeader(label, value)

Adaugă o pereche label/value la antetul HTTP care trebuie trimis.

Proprietăți

Onreadystatechange

Specifică o referință la un handler de evenimente pentru un eveniment care se declanșează la fiecare schimbare de stare

readyState

Returnează starea obiectului după cum urmează:

• 0 = neinițializat – open() nu a fost încă apelată.
• 1 = deschis – send() nu a fost încă apelată.
• 2 = trimis – send() a fost apelată, anteturile și starea sunt disponibile.
• 3 = primire – Descărcare, responseText conține date parțiale
• 4 = încărcat – Finalizat.

responseText

Returnează răspunsul ca șir de caractere.

responseXML

Returnează răspunsul ca XML. Această proprietate returnează un obiect document XML, care poate fi examinat și analizat folosind metode și proprietăți ale arborelui de noduri W3C DOM.

responseBody

Returnează răspunsul ca șir de caractere codificat binar. Această proprietate nu face parte din wrapper-ul nativ XMLHttpRequest. Pentru ca această proprietate să fie disponibilă, obiectul XHR trebuie creat cu o componentă ActiveX. Un exemplu JScript:

if (typeof ActiveXObject !== "undefined") {
  xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
  xmlhttp.open("GET", "#", false);
  xmlhttp.send(null);
  alert(xmlhttp.responseBody);
} else {
  alert("This browser does not support Microsoft ActiveXObjects.")
}

Status

Returnează codul de stare HTTP sub formă de număr (de exemplu, 404 pentru „Negăsit” și 200 pentru „OK”). Unele coduri de stare legate de rețea (de exemplu, 408 pentru „Expirare solicitare”) cauzează erori în Firefox dacă se accesează câmpurile de stare. Dacă serverul nu răspunde (corect), IE returnează un cod de eroare WinInet (de exemplu, 12029 pentru „nu se poate conecta”).

statusText

Returnează starea sub formă de șir de caractere (de exemplu, „Negăsit” sau „OK”).

(Include texte din Wikibooks traduse și adaptate de Nicolae Sfetcu)