Fino ad ora le nostre pagine aggiornano i contenuti in modo sincrono e seriale. Al click dell'utente la pagina invia una richiesta HTTP verso il server, il server elabora la richiesta, la pagina si aggiorna e vengono mostrati i nuovi contenuti. In JavaScript abbiamo a disposizione un particolare oggetto detto XMLHttpRequest, XHR, che consente di contattare il server, sempre tramite richiesta HTTP, in modo asincrono rispetto ad altre operazioni JavaScript, senza dover aggiornare la pagina. Quindi è possibile richiedere nuovi contenuti, o quant'altro, senza che l'utente aspetti il caricamento completo della pagina. Questa tecnica di sviluppo è chiamata AJAX, Asynchronous JavaScript and XML. Sempre per problemi di compatibilità fra i diversi browser è consigliato l'utilizzo di framework per questo tipo di approccio. Ad esempio jQuery mette a disposizione il metodo $.ajax(). Tramite una richiesta AJAX è possibile sfruttare tutti i metodi del protocollo HTTP: GET, POST, PUT, DELETE. Per esempio potremmo aggiungere alla nostra pagina la possibilità di cancellare un messaggio. E potremmo svolgere questa operazione tramite una richiesta AJAX con metodo DELETE, passando come parametro la key univoca del messaggio. Procediamo per step. Aggiungiamo jQuery alla pagina Nella sezione head della pagina inseriamo il framework <script type="text/javascript" src="/js/jquery-1.7.1.min.js" ></script>Aggiunta dei link per la cancellazione Cambiamo la procedura che mostra i messaggi in modo da aggiungere un link cliccabile per la cancellazione, come href impostiamo "#KeyDelMessaggio". Utilizzando il cancelletto si indica che il link punta a una sezione della pagina e non ad un'altra pagina. Così facendo il link non aggiorna la pagina.
</div> Mettiamoci in ascolto sui clic dei link Adesso ci serve registare un handler, o callback, per intercettare il click sui link "cancella". Per fare questo registriamo una funzione JavaScript sull'onLoad della pagina e dentro questa registriamo l'handler grazie a jQuery. L'onLoad della pagina indica che tutti gli script sono pronti per essere eseguiti, bisogna sempre aspettare questo evento prima di utilizzare jQuery o altri framework. function onLoad() { //Aggiungo un handler sulle anchor di messages} Così facendo la callback "deleteMessage" sarà invocata tutte le volte che viene fatto click su un link "cancella". Eseguire una richiesta AJAX sul click Dentro la mia callback, "deleteMessage", dovrò recuperare la key ed eseguire la richiesta AJAX. //recupero la key dall'attributo href, levando il # iniziale
url : "/messages?key=" + key,}); } A questo punto tramite il metodo .ajax() siamo in grado di impostare il tipo di richiesta HTTP, l'url e una callback sul completamento della richiesta. In questo caso definiamo come callback una funzione anonima che esegue il refresh della pagina. Gestiamo la richiesta DELETE in Java A questo punto possiamo aggiungere il metodo "doDelete" sul nostro controller.  In allegato il progetto aggiornato. |
b - ... al Web >
