Creare un sito web in pochi minuti

Costruire un sito in Ajax

Questo breve tutorial darà indicazioni su come costruire un sito che si appoggi interamente su AJAX. Non è richiesto né che siate esperti nell'uso di questa tecnologia, né che conosciate javascript. Qui ci si concentrerà su come utilizzare AJAX in un sito 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 bisogno di:

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 è molto semplice. Consiste di una serie di collegamenti e di una sezione principale per il contenuto. Ovviamente potete aggiungere altri elementi, come un logo o immagini fintanto che li teniate al di fuori della sezione principale per il contenuto.

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 il codice</a>

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

Il codice AJAX

Il codice seguente andrà messo all'interno di ajax.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); // debug
            document.getElementById("content").innerHTML = response;
            }   
    }
}

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

document.getElementById("content").innerHTML = response assegna la risposta ritornata dallo script AJAX (ossia il contenuto della pagina che è stata richiesta) all'elemento <div> con id pari a content.

Rendere funzionanti i collegamenti

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

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

Ora dobbiamo aggiungere un evento onClick in maniera tale da poter eseguire del codice javascript al click del mouse sul collegamento. Il codice javascript chiamerà la funzione sendRequest() la quale prenderà un solo parametro, ossia il nome della pagina. Il codice risultante sarà quindi del tipo onClick = "sendRequest('page.html'). Bisogna ricordare che non si può passare come parametro index.html per il contenuto della pagina principale dal momento che è proprio questo file a richiamare lo script e quindi si otterrebbero risultati poco desiderabili. Sarà sufficiente chiamare con un altro nome il contenuto della pagina index.html, per esempio home.html. Ecco come risulteranno i collegamenti:

<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 non saranno delle pagine HTML complete, dovranno solo contenere il codice principale che si intende mostrare tra i tag <div>, quindi per lo più saranno costituite da testo.

Se ora aprite la pagina principale creata in precedenza, noterete che è vuota. Questo perché non è stata ancora richiamata la funzione sendRequest. Inoltre il codice non funzionerà fintanto che non sarà messo su un server web, questo perché javascript manda delle richieste HTTP, ragion per cui, come specificato all'inizio dell'articolo, avrete bisogno di installare un web server sul vostro computer.

Inizializzazione della pagina principale

Abbiamo costruito la pagina pricipale, quelle secondarie e il codice AJAX in grado di popolare il contenuto della pagina principale. Ad ogni modo quando la pagina principale viene caricata la prima volta, il suo contenuto è vuoto. Ora provvederemo a creare il codice in grado di inizializzarla. Il codice javascript che segue andrà messo all'interno del tag <div> con id content, questo perché quando il browser carica la pagina, esegue il codice nel tag <head> prima che il DOM sia costuito in modo appropriato. 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 la pagina index.html. Questa richiesta può essere posta in tre modi differenti:

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

L'espressione if controllerà tutti questi casi e nel caso uno di questi risulti vero, provvederà a mandare una richiesta per home.html. Se il 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 un URL valido.

Conclusioni

Come si è potuto constatare, è relativamente semplice costruire un sito che sfrutti le funzionalità di base della tecnologia AJAX. Esistono alcuni svantaggi però nell'adozione di tale metodologia, il più grande dei quali riguarda il fatto che l'utente non possa usufruire della cronologia di navigazione per tornare avanti e indietro nelle pagine.
Un altro svantaggio è ovviamente la costrizione dell'utente all'abilitazione di javascript per rendere il sito funzionale, sarà quindi opportuno informare l'utente di attivare javascript nel caso non sia già attivo per poter fruire dei contenuti del nostro sito: questo può essere semplicemente fatto attraverso il tag <noscript>, il cui contenuto viene visualizzato solo ed esclusivamente nel caso in cui javascript non sia abilitato.