Javascript: JSON, Ajax, DOM, API Fetch, Cookie, Web Storage, jQuery

Per trovare la propria directory nel server di solito possiamo usare queste due funzionalità di javascript

$_SERVER["DOCUMENT_ROOT"]:
// var/www/html
  
dirname(__FILE__):
/chroot/home/S00000/public_html

JSON

Formato di interscambio

Acronimo di JavaScript Object Notation

Rappresentazione di un oggetto mediante una stringa

Formato interoperabile per serializzare oggetti, non è limitato a JavaScript (es. esistono serializzatori JSON per gli oggetti .NET)

Si tratta di un formato usato per il trasferimento dei dati attraverso la rete

I file JSON hanno estensione .json

MIME type "application/json"

• JSON supporta i seguenti tipi di dato
  • . string, number, object, array
• E i letterali
  • . true, false, null
• Le stringhe devono essere delimitate da " ... " mentre in JavaScript si può anche usare ' ... '

//invalid JSON in RFC
{"username": 'ribba'} 	//solo doppi apici
{"price": OxFF}			//si possono usare solo cifre decimali

I dati sono espressi come:

 - coppie "nome" : "valore"

 - separate da virgola ,

Gli oggetti sono racchiusi in { ... }

 - es.: {"nome":"Mario", "cognome":"Rossi"}

Gli array sono racchiusi in [ ... ]

 - es.: [ {"nome":"Mario", "cognome":"Rossi"}  {"nome":"Anna", "cognome":"Bruni"} ]

Ogni dichiarazione valida in JSON è anche valida in JavaScript

Per trasformare un testo JSON in un oggetto:

•  JSON.parse(json_str)
  • converte una string JSON in un oggetto
  • Esiste anche la funzione JSON.stringify(json_obj) che converte un oggetto JavaScript in una string JSON
• eval(json_str) //DEPRECATA
  • valuta o esegue quanto passato come parametro

AJAX

Facciamo tramite client una richiesta HTTP ad un server, il server manda in esecuzione lo script, eventualmente interagisce con il database, produce una risposta che è una pagina html con incluso il foglio di stile e incluso javascript.

Con Ajax cambia un pochino la situazione, possiamo fare lo solite richieste HTTP, ma poi quando siamo dentro la pagina, possiamo fare delle richieste che non ritornano un intera pagina, ma ci ritornano indietro dei dati, xml, testo, json, immagini, ecc.. Grazie ad AJAX è possibile caricare porzioni di pagina, via javascript modifichiamo il DOM senza però caricare la pagina.

In pratica si modifica una parte del DOM senza ricaricare la pagina.

In HTTP il modello è quello della pagina (statica o dinamica)

Si può lavorare a livello di porzione di pagina usando JavaScript ma non si può interagire con dati remoti perchè si lavora sul client

Sfruttando il DOM di JavaScript e le chiamate AJAX si possono modificare in modo asincrono o sincrono piccole porzioni della pagina corrente senza ricaricarla completamente

Viene usato per esempio da Google Maps, Gmail, Youtube,..

<script>
  function update(id) {
    var el=document.getElementById(id);
  el.innerHTML=<chiamata ad una funzione remota di un server>
}
</script>
  

Ajax: XMLHttpRequest

XMLHttpRequest è un oggetto JavaScript messo a disposizione dal browser

Permette di eseguire chiamate HTTP tramite JavaScript

Nonostante il nome, non si limita ad essere usato con XML ma accetta anche altri formati per esempio JSON

Per istanziare questo oggetto sono necessarie istruzioni diverse a seconda del browser, esempio:

function getXMLHttpRequestOvject() {
  var request=null;
  if (windows.XMLHttpRequest) {
    request=new XMLHttpRequest();
  } else if (windows.ActiveXObject) { //Older IE
    request = new ActiveXObject("MSXML2.XMLHTTP.3.0");
  }
  return request;
}

Dopo aver instanziato un oggetto XMLHttpRequest si possono usare i suoi metodi

• abort()
• getAllResponseHeaders()
• getResponseHeader(headername)
• open(methos,url,async,username,password)
• send(data)
• setRequestHeader(headername,value)

Chiamata sincrona il browser si ferma in attesa della risposta, mentre asincrona il browser va avanti, tipicamente quando si usa ajax si usa chiamata asincrona.

Oltre i metodi l'oggetto ha anche le sue proprietà:

