Tecnologie Web:
approcci avanzati
a.a. 2020/2021
7
Anna Goy
(con jQuery e PHP) AJAX
AJAX: cos'è - I
• AJAX permette di rendere la user experience esperita nell'interazione con le applicazioni web simile a quella esperita nell'interazione con applicazioni stand-alone (installate in locale) [www.html.it/guide/guida-ajax/]
• AJAX = Asynchronous JavaScript and XML, coniato nel febbraio del 2005 da Jasse James Garrett, per descrivere un modo di utilizzare congiuntamente diverse tecnologie esistenti:
– HTML (e CSS) − client-side
– Javascript/jQuery + DOM − client-side
– XMLHttpRequest (oggetto Javascript) − client-side – Programmi server-side (PHP, Servlet, ...)
⇒AJAX è una nuova etichetta per riassumere l'utilizzo congiunto di tecnologie preesistenti
AJAX: cos'è - II
Applicazioni Web tradizionali → funzionamento sincrono:
• per ogni azione dell'utente (per es. click su un link) il client (browser) invia al server una richiesta (HTTP request) per una nuova pagina
• il client aspetta la risposta del server (e l'utente anche!)
• la risposta del server (HTTP response) contiene l'intera nuova pagina
• ciò comporta uno spreco di banda e un'interfaccia utente più lenta di quanto potrebbe essere
Applicazioni AJAX → funzionamento asincrono:
• quando l'utente compie un'azione (per es. click su un link) l'oggetto
Javascript XMLHttpRequest invia al server una richiesta asincrona (mentre l'utente può continuare ad interagire con la pagina) e parziale (relativa solo ai dati necessari e NON all'intera pagina)
• di conseguenza consentono un'interazione più veloce (la quantità di dati che è necessario inviare al/ricevere dal server è minore) e in modalità asincrona (senza attesa)
AJAX: un esempio tipico - I
(a)
(b)
AJAX: un esempio tipico - II
Per passare da (a) a (b):
1) approccio "tradizionale"
il browser (client) invia al web server l'informazione sul Dip. scelto
il web server genera una nuova pagina (con il Dip. selezionato nel primo menu e l'elenco dei CdL afferenti a quel Dip. nel secondo menu) e la invia al browser
il browser mostra la (nuova) pagina 2) approccio AJAX
l'oggetto XMLHttpRequest agisce da client e invia al web server l'informazione sul Dip. scelto
il web server genera un nuovo menu per la scelta del CdL (contenente i CdL afferenti a quel Dip.) e lo invia al client (oggetto XMLHttpRequest)
uno script Javascript preleva la risposta del server dall'oggetto
XMLHttpRequest e la inserisce nel punto opportuno della pagina (senza ricaricarla)
AJAX: cos'è - III
Funzionamento tipico di un'applicazione AJAX:
• carichiamo nel browser una pagina web (.html) che contiene degli script client- side (Javascript/jQuery) che intercettano eventi (azioni dell'utente) relativi a elementi della pagina (es: link) identificati mediante il DOM
• in risposta ad un evento (es: click), lo script Javascript/jQuery chiede
all'oggetto XMLHttpRequest di agire da client, cioè di inviare al server una
richiesta (HTTP request), con l'indicazione di una risorsa server-side (es. PHP), cioè un programma da eseguire sul server
• sul server, il programma invocato elabora la risposta e la invia al client, cioè
all'oggetto XMLHttpRequest, da cui lo script client-side la preleva e modifica di conseguenza la pagina, interagendo con gli elementi del DOM
è l'oggetto XMLHttpRequest che agisce da client HTTP nei confronti del web ↓ server, cioè invia la HTTP request e riceve la HTTP response del web server!!
AJAX: cos'è - IV
Server
Br wo
es r HTTP request
(pag.html) HTTP response
(pag.html) HTML + AJAX
(Javascript + XMLHttpRequest)
elaborazione (interpretazione
del codice Javascript)
visualizzazione
⇓
richiesta asincrona (non "blocca"
l'interazione con l'utente)
"richiesta"[*]
(rif. risorsa server-side) HttpXML
Request "risposta"[*]
(txt/HTML/XML) requestHTTP HTTP
response
[*] l'oggetto XMLHttpRequest viene gestito all'interno dello script Javascript (client-side)
HTTP Client
1 2
3 5
4
6
AJAX - cos'è - V
NOTE (di folklore...)
NB1: Il Web Server "non si accorge di niente"! Riceve infatti una "normale"
HTTP request da parte di un HTTP client (l'oggetto XMLHttpRequest) NB2: AJAX non è una via di mezzo tra client-side e server-side (la
computazione non può mai avvenire... "a metà strada"!)... ma l'uso congiunto di tecnologie client-side e server side
NB3: "XMLHttpRequest is the worst named object in the history of JavaScript"
!!! [D. Cameron. A Software Engineer Learns HTML5, JavaScript & jQuery. Cisdal Pub, 2014, p.223]
Qualunque altro nome sarebbe andato meglio... compreso pippo !!
(se preferite, chiamatelo l'innominato...)
AJAX (con PHP) - I
(2) il sistema colora lo sfondo e invia l'info al server, che la salva in una variabile di sessione (e invia al client un messaggio)
(1) l'utente seleziona un colore di sfondo...
RIF quiz v6
AJAX (con PHP) - II
Sul client (login_v6.php, BODY):
<FORM method="POST" action="quiz_v6.php">
Che sfondo vuoi? <input type="color" id="colore" required>
<br /><br />
<span id="messaggio"></span>
Username: <input type="text" NAME="username" required>
<br /><br />
Password: <input type="password" NAME="password" required>
<br /><br />
<input type="submit" value="invia">
</FORM> campo con id=colore, su cui
verrà definito un gestore di eventi (event listener)...
elemento del DOM con id=messaggio, che verrà
riempito con il risultato della chiamata AJAX...
AJAX (con PHP) - III
Sul client (login_v6.php, HEAD):
jQuery(document).ready(function() {
$("#colore").on("change", function() { var col = $("#colore").val();
var col_ok = col.replace("#", "%23");
$.ajax({
url: "sfondo_v6.php", type: "GET",
data: "c="+col_ok, ...
quando il valore del campo con id=colore cambia (vedi primo parametro della funzione on) (=
l'utente ha selezionato un colore), viene eseguita la funzione anonima (secondo parametro della funzione on)...
invio una HTTP request di tipo GET al server (attraverso la funzione ajax, che "maschera"
il ruolo dell'oggetto XMLHttpRequest),
chiedendogli (di eseguire) lo script contenuto in sfondo_v6.php (url) e passandogli un
parametro (data) con il colore selezionato
leggo il colore selezionato
(NB il valore di un campo input type=color è una stringa di 7 caratteri che indica il colore (RGB) in formato esadecimale... che inizia
sempre con # ⇒ devo sostituire # con il codice utf-8 %23 (altrimenti la HTTP request si
confonde...)
RIF: URL encoding
[www.w3schools.com/tags/ref_urlencode.asp]
AJAX (con PHP) - IV
...
success: function(response) {
$("body").css("background-color", col);
$("#messaggio").html("<p>"+response+"</p>");
},
error: function(xhr, resp, text) { console.log(xhr, resp, text);
$("messaggio").html(xhr+resp+text);
}
}); //ajax }); //on change }); //ready
quando arriva la risposta del server (se NON è un errore), viene eseguita la funzione di callback (funzione anonima, valore dell'attributo success)
NB il parametro di tale funzione (in questo caso response) contiene la risposta del server (HTTP response)
In questo caso, impostiamo lo sfondo[*] e inseriamo il messaggio del server (response) nell'elemento del DOM
se la risposta del server è un errore, lo stampo sulla console e sulla pagina
ATTENZIONE! Va bene solo in fase di sviluppo, perché è una partica che può compromettere la [*] css(p, v): imposta il valore v per la proprietà di stile p dell'oggetto su cui viene invocata
[**] html(s): inserisce la stringa s, passata come parametro, come
contenuto (innerHTML DOM property)
dell'oggetto su cui viene invocata
AJAX (con PHP) - NOTE
(1) $.ajax({...})
• funzione jQuery predefinita che mi permette di inviare una HTTPrequest asincrona (via XMLHttpRequest) al server
• prende come parametro un oggetto JSON [che vedremo più avanti]:
sostanzialmente una lista di parametri per "configurare" la request; i più importanti sono: l'URL (programma server-side da eseguire), eventuali
parametri/dati da inviare al server (data), il metodo (type) ̶ che di default è GET ̶ e la funzione di callback (success), cioè la funzione da eseguire quando arriva la risposta del server
(2) La risposta del server viene automaticamente inserita nel parametro della funzione (anonima) di callback
(3) jQuery(document).ready(function(){...
equivale a $(document).ready(function(){...
(4) $("#argomento").on("change", function(){...
equivale a $("#argomento").change(function(){... MA
– change(function()... è applicato agli elementi già esistenti nel DOM
– on("change", function()... è applicato anche su event. elem. aggiunti al DOM successivam.
AJAX (con PHP) - V
Sul server (sfondo_v6.php):
<?php
session_start();
$msg = "Non ho ricevuto il colore...";
if (isset($_GET["c"])) {
$_SESSION["color"] = $_GET["c"];
$msg = "Colore ricevuto (".$_SESSION["color"].") e salvato in una variabile di sessione!";
}
echo $msg;
?>
stampo il messaggio nell'HTTP response (che verrà "intercettata"
da XMLHttpRequest; se ho usato la funzione ajax() di jQuery, si
leggo il parametro dell'HTTP request (c) -- controllando prima che non sia NULL attraverso la funzione isset(x) -- inizializzo una variabile di sessione (color) e imposto il messaggio da inviare al client ($msg)
AJAX (con PHP) - VI
Single-page applications
si usa spesso costruire applicazioni web single-page: costruisco un'unica pagina HTML e gestisco tutte le interazioni con il server attraverso chiamate AJAX
⇒ non ricarico mai l'intera pagina
[https://www.codeschool.com/beginners-guide-to-web-development/single-page-applications]
Attenzione! L'approccio single-page non è privo di problemi (es. performance, SEO, ...)
Server
Br ow se r
HTML AJAX+ XMLHttp
Req
HT TP cl ie nt
CASE STUDY: quiz
(versione 6) Aggiorniamo il case study• nel login, chiediamo all'utente di che colore vuole lo sfondo
• usiamo la scelta dell'utente per impostare il colore di sfondo e per inviare al server una chiamata AJAX con il colore selezionato
• il server (lo script php...) salva il colore in una variabile di sessione (per usarlo nelle pagine successive)
![[5] Sito web ufficiale del Robonaut Project: http://robonaut.jsc.nasa.gov/.](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)