AJAX

COS’È AJAX
Nella programmazione web il codice si interpreta nel client e si genera nel server. Per fare un cambio di dati (elementi)
con HTML, bisogna fare una chiamata al server e ricaricare la pagina per portare i nuovi dati al browser.
Ajax (Asynchronous JavaScript And XML)non è un linguaggio di programmazione, ma una tecnica di sviluppo di
JavaScript che consente di creare un canale di comunicazione asincrono con il server dal client, potendo così recuperare
dati dal server senza ricaricare una pagina.
La tecnologia AJAX divenne uno standard nel 2005 e iniziò ad essere supportata nella maggior parte dei browser.
Abbiamo visto fin ora che quando un utente clicca su un link, il browser va a una nuova pagina e la pagina attuale
sparisce e si mostra quella nuova. Con Ajax è possibile chiamare altri documenti web e mostrare il suo contenuto in
elementi della pagina attuale, come ad esempio introdurre un contenuto esterno in un div.
Consente, passando parametri alla pagina, mostrare informazioni personalizzate in base ad azioni dell’utente.
Risulta molto utile quando, invece di invocare un file statico HTML, si carica un file di un linguaggio server (PHP, ASP)
che elabora l’informazione passata come parametro per fare richieste a un database e ritornare il contenuto.
Un altro elemento importante per Ajax è l’XML (extensible markup language), un metalinguaggio (linguaggio definito
per definire altri linguaggi), diventato uno standard, per linguaggi di markup, che fornisce una rappresentazione
strutturata dei dati e leggibile da un umano senza il bisogno di software, usato per scambiare informazioni tra diversi
linguaggi, come in questo caso il linguaggio server e JavaScript.
Ajax utilizza una combinazione di un oggetto XMLHttpRequest, integrato nel browser, per richiedere dati da un server e
DOM Javascript e HTML per utilizzare o visualizzare i dati.
Per i dati si può utilizzare XML, ma anche un normale testo o un testo JSON.

VANTAGGI
1) Supportato dai principali browser;
2) Migliora l’interattività con l’utente;
3) Non ha bisogno di nessuna installazione;
4) Velocità di carica, dato che non c’è che ricaricare completamente una pagina, bensì il contenuto.

SVANTAGGI
1) Può dare problemi con vecchi browser;
2) Richiede, nel browser, aver attivato l’esecuzione di JavaScript;
3) Per sfruttarlo al massimo richiede la conoscenza di altri linguaggi come PHP, ASP, ecc.
4) L’elemento “torna a pagina precedente” si perde.
5) Cambiando il contenuto su una pagina, ci sarà informazione non accessibile direttamente da un URL.
6) I robots dei motori di ricerca non sono capaci di interpretare correttamente le chiamate di Ajax, una pagina che mostra
informazioni principali con questa tecnica si posizionerà male.

SERVER
Vediamo alcuni concetti base sui server che ci consentono di usare la tecnologia Ajax. La tecnologia Ajax,si basa nella
carica di file esterni per l’elaborazione nel web. La carica di questi documenti si deve realizzare mediante il protocollo
http, protocollo universale per servire documenti web. Si tratta di eseguire un documento Ajax che carica file esterni e si
esegue semplicemente aprendo il file HTML dal computer. È molto probabile che la carica del documento fallisca, questo
non è un problema del codice sorgente, ma deve essere caricato su un server su internet per funzionare. Per poterlo
provare dal computer, senza possedere un server in internet dove caricare i file, bisogna installare un server web sul
computer. Il più popolare è Apache e pur essendo complicato da configurare, esistono pacchetti, come XAMPP o
LAMPP(linux), che includono il server Apache, il database MySQL e un interprete del linguaggio server PHP, che hanno
il vantaggio che si possono installare come normali programmi e funzionare senza configurare molto.
1)Installato il server, bisogna trovare la cartella principale dove mettere i documenti da caricare che verranno letti dal
server. Su linux è la cartella htdocs che si trova nella cartella lampp , se si vuole modificare il percorso, bisogna
modificare il file httpd.conf nella cartella conf. Aperto con un editor di testo, cercare la stringa “DocumentRoot e
modificare questo percorso per indicare dove memorizzare i file. Fare lo stesso con la stringa Directory.
2)Trovata la cartella principale, bisogna inserire in essa i file da caricare dal proprio browser, se si inserisce un file
ejemplo.html per caricarlo da apache bisogna aprire il browser e caricare http://localhost/ejemplo.html.
Spesso le cartelle hanno permessi che si possono rimuovere da terminale con:

sudo chown -R nomeutente /opt/lampp/htdocs/nomecartella

