AJAX – Gestione della risposta HTTP

Qualche articolo fa si è visto come costruirsi un handler AJAX per la gestione delle richieste in background. Abbiamo poi approfondito l’argomento sui form e sulle modalità di invio dei dati via POST. Cosa molto utile per applicazioni complesse con molti form da riempire. Non abbiamo ancora introdotto a dovere la gestione delle risposte del server.

Il grande vantaggio di AJAX è quello di poter aggiornare il contenuto di una pagina senza che questa venga totalmente ricaricata.

E’ possibile interrogare i dati necessari in background e farli comparire, nei modi che si preferiscono, in una porzione della pagina.

Ripercorriamo velocemente i concetti già visti. Il primissimo esempio di AJAX è qualcosa del genere:

function AJAXReq(method,url,bool){
  if(window.XMLHttpRequest){
    myReq = new XMLHttpRequest();
  } else
 
  if(window.ActiveXObject){
    myReq = new ActiveXObject("Microsoft.XMLHTTP");
   
    if(!myReq){
      myReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
  }
 
  if(myReq){
    execfunc(method,url,bool);
  }else{
    alert("Impossibilitati ad usare AJAX");
  }
}

function execfunc(method,url,bool){
  myReq.onreadystatechange = handleResponse;
  myReq.open(method,url,bool);
  myReq.send(null);
}

function handleResponse(){
  if(myReq.readyState == 4){
    if(myReq.status == 200){
      alert(myReq.responseText);
    }else{
      alert("Niente da fare, AJAX non funziona :(");
    }
  }
}

[MORE]
La funzione AJAXReq() avvia l’handler, ed in caso positivo avvia la funzione di inoltro della richiesta, inviando i dati da far processare alla pagina richiamata in background.

Utilizzando due proprietà dell’oggetto XMLHttpRequest, possiamo monitorare la sequenza delle operazioni ed impostare degli eventi a richiesta terminata.

Fa proprio questo la riga:

myReq.onreadystatechange = handleResponse;

La funzione di callback onreadystatechange serve a monitorare lo stato di readyState. Al suo cambiamento viene evocata la funzione handleResponse(). Tale funzione non fa altro che gestire gli eventi di risposta della richiesta XMLHttpRequest.

Ma si noterà che avviamo la funzione solo nel caso in cui readyState sia uguale a 4. Difatti è il valore che la proprietà avrà nel momento in cui la richiesta è terminata.

Facciamo però un ulteriore controllo. Ovvero verifichiamo che status sia uguale a 200. Codice http che identifica una richiesta andata a buon fine.

responseText

Le modalità di visualizzazione della risposta sono fondamentalmente due:

• responseXML
• responseText

Per ora lasceremo perdere responseXML per concentrarci su responseText. Questo ci permette di includere in una funzione o variabile, il testo rilasciato in risposta alla richiesta XMLHttpRequest.

Lo abbiamo già utilizzato negli articoli precedenti, ma per lo più facendo visualizzare un alert che conteneva il testo risultante.

Ora proveremo invece ad aggiornare il contenuto html della pagina stessa.

Document Object Model (DOM)

Molto sinceramente, io AJAX avrei preferito chiamarlo AJAD (Asynchronous JavaScript and DOM). La possibilità di gestire gli elementi di una pagina HTML come oggetti equivale alla possibilità che ha un arredatore di lavorare 🙂

Togli quel mobile, fallo scomparire, anzi no, fallo riapparire se succede una cosa. Non mi piace lo specchio e lo tolgo, ma preferirei rivederlo in certi casi.

Tranquilli, non mi sono drogato (ancora…) fra un po’ capirete il delirio 🙂

innerHTML

Il metodo DOM più utile per aggiornare il contenuto di una pagina. Dopo essere passati in detect via getElementById (altro oggetto DOM), on innerHTML possiamo stabilire il contenuto nuovo o aggiuntivo del nodo prescelto. Mica bruscolini…

E udite udite, tale metodo è stato introdotto da Internet Explorer! Ed ha avuto così tanto successo che, pur non essendo uno standard, è ormai supportato da tutti i browser (o da tutti i browser più utilizzati…).

Facciamo un esempio.

Adesso ci costruiremo una funzione handleResponse() del tutto identica a quella vista nel primissimo esempio, ma che invece di visualizzare l’alert, aggiornerà il contenuto di un DIV.

Per prima cosa, nella pagina in cui si eseguirà il tutto, aggiungiamo un div che sarà identificato univocamente da un ID.

<div id="target"></div>

Lasciatelo esattamente com’è: vuoto. Ma potreste anche scegliere di scrivere qualcosa, che magicamente cambierà 😉

Adesso riscriviamo la nostra funzione di risposta.

function handleResponse(){
  if(myReq.readyState == 4){
    if(myReq.status == 200){
      target = document.getElementById(‘target’);
      target.innerHTML = myReq.responseText;
    }else{
      alert("Niente da fare, AJAX non funziona :(");
    }
  }
}

All’ultimo un gran casimo di cose scritte per due righe di differenza. Ma l’approccio è fondamentale! Nella funzione scritta, dopo aver verificato che la richiesta sia conclusa, dopo aver verificato anche che questa sia andata a buon fine, vado in detect dell’ID che voglio aggiornare e subito dopo, con innerHTML, imposto il testo di risposta della chiamata AJAX come contenuto del div in questione.

Qui il solito esempio pratico.

Non è niente di speciale, ma sarete riusciti da soli a modificare il contenuto HTML di una pagina web, senza doverla ricaricare da browser. Tutto il resto sta ora alla vostra fantasia 🙂