AJAX

AJAX è un acronimo che sta per Asynchronous JavaScript and XML.

Lo sviluppo di applicazioni HTML con 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.

AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente.

Tuttavia, e a dispetto del nome, l'uso di XML non è obbligatorio e,  come vedremo, le richieste di caricamento possono essere sia sincrone che asincrone, anche se il meccanismo asincrono è di gran lunga il più utilizzato.


XMLHttpRequest

Per gestire le richieste AJAX Javascript ha un oggetto dedicato: XMLHttpRequest.

L'oggetto serve a gestire il caricamento di dati dal server via ajax. Questi i tipici passi per effettuare una richiesta:

// 1. Creo l'oggetto XMLHttpRequest
var req = new XMLHttpRequest();

// 2. Creo un gestore per l'evento load
req.addEventListener('load', function() {
// Se non ci sono errori cambio il contenuto HTML della div con id change
  if (this.status < 400) {
    document.getElementById('change').innerHTML = this.responseText;
  } else {
    // Altrimenti provoco un errore javascrit
    throw(this.statusText);
  }
});

// 3. Apro la connessione
req.open('get','contenuto.txt');

// 4. Invio la richiesta
 req.send();

Metodi di XMLHttpRequest()

Metodo
Descrizione
new XMLHttpRequest()
Crea un Nuovo XMLHttpRequest object
abort()
Cancella la richiesta corrente
getAllResponseHeaders()
Ritorna informazione sull'header della risposta
getResponseHeader()
Ritorna informazione sull'header della risposta
open(method, url, async, user, psw)
Apre la connessione specificando la configurazione della richiesta
method: GET o POST
url: l'url da richiedere
async: true (asincrono) o false (sincrono)
user: username (in caso sia previsto login)
psw: password (in caso sia previsto login)
send()
Manda la richiesta al server (Metodo GET)
send(string)
Manda la richiesta al server (Metodo POST)
setRequestHeader()
Aggiunge informazioni all'header della richiesta
onreadystatechange
Definisce una funzione da chiamare quando la proprietà readyState cambia
readyState
Stato di XMLHttpRequest.
0: richiesta non inizializzata;
1: connessione server stabilito;
2: richiesta ricevuta;
3: richiesta in elaborazione
4: richiesta completata e la risposta è pronta
responseText
Dati ricevuti
responseXML
Dati ricevuti come XML
status
Restituisce lo stato della richiesta: 200: "OK"; >= 400: Errore (spiegato da statusText)
statusText
Restituisce il testo corrispondente a status (es.. "OK" o "Not Found")

JSON

Quando si scambiano dati tra un browser e un server, i dati possono essere solo in formato testo.

JSON è un formato testo in cui può essere convertito qualsiasi oggetto JavaScript, che, in questo modo, può essere inviato al server. Allo stesso modo possiamo convertire qualsiasi JSON ricevuto dal server in un oggetto JavaScript.

Con questo sistema possiamo scambiare informazioni tra client e server utilizzando il formato che Javascript predilige e che ci semplifica molto l'elaborazione: l'oggetto.

Utilizzando JSON posso:

  • Convertire un oggetto Javascript in stringa e inviarlo al server come parametro di un url.
  • Convertire una stringa JSON ottenuta come risposta dal server in un oggetto per elaborarlo con Javascript
  • Memorizzare sul computer dell'utente un oggetto costruito run-time dalla pagina web utilizzando localStorage.

La sintassi JSON è derivata dalla sintassi di notazione degli oggetti JavaScript:

  • I dati sono coppie nome / valore
  • I dati sono separati da virgole
  • Le parentesi graffe identificano gli oggetti
  • Le parentesi quadre identificano gli array
  • Le coppie nome/valore seguono questa sintassi: "nome":"Pippo" con il nome della proprietà sempre fra virgolette doppie

In JSON, i valori devono appartenere a uno dei seguenti tipi di dati:

  • String
  • Number
  • Object (oggetto JSON)
  • Array
  • Boolean
  • null

JASON non è in grado di rappresentare i seguenti tipi:

  • Function
  • Date
  • undefine.

In JSON, i valori delle stringhe devono essere scritti con doppie virgolette.

Metodi JSON

// Converte l'oggetto javascriptObject in una stringa JSON
JSON.stringify(javascriptObject);
    
// Converte stringa JSONString in un oggetto Javascipt
JSON.parse(JSONString);
 

Convertitore di valuta

Calcola il cambio delle principali valute utilizzando il server http://www.floatrates.com che offre gratuitamente i tassi di cambio aggiornati su base giornaliera. 

Il layout 'flex' consente di ottimizzare l'utilizzo dell'app sui dispositivi mobili si con orientamento landscape che con orientamento portrait.

Dipendenze

L'interfaccia dell'app è costituita dal documento HTML '/index.html' e dai fogli di stile '/css/bootstrap-reboot.min.css' (usato per normalizzare lo stile dei browser) e '/css/stile.css'. Per funzionare MoneyChanger necessita delle seguenti componenti Javascript:

  • MySpinner: Animazione di attesa mostrata durante caricamento ('/js/spinner/myspinner.js' e '/js/spinner/stile-spin.css')
  • CurrencySymbols: caricamento e la gestione della tabella dei simboli delle valute
  • CurrencyRate: connessione con il server http://www.floatrates.com e caricamento dinamico dei tassi di cambio.

Tutti i file del progetto 

Tutti i file (ampiamente commentati) sono disponibili sul cloud. Cliccando sulla cartelle si accede alla cartella sul cloud da cui si possono scaricare. Cliccando sui singoli file si possono vedere direttamente con il viewer del cloud.