È necessario caricare tutti gli esempi Ajax con questo metodo e il porcorso dei file deve iniziare con http.
Per motivi di sicurezza, i browser non consentono l’accesso ai domini, ciò significa che sia la pagina web che i file da cui
caricare i dati devono trovarsi sullo stesso server.
COME FUNZIONA
Ajax consente di aggiornare le pagine web o parti di esse, in modo asincrono scambiando dati con un server dietro le
quinte, senza ricaricare la pagina.
Questo avviene:
1) si verifica un evento in una pagina web caricata;
2) viene creato un oggetto XMLHttpRequest da Javascript;
3) l’oggetto XMLHttpRequest invia una richiesta a un server;
4) il server elabora la richiesta;
5) il server invia una risposta alla pagina;
6) la risposta viene letta da JavaScript;
7) Javascript esegue l’azione correttamente.

L’OGGETTO XMLHTTPREQUEST
L’oggetto XMLHttpRequest è l’elemento chiave per creare un canale di comunicazione con il server e scambiare dati
dietro le quinte.
È supportato (incorporato) da tutti i browser moderni.
La sintassi per creare un istanza di questo oggetto è:
var variabile = new XMLHttpRequest();
Versioni di Internet Explorer non utilizzano l’oggetto XMLHttpRequest, ma un oggetto ActiveXObject:
var variabile = new ActiveXObject(“Microsoft.XMLHTTP”);
Per gestire questa situazione e non andare incontro a problemi, è sempre consigliato usare la seguente sintassi:

if (window.XMLHttpRequest){ //mozilla, chrome, safari....

objRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // internet explorer
objRequest = new ActiveXObject(“Microsoft.XMLHTTP”)
}

PROPRIETÀ DI XMLHTTPREQUEST
Le proprietà dell’oggetto XMLHTTPREQUST sono:
- onreadystatechande: definisce una function da eseguire quando cambia lo stato (proprietà readyState) dell’oggetto.

- readyState: contiene lo stato attuale dell’oggetto, può avere il valore:

- 0 : richiesta non inizializzata
- 1: connessione server stabilita
- 2 : richiesta ricevuta (caricando)
- 3 : elaboazione richiesta(interattivo, abbiamo dati parziali)
- 4 : completato, richiesta terminata risposta pronta.

- responseText: restituisce la risposta del server come una stringa.

- responseXML: restituisce la risposta del server come un oggetto DOM XML.

- status: ritorna il numero status di una richiesta, i principali:

- 200: “OK”
- 403: Forbidden
- 404: Not Found

Quando readyState è 4 e lo status è 200 la risposta è pronta:

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange =function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Questa function crea un oggetto XMLHttpRequest, aggiunge la function da eseguire quando la risposta al server è pronta
e invia la richiesta al server.
METODI DI XMLHTTPREQUEST
- open(metodo, url, asincrono, utente, password) Apre un canale asincrono con il server, specifica il tipo di richiesta.
Riceve alcuni parametri:
1. metodo: è il tipo di richiesta http che può essere GET o POST. GET è più semplice e veloce di POST e può essere
utilizzato nella maggior parte dei casi. Usare le richieste POST quando:
•Un file memorizzato nella cache non è un'opzione (aggiorna un file o un database sul server).
•Invio di una grande quantità di dati al server (il POST non ha limiti di dimensioni).
•Invio dell'input dell'utente (che può contenere caratteri sconosciuti), il POST è più robusto e sicuro di GET.
2. url: è l’url in cui avviene la richiesta http, ovvero l’indirizzo o il nome del file sul server da leggere.
3. asincrono (opzionale): con valori false (richiesta in modo sincrono) o true(asincrono), JS non deve attendere la risposta
del server. async = false non è raccomandato perché il codice JavaScript smetterà di essere eseguito fino a quando la
risposta del server non sarà pronta. Se il server è occupato o lento, l'applicazione si bloccherà o si fermerà.
4. utente (opzionale): username per l’autenticazione dell’url.
5. password (opzionale): password per l’autenticazione dell’url.
- send(): effettua la richiesta http al server, finché non si chiama questo metodo non inizia la connessione. Di default
riceve un valore null che indica i possibili parametri associati all’invio della richiesta.
- abort(): arresta la richiesta corrente.
- getAllResponseHeaders(): ritorna una stringa con le informazioni di intestazioni di risposta del server come data
richiesta, tipo di server, ultima modifica, tipo di contenuto, ecc.
- getResponseHeader(): riceve come parametro il nome di una intestazione specifica e ritorna una stringa con il suo
contenuto.
- setRequestHeader(): riceve due parametri: il nome di un’intestazione e il valore che si vuole dare. Si deve chiamare
prime del metodo open().
Vediamo come integrare l’oggetto dentro una function per poter fare chiamate asincrone al server.
Esempio di come caricare in un elemento div il testo di un file (texto.html), mediante Ajax .

