A. Ferrari
ajax
A. Ferrari
definizione
o Asynchronous JavaScript and XML (AJAX)
o non è un linguaggio o non è una tecnologia
o è un termine che descrive un "nuovo" approccio all'utilizzo di diverse
tecnologie esistenti, compresi: HTML, CSS, JavaScript, DOM, XML, XSLT e l'oggetto XMLHttpRequest
o con AJAX, le applicazioni web possono eseguire aggiornamenti rapidi e incrementali dell'interfaccia utente senza ricaricare nel browser l'intera pagina
o questo rende l'applicazione più performante e più reattiva alle azioni dell'utente
https://www.w3schools.com/js/js_ajax_intro.asp
A. Ferrari
AJAX
o AJAX è uno strumento per la realizzazione di applicazioni web interattive (Rich Internet Application)
o la tecnologia AJAX si basa su uno scambio di dati in background fra web browser e server, che consente
l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente
o la richiesta è asincrona: non si deve attendere che sia ultimata per effettuare altre operazioni
o normalmente le funzioni richiamate sono scritte in JavaScript o AJAX è una tecnica multi-piattaforma
A. Ferrari
caratteristiche
o AJAX sfrutta l’oggetto XMLHttpRequest
o offre la possibilità di interpretare e lavorare con i documenti XML
o reso popolare da Google, a partire dal 2005
o utilizzato in Google Maps, Gmail, Amazon ...
o il vantaggio principale di AJAX è la grande velocità alla quale un'applicazione risponde agli input
dell'utente
A. Ferrari
richiesta HTTP
o la richiesta HTTP al server utilizza un'istanza di una classe
o questa classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava XMLHTTP
o successivamente Mozilla, Safari e altri browser hanno implementato la classe XMLHttpRequest, che supporta gli stessi metodi e le
stesse proprietà della classe di Microsoft
o come fare:
o http_request = new XMLHttpRequest();
A. Ferrari
definire come gestire la risposta inviata dal server
o è necessario comunicare all'oggetto XMLHttpRequest quale funzione JavaScript elaborerà il codice XML
o si assegna alla proprietà onreadystatechange dell'oggetto la funzione JavaScript
o http_request.onreadystatechange = nomeFunzione;
o in questo modo si sta assegnando un riferimento alla funzione, non la si sta ancora chiamando
A. Ferrari
inviare la richiesta al server
o per inviare la richiesta bisogna chiamare i metodi open() e send()
http_request.open('GET', 'http://www.nomeserver.org/qualsiasi.file', true);
http_request.send(null);
o open(-,-,-)
o parametro 1: metodo : GET, POST … (in lettere MAIUSCOLE)
o parametro 2: URL (non è possibile chiamare pagine che si trovino su un dominio differente da quello in cui si trova la pagina corrente) o parametro 3: true per richiesta asincrona, false sincrona
o send()
o il parametro è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo POST
A. Ferrari
gestire la risposta del server
o la funzione deve controllare lo stato della richiesta
o se lo stato ha un valore di 4, significa che la risposta è stata interamente ricevuta
if (http_request.readyState == 4) {
// tutto ok, la risposta è stata ricevuta } else {
// non ancora pronto }
o necessario controllare anche il codice di stato della risposta http:
il codice 200 è ok
if (http_request.status == 200) { // bene!
} else {
// problema nella richiesta }
A. Ferrari
accedere ai dati ricevuti
o http_request.responseText
o restituisce la risposta sotto forma di stringa di testo
o http_request.responseXML
o restituisce la risposta sotto forma di oggetto XMLDocument che si può navigare tramite le funzioni DOM.
A. Ferrari
cosa fare con i dati ricevuti
o selezionare un elemento della pagina
o getElementById(string)
o è un metodo del DOM che permette di selezionare un elemento mediante il suo id
o modificare il valore dell’elemento
o innerHTML
o proprietà che permette di ottenere o modificare il testo e le caratteristiche di un nodo
A. Ferrari
client <> AJAX <> server
A. Ferrari
getElementById esempio d’uso
o esempio
function cambiaColore(nuovoColore) {
elem = document.getElementById("paragrafo1");
elem.style.color = nuovoColore;
}
A. Ferrari
innerHTML
o la proprietà innerHTML permette di ottenere o
modificare il testo e le caratteristiche di un nodo
A. Ferrari
innerHTML - esempio
o Cambiare dinamicamente un link
function cambiaLink() {
document.getElementById('mioLink').innerHTML=“sito";
document.getElementById(‘mioLink').href="http://www.sito.com";
document.getElementById(mioLink').target="_blank";
}
A. Ferrari
