Jump to content
  • Javascript: JSON, Ajax, DOM, API Fetch, Cookie, Web Storage, jQuery


     Share

    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

     

     

     

     

     

     

     

     

     

     Share


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...

Important Information

Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.