<html>
<head>
<title>Ejemplo basico AJAX</title>
<script type="text/javascript">
function cargar() {
var objHttp = null;
if (window.XMLHttpRequest) {
objHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
objHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
objHttp.open("GET", "texto.html", true);
objHttp.onreadystatechange = function() {
if (objHttp.readyState == 4) {
document.getElementById('caja').innerHTML = objHttp.responseText;
}
}
objHttp.send(null);
}
</script>
</head>
<body>
<a href="#" onclick="cargar()">Cargar texto</a><br/><br/>
<div style="width:400px;height:400px;border:1px solid #FC0" id="caja">
Aquí se cargaran los textos desde AJAX
</div>
</body>
</html>

Per farlo funzionare correttamente bisogna caricare i file nel server Apache.
La pagina HTML contiene una sezione <div> e un link, la sezione <div> viene utilizzata per visualizzare le informazioni
da un server. Il link chiama una funzione (se viene cliccato). La funzione richiede i dati da un server Web e la visualizza
 JSON

INTRODUZIONE
JSON (JavaScript Object Notation) è una sintassi per l'archiviazione e lo scambio di dati, è un testo scritto con sintassi di
oggetti JavaScript.
Quando si scambiano dati tra un browser e un server, i dati possono essere solo testo. JSON è testo e possiamo
convertire qualsiasi oggetto JavaScript in JSON e inviare JSON al server e possiamo inoltre convertire qualsiasi JSON
ricevuto dal server in oggetti JavaScript.
In questo modo possiamo lavorare con i dati come oggetti JavaScript, senza complicate analisi e traduzioni.
Quando si memorizzano i dati, i dati devono essere di un certo formato e, indipendentemente da dove si sceglie di
memorizzarli, il testo è sempre uno dei formati legali. JSON rende possibile memorizzare oggetti JavaScript come testo,
utilizza la sintassi Javascript, ma il suo formato è solo testo che può essere letto e utilizzato da qualsiasi linguaggio di
programmazione. Poiché il formato è solo testo, può essere facilmente inviato da e verso un server e utilizzato come
formato dati da qualsiasi linguaggio di programmazione.
JSON consente di generare file che servono come database, senza la necessità di un SQL, per piccoli progetti web.

SINTASSI
La sintassi JSON è un sottoinsieme della sintassi JavaScript, è derivata dalla sintassi di oggetti JavaScript:
- I dati sono in coppie nome/valore
- I dati sono separati da virgole
- Le parentesi graffe tengono oggetti
- Le parentesi quadre contengono array
I dati JSON sono scritti come coppie nome:valore, nome (tra virgolette), seguito da due punti e da un valore (tra
virgolette):
“nome”:”Niko”
I nomi JSON, a differenza di Javascript, richiedono virgolette (non apici).
I valori devono essere uno dei seguenti tipi di dati: una stringa, un numero, un oggetto (oggetto JSON), un array, un
booleano, nullo. Non può avere come valori: una funzione, una data, non definito.
Poiché la sintassi JSON è derivata dalla notazione di oggetti JavaScript, è necessario pochissimo software aggiuntivo per
lavorare con JSON in JavaScript.
Allo stesso modo in cui gli oggetti JavaScript possono essere usati come JSON, gli array JavaScript possono anche essere
usati come JSON.
Il tipo di file per i file JSON è ".json".

JSON VS XML
Sia JSON che XML possono essere utilizzati per ricevere dati da un server web.
Vediamo un esempio di come JSON ed XML definiscono un oggetto dipendenti, con una matrice di 3 dipendenti:
Esempio JSON Esempio XML

{ “dipendenti”:[ <dipendenti>
{“nome”:”John”, “cognome”:”Doe”}, <dipendente>
{“nome”:”Anna”, “cognome”:”Smith”}, <nome>John</nome><cognome>Doe</cognome>
{“nome”:”Peter”, “cognome”:”Jones”} </dipendente>
]} <dipendente>
<nome>Anna</nome><cognome>Smith</cognome>
</dipendente>
<dipendente>
<nome>Peter</nome><cognome>Jones</cognome>
</dipendente>
</dipendenti>

Vediamo che JSON a differenza di XML: non usa il tag di fine, è più breve, è più veloce da leggere e scrivere, può usare
matrici. La più grande differenza è che XML deve essere analizzato con un parser XML, JSON può essere analizzato da
una funzione JavaScript standard.
Sia JSON che XML sono leggibili dall'uomo, gerarchici (valori all'interno dei valori), possono essere analizzati e
utilizzati da molti linguaggi di programmazione, possono essere recuperati con XMLHttpRequest.
Per le applicazioni AJAX, JSON è più veloce e più facile di XML:
Usando XML: -Scarica un documento XML -Utilizzare il DOM XML per scorrere il documento- Estrai valori e archivia
in variabili.
Utilizzando JSON: -Recupera una stringa JSON -JSON.Parola la stringa JSON
FUNCTION JSON.parse()
Un uso comune di JSON è lo scambio di dati da un server web.
Quando si ricevono dati da un server Web, i dati sono sempre una stringa.
La function JSON.parse() analizza e converte i dati in un oggetto JavaScript
Esempio: testo ricevuto da un server web:
{“name:”John”, “age”:30, “city”:”London”}
Uso di JSON.parse() per convertire il testo in un oggetto JavaScript:
var obj = JSON.parse({“name:”John”, “age”:30, “city”:”London”});
Adesso l’oggetto può essere usato nella pagina:
<script>
document.getElementById(“id”).innerHTML = obj.name + obj.age;
</script>

