AJAX. Asynchronous JavaScript and XML

Transcript

1 AJAX Asynchronous JavaScript and XML

2 AJAX 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.

3 COME FUNZIONA Evento Creazione di un oggetto XMLHttpRquest Invio delle richiesta Browser Server Elaborazione della richiesta Creazione della risposta e invio dei dati elaborati al browser Elaborazione dei dati con Javascript Aggiornamento della pagina utilizzando il DOM Browser

4 XMLHttpRequest L'oggetto serve a gestire il caricamento di dati dal server via ajax. Questi i classici passi: // Creo l'oggetto XMLHttpRequest var req = new XMLHttpRequest(); // 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); ); // Apro la connessione req.open('get','contenuto.txt'); // Invio la richiesta req.send();

5 Metodi di XMLHttpRequest Metodo new XMLHttpRequest() abort() getallresponseheaders() getresponseheader() open(method, url, async, user, psw) send() send(string) setrequestheader() Descrizione Crea un Nuovo XMLHttpRequest object Cancella la richiesta corrente Ritorna informazione sull'header della risposta Ritorna informazione sull'header della risposta 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) Manda la richiesta al server (Metodo GET) Manda la richiesta al server (Metodo POST) Aggiunge informazioni all'header della richiesta

6 Proprietà di XMLHttpRequest Metodo onreadystatechange readystate responsetext responsexml status statustext onreadystatechange Descrizione Defines a function to be called when the readystate property changes Stato di XMLHttpRequest. 0: request not initialized; 1: server connection established; 2: request received; 3: processing request 4: request finished and response is ready Dati ricevuti Dati ricevuti come XML Restituisce lo stato della richiesta: 200: "OK"; >= 400: Errore (spiegato da statustext) Restituisce il testo corrispondente a status (es.. "OK" o "Not Found") Funzione che viene chiamata quando cambia lo stato.

7 JSON JavaScript Object Notation

8 JSON Quando si scambiano dati tra un browser e un server, i dati possono essere solo in formato testo. JSON è 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 utilizzando il formato che Javascript predilige e che ci semplifica molto l'elaborazione: l'oggetto.

9 JSON 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.

10 SINTASSI 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

11 VALORI 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.

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

13 AJAX Una classe per leggere i post di una pagina Facebook

14 STRUTTURA DELLA CLASSE (function(win){ "use strict"; function FbPageFeed(options) { // Inizializzazione dell'oggetto // Proprietà e metodi win.fbpagefeed = FbPageFeed; )(window)

15 CONFIGURAZIONE // Configuazione dell'oggetto FbPageFeed.prototype.config = { appid: null, appsecret: null, fbservice: " // Elenco dei campi che desidero utilizzare fields: 'id,from,name,message,created_time,story', fbpageid: null, callback: null ;

16 COSTRUCTOR (CONFIGURAZIONE E INIZIALIZZAZIONE) function FbPageFeed(options) { options = options {; for (var prop in this.config) { if (options[prop]) { this.config[prop] = options[prop]; this.init();

17 INIZIALIZZAZIONE FbPageFeed.prototype.init = function() { var self = this; self.callback = self.config.callback; self.config.httprequest = new XMLHttpRequest(); self.config.httprequest.addeventlistener('load', function() { if(this.responsetext) { self.response = JSON.parse(this.responseText); else { sekf.response = { error: { message: this.statustext, code: this.status ; if (typeof(self.callback === "function")) { self.callback(self.success(), self.response); ) ;

18 METODO SUCCESS // La richiesta ha avuto successo? FbPageFeed.prototype.success = function() { if (this.response) { if (this.response.data) { return true; return false;

19 ACCESS TOKEN // Recupero dell'access_token // Assegnando alla proprietà access_token un'altra // funzione posso cambiare il metodo // con cui viene ottenuto l'access_token FbPageFeed.prototype.access_token = function () { if (this.config.appid && this.config.appsecret) { return this.config.appid + " " + this.config.appsecret; return null;

20 URL CUI VIENE INVIATA LA RICHIESTA // Costruzione dell'url della richiesta FbPageFeed.prototype.feedUrl = function() { var addtrailingslash = function (path) { if (path.substr(-1) == '/') { return path; return path + '/'; var at = this.access_token(); var self = this; var url = addtrailingslash(self.config.fbservice) + addtrailingslash(self.config.fbpageid) + 'feed' + '?fields=' + self.config.fields + (at? '&access_token=' + at : ''); return url;

21 URL CUI VIENE INVIATA LA RICHIESTA // Invio della richiesta e caricamento dei dati FbPageFeed.prototype.load = function () { try { this.response = null; this.config.httprequest.open('get', this.feedurl()); this.config.httprequest.send(); catch (err) { console.log(err);