Le nuove History API di HTML5: come funzionano e a cosa servono

In questa, teorica, lezione voglio parlarvi nello specifico di una nuova API introdotta da questo nuovo linguaggio che prende il nome di History API.

Queste API, che per poterle utilizzare avremo bisogno di creare uno script JavaScript, ci permettono di  fare quello che fino a qualche tempo fa veniva definito come AJAX. In poche parole, queste API ci permetteranno di caricare soltanto una porzione di una pagina senza causare l’aggiornamento completo della pagina stessa.

Forse sto correndo un pò troppo, facciamo qualche passo indietro.

Tutto su internet è rintracciabile grazie al suo URL (Uniform Resource Locator), possiamo inserire questo elemento all’interno di qualsiasi barra degli indirizzi di qualsiasi browser e saremo in grado di raggiungere la risorsa che ci interessa.

Dato che siamo su OilProject potremmo raggiungere la sua pagina contatti inserendo direttamente questo URL http://www.oilproject.org/pagine/Contatti all’interno dei nostri browser.

Niente di nuovo fino a questo punto, ma perché rima ho parlato di AJAX?

Forse non tutti sanno che dietro al termine AJAX si cela una tecnica JavaScript che permette di caricare soltanto una porzione di una pagina; facciamo un piccolo esempio.

In quasi qualsiasi sito web elementi come la testata e il footer sono elementi che restano uguali per qualsiasi pagina ma, se andiamo dalla homepage alla pagina Contatti (come per l’esempio su Oilproject) il nostro browser andrà a caricare interamente la pagina contatti andando, quindi, anche a caricare elementi comuni come la testata ed il footer; andando a sprecare molta della preziosa banda...

Grazie ad AJAX era possibile definire quelle aree che sarebbero rimaste immutate permettendo al browser di andare a caricare soltanto quella porzione di contenuto che si sarebbe modificato da una pagina all’altra.

Il più grosso problema di questa tecnica era che, se avessi voluto condividere la pagina contatti caricata via AJAX con un mio amico, non sarei stato in grado di farlo perché utilizzando questa tecnica la URL della pagina che stavo consultando sarebbe rimasta la stessa, ovvero http://www.oilproject.org.

Questo, oltre che l’impossibilità di usare il bottone Indietro dei nostri browser, risultava un grosso limite per questa tecnica e per coloro che desideravano condividere questo tipo di pagine.

Elencati i problemi che si potevano incontrare con le vecchie tecniche ecco che sono state create le History API per risolvere la situazione infatti, grazie ad esse, non sarete soltanto in grado di tornare in controllo del vostro amatissimo bottone Indietro ma sarete in grado di conoscere anche l’URL per quella data risorsa che sarà condivisibile attraverso la rete!

Le History API basano il loro funzionamento sulle seguenti funzioni e proprietà:

• window.history.length - restituisce il numero di elementi presenti nell’oggetto history;
• window.history.state - restituisce lo stato corrente dell’oggetto (dove ci troviamo);
• window.history.go( n ) - ci permette di spostarci avanti e indietro nella storia con il numero di passi indicato da n;
• window.history.back() - ci fa muovere un passo indietro;
• window.history.forward() - con questa funzione facciamo invece un passo avanti;
• window.history.pushState( data, title, url ) - ci permette di inserire un nuovo passo all’interno della storia specificandone titolo e tipo (mentre la URL è un parametro opzionale);
• window.history.replaceState( data, title, url ) - ci permette di sostituire lo stato corrente con le informazioni che passiamo attraverso i parametri.

So che molto probabilmente, dopo aver letto questa lezione, sarete un pò confusi ma, come vi ho ricordato più volte durante il corso, in questo contesto vi stiamo introducendo alle novità introdotte dal linguaggio HTML5, se siete interessati a portare avanti questo argomento fatecelo sapere e saremo più che lieti di portare avanti la vostra formazione!