È possibile richiedere JSON dal server utilizzando una richiesta AJAX.

Finché la risposta dal server è scritta in formato JSON, è possibile analizzare la stringa in un oggetto JavaScript.
Utilizzare XMLHttpRequest per ottenere dati dal server.

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
   document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Se si usa JSON.parse() su un JSON array, il metodo restituirà un array Javascript anziché un oggetto.

Gli oggetti data non sono consentiti in JSON.

Se è necessario includere una data, scriverla come una stringa e riconvertirlo in un oggetto data successivamente:
var text = {“name”:”John”, “birth”:”1986-12-14”, “city”:”London”};

var obj = JSON.parse(text);

obj.birth = new Date(obj.birth);

Le funzioni non sono consentite in JSON. Se è necessario includere una funzione, scriverla come una stringa e
riconvertirla in una funzione successivamente con eval(), anche se bisogna evitare di usare function in JSON.
var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

FUNCTION JSON.stringify()
Un uso comune di JSON è lo scambio di dati verso un server.
Quando si inviano dati a un server Web, i dati devono essere una stringa, per convertire un oggetto JavaScript in una
stringa si usa la function JSON.stringify().
Se si ha un oggetto JavaScript:
var obj = {“name:”John”, “age”:30, “city”:”London”};

esso si converte in una stringa con:

var myJson = JSON.stringify(obj);

myJson è ora una stringa pronta per essere inviata a un server.

È anche possibile convertire gli array JavaScript in una stringa:

Se si ha un array in JavaScript:

var arr = [“John”,”Peter”,”Sally”,”Jane”];

si converte in una stringa con:
var myJson = JSON.stringify(arr);
è ora una stringa e pronta per essere inviata a un server.
Gli oggetti data non sono consentiti in JSON.
La function JSON.stringify() converte una qualsiasi data in stringa
var obj = {name:”John”, birth:”1986-12-14”, city:”London”};
var myJson = JSON.stringify(obj);
document.getElementById(“id”).innerHTML = myJSON;

Le funzioni non sono consentite come valori di oggetto in JSON.

La function JSON.stringify() rimuoverà qualsiasi function da un oggetto Javascript, sia il nome che il valore.
Questo può essere risolto se converti le tue funzioni in stringhe prima di eseguire la function JSON.stringify():
var obj = {name:”John”, age: function() {return 30;}, city:”London”};
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);

JSON ARRAY
Gli array in JSON sono quasi gli stessi degli array in JavaScript.
In JSON, i valori dell'array devono essere di tipo string, number, object, array, boolean o null .
In JavaScript, i valori dell'array possono essere questi, più qualsiasi altra espressione JavaScript valida, incluse funzioni,
date e non definito.
Gli array possono essere valori di una proprietà dell'oggetto:
{
"name":"John",
"age":30,
"cars":["Ford", "BMW", "Fiat"]
}
 ESEMPIO DI RSS DA FILE XML

<html>
<head>
<title>Ejemplo AJAX e XML</title>
</head>
<body>
<a href="#" onclick="loadDoc()">carica</a>
<div id="testo">testo da caricare</div>
<script type="text/javascript">
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
scorrereFile(this);
}
};
xhttp.open("GET", "rss2.0.xml", true);
xhttp.send();
}

function scorrereFile(file) {
var fileXml;
var titolo = "";
var i;
fileXml = file.responseXML;
var x = fileXml.getElementsByTagName("item");
for (i = 0; i < x.length; i++) {
titolo = titolo + x[i].childNodes[0].firstChild.nodeValue + "<br>";
}
document.getElementById("testo").innerHTML = titolo;
}
</script>
</body>
</html>