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 πŸ™‚

11 thoughts on “AJAX – Gestione della risposta HTTP

  1. Grazie Davide!!! πŸ˜‰

    Domanda idiota… ma AJAX funziona sia su server Windows che su Linux?

    Basta che ci sia il PHP abilitato? No perché sul mio hosting (Win 2003 + IIS) non funge…

    E ho provato anche su Altervista (che è Linux) ma non va…

    Forse ci sono delle restrizioni?

  2. Fondamentalmente la cosa necessarie è che il client abbia javascript abilitato nel browser.

    Strano che su altervista non vada. Che errore ti da la console javascript di firefox?

  3. Domanda stupida. L'ajax se ho ben capito, ricarica subito la pagina, mentre in background i dati vengono caricati all'interno del db. Ma se accade un imprevisto e i dati non vengono passati? Funziona come adesso? Si realizza un alert che appare quando serve?? Idem per la conferma positiva penso.

    Richiesta profana e molto OT. Voglio mettere un watermark sulle foto, ce fosse uno script in asp? Li ho trovati solo in php ed uno in asp.net…

    Ok, taccio.

  4. Aspetta. Cerco di fare un esempio.

    1 – Ricerca Tradizionale.

    Riempio il form di ricerca, faccio invio e i dati vengono passati alla pagina search.php (o asp o cgi o quello che vuoi).

    In quel file vengono trattadi i dati. Nella fattispecie viene eseguita una query (magari ad un database) che estrae i dati.

    Magari i risultati vengono poi sistemati in visuale con codice html ed il browser mostra i risultati.

    Ho dovuto passare i dati fra due pagine.

    2 – Ricerca con AJAX

    Riempio il form, clicco su Invio e NON CAMBIO PAGINA.

    I dati vengono passati senza che la pagina nel browser vengano ricaricati.

    Nella pagina richiamata in background farò più o meno le stesse cose che facevo prima con la chiamata tradizionale.

    Magari sistemerò anche i dati in html. Ma piuttosto che mostrare una nuova pagina, li faccio comparire nella pagina aggiornendone un pezzettino.

    Nella pagina di ricerca farò anche i controlli del caso.

    Se la ricerca non va a buon fine, produrrò un output adeguato. Potrebbe essere un alert, un aggiornamento di pagina con relativo messaggio di errore.

    A te interessa che il file sia ben chiamato. Ma lo tratterai senza tanti problemi come un qualsiasi script.

    PS: watermark in asp non ne conosco…

  5. Io mi riferivo nel caso di inserimento dati, come per esempio qua con i commenti.

    Sono della scuola empirica… odio la teoria, devo capire meccanicamente come funziona.

    P.S. giro la domanda sul watermark a tutti i tuoi lettori, visto che ci sono molti esperti. Cmq, tecnicamente a me serve inserire una forma di maschera sopra le foto di un archivio che devo realizzare. Va bene anche in java, javascript, ajax… basta che è in automatico.

  6. Gionni, tu di solito cosa fai quando invii i dati via get o post da un form?

    Li fai processare da uno script, avrai una cosa del tipo:

    mysql_query("SELECT qualcosa FROM tabella WHERE qualcosa = datipost");

    Questa query restituirà dei risultati, che già in quel file puoi organizzare in display:

    foreach($risultato as $risultato){

    echo "Risultato: " . $risultato . "<br />";

    }

    Il dato di display può essere utilizzato come risultanza di un responseText, che usato con innerHTML nella funzione handleResponse si permette di aggiornare la pagina da cui la richiesta è partita, senza dover ricaricare la pagina stessa.

  7. @ Gionni: accadeva πŸ˜€

    Devo riattivare la cosa.

    La tecnica era questa:

    1 – Riempio il form e lo invio. Con un return:false blocco l'action del form ed avvio il file che in background si occupa di verificare il form ed inserirlo nel database.

    2 – Una volta inserito, lo stesso file mi restituisce del testo, adeguatamente formattato, che faccio comparire con innerHTML in un ID ben definito.

    Quando usavo dblog facevo tutto con la prototype.lite e moofx.

  8. cosa succede quando voglio indirizzare un oggetto iniettato con innerHtml utilizzando il getElementById? A me restituisce null se ad esempio dentro c'è la definizione di un input type button.

  9. Un innerHTML associato al getElementById semplicemente aggiorna il contenuto dell'id.

    Se l'innerHTML è null, allora anche la risultanza sul getElementById sarà null.

    Ma esattamente, cosa fai tu?

  10. Ciao io voglio esattamente fare la cosa che hai spiegato e provandola funziona, in pratica richiedo una tabella elaborata da una pagina php e tramite innerHTML la metto su un div, vorrei realizzare la stessa cosa senza innerHTML perche ho la necessita di usare solo cose standart. Ho provato con nodeValue, e firstchild ma non va che consigli?

Comments are closed.