• onreadystatechange -> permette di definire/richiamare una funzione che viene invocata quando cambia la proprietà readyState
• readyState -> stato della richiesta
• responseText -> risposta/pagina in formato testo
• responseXML -> risposta in XML
• status -> codice HTTP (200,400,ecc.)
• statusText -> testo della risposta HTTP (Ok, Not found)

Le chiamate possono essere asincrone oppure sincrone, come specificato nel terzo parametro del metodo open()

• open(method,URL,async)
  • method: GET, POST, HEAD
  • async: FALSE per chiamate sincrone
  • async: TRUE (default) per chiamate asincrone

In generale si suggerisce di usare chiamate asincrone

• send() invia la richiesta

Durante una chiamata Ajax si passa attraverso vari stati:

0 UNSENT -> open() has not been called yet

1 OPENED -> send() has not been called yet

2 HEADERS_RECEIVED -> send() has been called, and header and status are available

3 LOADING -> Downloading; reasponseText holds partial data

4 DONE -> the operation is complete

La natura asincrona di Ajax permette al browser di accettare input dall'utente e modificare la pagina mentre il codice JavaScript testa il valore della proprietà readyState

Ad ogni cambiamento del valore di readyState si può invocare una funzione di callback associata alla proprietà onreadystatechange

esempio funzione callback:

function ajaxCallback() {
 let res = document.getElementById(…);
 if ((xhr.readyState == 4) & (xhr.status == 200)) {
 // codice 200 OK nella risposta HTTP
 if (xhr.responseText != null)
res.innerHTML = xhr.responseText;
 else
res.innerHTML = “No data received”;
 }
 else
 alert("Ajax error: " + xhr.statusText);
}
xhr.open(“GET”, url, true);
xhr.onreadystatechange = ajaxCallback;
xhr.send();

Esempio 1 completo readyState

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax exmple</title>
    <script src="utility.js"></script>
    <script>
      var stato = new Array("uninitialized", "loading", "loaded", "interactive", "complete");
      var xhr = null;
      function ajaxcall(url) {
          xhr = getXMLHttpRequestObject();
	  xhr.onreadystatechange = function () { // callback 
            	let el = document.getElementById("myelem");
                el.innerHTML += "<b>readyState: </b> " + xhr.readyState + "....." + stato[xhr.readyState] + "<br>";
            	if ((xhr.readyState == 4) & (xhr.status == 200)) {
                    	el.innerHTML += xhr.responseText;
		  }
		} 
          xhr.open("GET", url, true);
          xhr.send();
        }
    </script>
</head>
<body>
    <form method="post">
        <input type="button" onclick="ajaxcall('1_donothing.php');" value="Click here" />
    </form>
    <div style="margin:50px; padding:10px; background-color:greenyellow;" id="myelem"></div>
    </div>
</body>
</html>

utility.js

/* set XMLHttpRequest for some browsers */
/* look for more complete function */

function getXMLHttpRequestObject() {
    var ref = null;
    if (window.XMLHttpRequest) {
        ref = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // Older IE.
        ref = new ActiveXObject("MSXML2.XMLHTTP.3.0");
    }
    return ref;
}

