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
Recommended Comments
There are no comments to display.