Muovere i primi passi in AJAX

L'oggetto HttpRequest

Per rendere l'oggetto XMLHttpRequest un po' più facile da usare possiamo creare un oggetto JavaScript definito dall'utente e usare questo in luogo dell'oggetto XMLHttpRequest. Questo nuovo oggetto sarà fondamentalmente un wrapper dell'oggetto XMLHttpRequest che nasconde le differenze nell'istanziazione dell'oggetto per i diversi browser e semplifica le operazioni di richiesta e risposta.

Segue una descrizione dell'oggetto HttpRequest:

HttpRequest Object
Costruttore
HttpRequest()	Crea una nuova istanza dell'oggetto HttpRequest. Note:assicuratevi di settare l'URL in modo corretto prima di chiamare get() o post(). Allo stesso modo se volete processare la risposta, settate la proprietà successCallback. Per processare errori relativi a richieste fallite, settate la proprietà failureCallback (vedi sotto).
Proprietà
successCallback	La funzione da chiamare quando una richiesta GET o POST viene completata con successo (cioè quando lo status code è "200 OK"). La funzione dovrebbe accettare un parametro che è l'oggetto HttpRequest stesso che ha fatto la richiesta.
failureCallback	La funzione da chiamare quando una richiesta GET o POST non viene completata con successo (cioè quando lo status code è diverso da "200 OK"). La funzione dovrebbe accettare un parametro che è l'oggetto HttpRequest stesso che ha fatto la richiesta.
url	L'URL a cui effettuare la richiesta. Non dovrebbe contenere la query string.
queryString	La query string da appendere all'URL.
username	Username per l'autenticazione, se richiesto.
password	Password per l'autenticazione, se richiesto.
status, statusText, responseText, responseXML	Queste proprietà sono equivalenti a quelle dell'oggetto XMLHttpRequest con lo stesso nome.
Metodi
clearRequestHeaders()	Cancella tutti gli header di richiesta.
get()	Performa una richiesta GET asincrona.
post(data)	Performa una richiesta POST asincrona, passando il parametro data. Ricordatevi di settare l'header "Content-Type" prima di chiamare post().
abort(), setRequestHeader(name, value), getResponseHeader(name), getAllResponseHeaders()	Questi metodi sono equivalenti a quelli dell'oggetto XMLHttpRequest con lo stesso nome.

Per vedere le differenze tra questo oggetto e l'oggetto nativo XMLHttpRequest, diamo un'occhiata al codice che serve a postare dei dati al web server e ricevere la risposta usando l'oggetto XMLHttpRequest:

// Create an l'oggetto XMLHttpRequest using our cross-browser function.
var myRequest = getXMLHttpRequest();

// Assign an onreadystatechange handler.
myRequest.onreadystatechange = myReadyStateChange;

function doPost()
{
  // Create the post data.
  var data = "...";

  myRequest.abort();
  myRequest.open("POST", "http://www.example.net/script/getXML.pl", true);
  myRequest.setRequestHeader("Content-Type",
    "application/x-www-form-urlencoded");
  myRequest.send(data);
}

function myReadyStateChange()
{
  if (myRequest.readyState == 4)
  {
    if (myRequest.status == 200)
    {
      processResponse(myRequest);
    }
    else
    {
      showError(myRequest);
    }
  }
}

function processResponse(httpRequest)
{
  ...
}

function showError(httpRequest)
{
  ...
}

Notare che dobbiamo chiamare i metodi abort(), open(), setRequestHeader() e send() ad ogni richiesta. Inoltre, come detto prima, i request headers vanno settati dopo la chiamata a open() e prima di quella a send().

All'interno dell'handler onreadystatechange dobbiamo prima controllare che la richiesta sia stata completata e di seguito assicurarci che sia stata completata con successo (cioè HTTP 200 OK).

Adesso notate la differenza con il codice che serve a compiere le stesse operazioni, ma usando l'oggetto HttpRequest:

// Create an HttpRequest object.
var myRequest = new HttpRequest();

// Assign callback functions, URL and set request headers.
myRequest.successCallback = processResponse;
myRequest.failureCallback = showError;
myRequest.url = "http://www.example.net/script/getXML.pl";
myRequest.setRequestHeader("Content-Type",
  "application/x-www-form-urlencoded");

function doPost(event)
{
  // Create the post data.
  var data = "...";

  myRequest.post(data);
}

function processResponse(httpRequest)
{
  ...
}

function showError(httpRequest)
{
  ...
}

Come si può osservare non c'è alcun bisogno di chiamare abort(), open(), setRequestHeader() e send() ad ogni richiesta. Al loro posto chiamiamo semplicemente get() o post().

Infatti una chiamata a get() o post() automaticamente termina ogni richiesta attiva per quell'istanza dell'oggetto. I request headers possono essere settati una volta sola, ossia prima di chiamare get() o post(). Allo stesso modo l'URL può essere settato solo una volta, quindi non c'è bisogno di specificarlo per ogni singola richiesta attraverso il metodo open().

Infine l'oggetto HttpRequest gestisce l'evento onreadystatechange internamente ed effettua una sola chiamata quando la richiesta viene completata. Questa chiamata sarà alla funzione specificata nella proprietà successCallback se la richiesta ha avuto successo (cioè con status code 200 OK) oppure alla funzione spcificata nella proprietà failureCallback (per qualsiasi valore dello status code).

Notare che i termini "successCallback" e "failureCallback" sono riferiti allo stato della risposta HTTP. "success" significa che il server è stato in grado di elaborare la richiesta e fornire una risposta. Non è detto però che la risposta sia quella corretta o quella attesa. Allo stesso modo "failure" potrebbe essere un valore atteso, nel caso in cui, per esempio, si stia semplicemente cercando di determinare l'esistenza di una pagina e lo status code sia settato a "404 Not Found."

Vediamo ora come usare questo oggetto.

Tutorial su AJAX: l'oggetto HttpRequest

L'oggetto HttpRequest