Esempio 2 con JSON:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax exmple</title>
    <script src="utility.js"></script>

    <script>
        function getdata(url) {
            xhr = getXMLHttpRequestObject();
	    xhr.onreadystatechange = function () {
		    if ((xhr.readyState == 4) & (xhr.status == 200)) { 
			    jsondoc = JSON.parse(xhr.responseText); 
			    print(jsondoc); 
		    } 
	     }
            xhr.open('GET', url, true);
            xhr.send(null);
        }
        function print(a) {
            let el = document.getElementById("mytable");
            let out = "<table border='1' cellpadding='5'>";
            for (let i = 0; i < a.length; i++) {
		//elements can be accessed as object properties, with . notation
                out += "<tr><td>" + a[i].name + "</td>"; 
		//elements can be accessed as associative arrays, with keys
                out += "<td>" + a[i]["surname"] + "</td>";
                out += "<td>" + a[i].year + "</td></tr>";
            }
            out += "</table>";
            el.innerHTML = out;
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="GET JSON" onclick="getdata('exampleJSON.php');">
    </form>
    <br/><br/>
    <center>
        Table filled with data requested from the server:
        <br/><br/>
        <div id="mytable"></div>
    </center>
</body>
</html>

exampleJSON.php

<?php
header("Content-Type: application/json");
/* JSON output below shoud be produced dynamically */
?>
[ 
  {	 
	"name":"Mario",
        "surname": "Bianchi",
        "year":"2001"
  }
]

Nel caso di uso del metodo GET si possono inviare dei parametri costruendo la querystring

let quesrystring="?par1="+val1+"&par2="+val2;
let url=encodeURI(endpoint+querystring);
xhr.open("GET",url,true);
xhr.send();

Nota: In alcuni browser c'è un limite massimo sul numero di caratteri che si possono scrivere nelle querystring

Nel caso di uso del metodo POST i dati vengono inviati come parametri di send()

Si devono anche specificare alcuni header HTTP

Esempio:

params=encodeURI("par1=" + val1 + "&par2=" + val2);
 xhr.open("POST", url, true);
 xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
 xhr.send(params);

DOM: Document Object Model

Document: il browser trasforma ogni documento HTML che legge in un oggetto e definisce la variabile globale document per far riferimento a questo oggetto

Object: questo oggetto è caratterizzato da proprietà e metodi

Model: il browser fornisce un modello del documento letto, questo modello è un albero

La radice dell'albero corrisponde all'elemento <html>

Seguono i nodi associati agli altri elementi della pagina <head>, <body>, <p>, <h1>, ...

Ogni elemento può contenere:

test -> text node,

attributi -> attribute node,

commenti -> comment node,

altri elementi

Per accedere agli elementi del documento è necessario selezionarli usando i metodi offerti dal DOM:

var el1=document.getElementById("id");

var el2=document.getElementsByName("error");

var el3=document.getElementsByTagName("span");

var el4=document.getElementsByClassName("warning");

var el5=document.querySelector(".warning");

esiste anche document.all -> var el6=document.all

Un Document può essere visto come un albero di nodi (Node)

Il tipo Node definisce proprietà e metodi che permettono attraversare questo albero

Ogni nodo ha le seguenti proprietà

• nodeType (intero da 1 a 12)
  • Document=9
  • Element=1
  • Text=3
  • Comments=8

Ogni nodo ha le seguenti proprietà

nodeName -> nome nodo

nodeValue -> contenuto nodo

parentNode -> nodo padre del nodo corrente

childNodes -> lista dei nodi figli

firstChild, lastChild, nextSibling, previousSibling

Molti elementi HTML hanno degli attributi

Il DOM definisce i metodi per accedere/modificare i valori degli attributi

• object.getAttribute("attribute")
  • si accede all'elemento con uno dei metodi precedenti
  • si ricavano i valori dei suoi attributi

var el=document.getElementById("myimg");
	console.log(el.getAttribute("alt"));
	console.log(el.getAttribute("src"));

• object.setAttribute("attribute","value")
  • si accede all'elemento e si modificano i valori dei suoi attributi

La modifica dei valori degli attributi non si vede nel sorgente HTML: agendo sul DOM si modifica il contenuto di una pagina senza ricaricarla

Contenuto degli elementi, per esempio <p>

• La proprietà innerHTML ritorna il contenuto di un elemento come stringa con markup
• La proprietà innerText ritorna il contenuto di un elemento come stringa di testo

E' anche possibile modificare il contenuto di un documento agendo a livello di nodi grazie a metodi quali:

• createElement()
• createTextNode()
• cloneNode()
• ecc.

API FETCH

JavaScript è un linguaggio single-threaded, tutte le attività concorrenti vengono messe in coda, una sola opzione alla volta. Vengono introdotte le chiamate asincrone, le callbacks, promises (api fetch) e async/await, tutte le volte che parte una chiamata Ajax, passa attraverso vari stati e solo quando è terminata correttamente arrivano i dati, e mandiamo in esecuzione la callback che visualizza i dati rispetto alla comunicazione.

In Ajax abbiamo visto in concetto di callback, una funzione che viene eseguita al termine di una chiamata asincrona

La Fetch Api usa le promise, cioè degli oggetti (Response) restituiti dalle chiamate asincrone

Le chiamate devono "sapere cosa fare" quando terminano i task asincroni e arrivano le risposte

Una promise è un oggetto che produrrà un risultato nel futuro.

Il risultato può essere:

• il valore cercato
• la ragione per cui tale valore non viene restituito (per esempio se c'è stato un errore a livello di rete)

Una promise può trovarsi in uno stato tra: fulfulled, rejected, pending

Response.ok -> true/false (true 200-299, false)

Response.status -> codice della risposta (200 in caso di successo)

Response.statusText -> testo del codice (codice 200 è OK)

Response.Body.text() -> legge stream e ritorna promise che contiene stringa

Response.Body.json() -> legge stream e ritorna promise che contiene oggetto json

Response.Body.blob() -> legge stream e ritorna promise che contiene blob

Esempio fetch di un blob:

const image=document.querySelector('.my-image');
	fetch('flowers.jpg').then(function(response) {
      return response.blob();
    }).then(function(blob) {
      const objectURL = URL.createObjectURL(blob);
      image.src=objectURL;
    });

Si possono anche mandare dati in post

fetch(url, {
  method: "post",
  headers: {"Content-type":"application/x-www-form-urlencoded" },
  body: "email="+usermail,
}).then(function(response) {
  /* code for response */
  return response.text().then(function (result) {
    /* code fore result */
  });
});
}

Cookies

E' possibile leggere/scrivere i cookies della pagina correntemente visualizzata nel browser usando la proprietà document.cookie, questa proprietà può contenere solo stringhe

allCookies=document.cookie; //leggere cookie
document.cookie=newCookie; //possibile sovrascrivere

I cookie sono scambiati tra client e server ad ogni richiesta di uno specifico dominio, vale per le pagine, per richieste ajax, per immagini e servono per tenere traccia dell'utente.

Web Storage

Permette di memorizzare dati sul browser dell'utente in modo:

permanente: localStorage -> simile cookies persistenti

temporaneo: sessionStorage -> simile cookies sessione

Web storage fornisce maggiori capacità di memoria rispetto ai 4 KB dei cookies

Memorizza dati in forma di coppie key=value

localStorage.setItem("client1","Rossi"); -> oppure localStorage.client1="Rossi";

localStorage.getItem("client1"); -> oppure var c=localStorage.client1;

localStorage.removeItem("client1"); -> cancellare la chiave

localStorage.clear() -> rimuove tutto

L'oggetto sessionStorage è uguale all'oggetto localStorage, ma memorizza i dati solo per la durata della sessione

I dati vengono quindi persi quando si chiude browser/tab

jQuery

jQuery è una libreria JavaScript, semplifica lo scripting client-side, è free e open-source, è rilasciata sotto licenza MIT e GPL v.2, viene usata da molto colossi come Google, Dell, Wordpress ecc.

• Download della versione corrente della libreria
• Include prendendo l'indirizzo di una CDN che distribuisce jQuery

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/.../jquery.min.js">
  </script>
</head>

La sintassi di jQuery permette di selezionare elementi HTML e di eseguire azioni su di essi

$(selector).action()

• $ per definire/accedere a jQuery
• (selector) per selezionare gli elementi HTML
• action() per specificare l'azione da svolgere

Come nel caso di JavaScript "standard", anche con jQuery si può agire solo su elementi HTML già caricati nella pagina corrente

JavaScript:

document.getElementById("demo").innerHTML="Hello World!";

jQuery:

$("#demo").html("Hello World!");

jQuery Selettori

$("*") -> tutti gli elementi

$(this) -> elemento HTML corrente

$("p.intro") -> <p> con class="intro"

$("p:first") -> <p> primo elemento

$("ul li:first") -> <li> primo elemento di <ul>

$("ul li:first-child") -> <li> primo elemento di tutti gli <ul>

in jQuery, la maggior parte degli eventi del DOM hanno un metodo jQuery equivalente:

Events Mouse -> keybords -> Form -> Document/Window

click                -> keypress   -> submit -> load

dbclick            -> keydown   -> change -> resize

mouseenter    -> keyup        -> focus  -> scroll

mouseleave                          -> blur      -> unload

Spesso i metodi jQuery sono all'interno dell'evento ready per evitare al codice jQuery di essere eseguito prima del caricamento del documento

$(document).ready(function() {
  //metodi jQuery qui...
});

La funzione $.ajax() permette di fare chiamate HTTP asincrone

$.ajax(url, [, options] )

$.ajax([options])

url -> indirizzo della chiamata

success -> funzione da invocare se richiesta ok

error -> funzione da invocare se fallisce richiesta

type -> GET o POST

data -> dati da inviare come parametro della richiesta

async -> true (default) o false

$(selector.load(URL,data,callback);

$(selector.post(URL,data,callback,dataType);

$(selector.get(URL,data,callback,dataType);

jQuery Tables