Christian Castelli
a- a+

Creare un sito web in pochi minuti

Costruire un sito in Ajax

Questo breve tutorial darà indicazioni su comecostruire un sito che si appoggi interamente su AJAX. Nonè richiesto né che siate esperti nell'usodi questa tecnologia, né che conosciate javascript.Qui ci si concentrerà su come utilizzare AJAX in unsito web.

Ci sono varie ragioni che portano ad usare AJAX:

  • maggiore velocità di risposta del vostro sito alle richieste dell'utente;
  • minore richiesta di risorse a carico del server;
  • semplicità nella separazione delle pagine in parti fondamentali (header, sidebar, footer, content).

Per poter eseguire gli esempi in questa pagina avrete bisognodi:

  • un web server: un modo rapido per avere Apache (un noto web server), PHP (un linguaggio lato server) e MySQL (un noto database management system) è scaricare e installare xampp oppure potete leggervi il nostro articolo PHP 5,MySQL5 e Apache 2 su Windows? Installazione in 10 minuti.
  • un browser recente: va bene qualsiasi browser purché supporti la creazione di oggetti XMLHttpRequest.
  • abilitare javascript: poiché AJAX è codice javascript, è necessario che abilitiate javascript.


Struttura HTML di base

Il codice HTML nell'esempio qui sotto è moltosemplice. Consiste di una serie di collegamenti e di unasezione principale per il contenuto. Ovviamente poteteaggiungere altri elementi, come un logo o immagini fintantoche li teniate al di fuori della sezione principale per ilcontenuto. 

html><head>    <title>Il mio sito in AJAX</title>    <!-- link allo script javascript esterno -->     <script language="Javascript" type="text/javascript" src="ajax.js">     </script>   </head>   <body> <div id="nav">  <a href="#index">Home</a> |     <a href="#about">Chi sono</a> |     <a href="#rand">Una pagina a caso</a>   </div> <br/> <div id="content">   </div>  </body></html>

 

<a href="#" title="Vedi esempio">Clicca per vedere ilcodice</a>



Come si può vedere nel codice qui sopra,c'è un collegamento ad uno script esternodenominato ajax.js. Questo scriptconterrà il codice AJAX. E' buona pratica separarele varie parti del codice per mantenerlo ordinato epiù leggibile.
L'unica altra parte di rilievo è il tag<div> con id pari a content.Il contenuto di questo tag verrà creato dinamicamenteda AJAX.


Il codice AJAX

Il codice seguente andrà messo all'interno diajax.js. 

function createRequestObject() {    var req;  if(window.XMLHttpRequest){    // Firefox, Safari, Opera...    req = new XMLHttpRequest();    } else if(window.ActiveXObject) {  // Internet Explorer 5+req = new ActiveXObject("Microsoft.XMLHTTP");  } else {  // se arriviamo in questo punto,  // probabilmente abbiamo a che fare con un vecchio browser // e informiamo l'utente.  alert('Errore: non riesco a creare l'oggetto XMLHttpRequest');  }     return req;    }    // Creiamo l'oggetto XMLHttpRequest   var http = createRequestObject();    function sendRequest(webpage) {  // apriamo lo script PHP per la richiesta http.open('get', webpage);    http.onreadystatechange = handleResponse;    http.send(null);}function handleResponse() {    if(http.readyState == 4 && http.status == 200){  // variabile che contiene il testo ritornato dall oscript PHP  var response = http.responseText;if(response) { // UPDATE ajaxTest content//alert(response); // debugdocument.getElementById("content").innerHTML = response;} }}

 

<a href="#" title="Vedi esempio">Clicca per vedere ilcodice</a>;

 

document.getElementById("content").innerHTML= response assegna la risposta ritornata dallo scriptAJAX (ossia il contenuto della pagina che è statarichiesta) all'elemento <div> con idpari a content.


Rendere funzionanti i collegamenti

Ora che abbiamo lo script, ci occuperemo dei collegamentirelativi alle pagine del sito. Questi collegamenti sono deltipo: 

<a href="#index">Home</a>

Ora dobbiamo aggiungere un evento onClick inmaniera tale da poter eseguire del codice javascript al clickdel mouse sul collegamento. Il codice javascriptchiamerà la funzione sendRequest() laquale prenderà un solo parametro, ossia il nome dellapagina. Il codice risultante sarà quindi del tipoonClick ="sendRequest('page.html'). Bisognaricordare che non si può passare come parametroindex.html per il contenuto della paginaprincipale dal momento che è proprio questo file arichiamare lo script e quindi si otterrebbero risultati pocodesiderabili. Sarà sufficiente chiamare con un altronome il contenuto della pagina index.html, peresempio home.html. Ecco come risulteranno icollegamenti: 

<a href="#index" onClick="sendRequest('home.html');">Home</a> |<a href="#about" onClick="sendRequest('about.html');">About Page</a> |   <a href="#rand" onClick="sendRequest('rand.html');">A Random Page</a>

Ora resta solo il compito di creare le pagine. Queste nonsaranno delle pagine HTML complete, dovranno solo contenereil codice principale che si intende mostrare tra i tag<div>, quindi per lo più saranno costituite datesto.

Se ora aprite la pagina principale creata in precedenza,noterete che è vuota. Questo perché nonè stata ancora richiamata la funzionesendRequest. Inoltre il codice nonfunzionerà fintanto che non sarà messo su unserver web, questo perché javascript manda dellerichieste HTTP, ragion per cui, come specificatoall'inizio dell'articolo, avrete bisogno diinstallare un web server sul vostro computer.


Inizializzazione della pagina principale

Abbiamo costruito la pagina pricipale, quelle secondarie e ilcodice AJAX in grado di popolare il contenuto della paginaprincipale. Ad ogni modo quando la pagina principale vienecaricata la prima volta, il suo contenuto è vuoto. Oraprovvederemo a creare il codice in grado di inizializzarla.Il codice javascript che segue andrà messoall'interno del tag <div> con idcontent, questo perché quando il browsercarica la pagina, esegue il codice nel tag<head> prima che il DOM sia costuito in modoappropriato. Ecco il codice: 

<script language="Javascript" type="text/javascript">  if ((window.location.href.split("#" , 2)[1] == null) ||(window.location.href.split("#" , 2)[1] == "") ||(window.location.href.split("#" , 2)[1] == "index")) { sendRequest("home.html");    }else {   sendRequest(window.location.href.split("#" , 2)[1] + ".html");  }  </script>

Il codice prima controlla se l'utente sta richiedendo lapagina index.html. Questa richiesta puòessere posta in tre modi differenti:

  1. attraverso URL del tipo "dominio.com" che restituirà null;
  2. attraverso URL del tipo "dominio.com#" che restituirà "";
  3. attraverso URL del tipo "dominio.code#index" che restituirà "index".

L'espressione if controllerà tuttiquesti casi e nel caso uno di questi risulti vero,provvederà a mandare una richiesta per home.html. Seil browser non sta richiedendo il contenuto della home page,viene spedita una richiesta per la pagina desiderata.L'URL viene spezzato al carattere # e la parte.html viene concatenata alla fine per fornire unURL valido.


Conclusioni

Come si è potuto constatare, è relativamentesemplice costruire un sito che sfrutti le funzionalitàdi base della tecnologia AJAX. Esistono alcuni svantaggiperò nell'adozione di tale metodologia, ilpiù grande dei quali riguarda il fatto chel'utente non possa usufruire della cronologia dinavigazione per tornare avanti e indietro nelle pagine.
Un altro svantaggio è ovviamente la costrizionedell'utente all'abilitazione di javascript perrendere il sito funzionale, sarà quindi opportunoinformare l'utente di attivare javascript nel caso nonsia già attivo per poter fruire dei contenuti delnostro sito: questo può essere semplicemente fattoattraverso il tag <noscript>, il cuicontenuto viene visualizzato solo ed esclusivamente nel casoin cui javascript non sia abilitato.