Rotazione banner in Ajax

Scritto da Luca Ruggiero nella sezione Ajax

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Introduzione

AJAX, con un po di fantasia, può tornarci utile alla scrittura di una moltiplicità di utili applicazioni per la quotidiana amministrazione di un sito Web.

In questo articolo analizziamo la visualizzazione di un circuito di rotazione banner temporizzato, usando - separatamente - sia ASP che PHP come linguaggi di scripting lato server per accedere ai banner con AJAX.

In sostanza, mostreremo a video un banner e, dopo 10 secondi, ne mostreremo un altro, senza bisogno di fare il refresh di pagina ed accedendo ad una base dati gestita lato server!

Lo script ASP

Focalizziamo la nostra attenzione sull'interazione tra AJAX ed ASP/PHP, piuttosto che perdere inutile tempo ad accedere ad un reale database (Access o MySQL), cosa che di certo sappiamo giù fare.

Vediamo dunque un semplice script ASP che contiene dei banner in un array e ne mostra a video uno solo, a caso:

<%@LANGUAGE = JScript%>
<%
    Response.Buffer = true;
    Response.Expires = 0;

    var immagine = new Array();
    var collegamento = new Array();
    var casuale;

    immagine[0] = "mrwebmaster.gif";
    collegamento[0] = "http://www.mrwebmaster.it/";

    immagine[1] = "forum.gif";
    collegamento[1] = "http://forum.mrwebmaster.it/";

    immagine[2] = "tools.gif";
    collegamento[2] = "http://tools.mrwebmaster.it/";

    var casuale = Math.floor(Math.random() * immagine.length);
%>
<a href="<%=collegamento[casuale]%>"><img src="<%=immagine[casuale]%>" border="0"></a>
Salviamo il file come banner.asp.

Lo script PHP

In funzione della stessa filosofia, creiamo l'equivalente codice in PHP:
<?
    header("Cache-Control: no-cache, must-revalidate");

    $immagine[0] = "mrwebmaster.gif";
    $collegamento[0] = "http://www.mrwebmaster.it/";

    $immagine[1] = "forum.gif";
    $collegamento[1] = "http://forum.mrwebmaster.it/";

    $immagine[2] = "tools.gif";
    $collegamento[2] = "http://tools.mrwebmaster.it/";

    $casuale = rand(0, count($immagine) - 1);
?>
<a href="<?echo $collegamento[$casuale];?>"><img src="<?echo $immagine[$casuale];?>" border="0"></a>
Salviamo il file come banner.php.

A completa libertà del lettore la scelta su quale dei due linguaggi utilizzare.

Nota: sia nel caso di ASP che in quello di PHP è stato gestito il file con l'espirazione automatica della cache, in modo da non salvare tra i file temporanei la prima versione del file: questo vorrebbe dire visualizzare sempre lo stesso banner!

Lo script AJAX

Vediamo adesso lo script Javascript per AJAX che richiama via XMLHTTP il file ASP/PHP per la visualizzazione del banner.

Iniziamo con la porzione di codice principale:
var XMLHTTP;

function Richiesta()
{
    XMLHTTP = RicavaBrowser(CambioStato);
    XMLHTTP.open("GET", "banner.ext", true);
    XMLHTTP.send(null);
}
Nel codice è evidenziato .ext: sostituire con .asp o con .php a seconda del linguaggio che si intende utilizzare.

Per completezza, vediamo il resto del codice Javascript con le funzioni a corredo di quella di richiesta AJAX:
function CambioStato()
{
    if (XMLHTTP.readyState == 4)
    {
        var R = document.getElementById("risultato");
        R.innerHTML = XMLHTTP.responseText;
    }
}

function RicavaBrowser(QualeBrowser)
{
    if (navigator.userAgent.indexOf("MSIE") != (-1))
    {
        var Classe = "Msxml2.XMLHTTP";
        if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
        {
            Classe = "Microsoft.XMLHTTP";
        } 
        try
        {
            OggettoXMLHTTP = new ActiveXObject(Classe);
            OggettoXMLHTTP.onreadystatechange = QualeBrowser;
            return OggettoXMLHTTP;
        }
        catch(e)
        {
            alert("Errore: l'ActiveX non verrà eseguito!");
        }
    }
    else if (navigator.userAgent.indexOf("Mozilla") != (-1))
    {
        OggettoXMLHTTP = new XMLHttpRequest();
        OggettoXMLHTTP.onload = QualeBrowser;
        OggettoXMLHTTP.onerror = QualeBrowser;
        return OggettoXMLHTTP;
    }
    else
    {
        alert("L'esempio non funziona con altri browser!");
    }
}
Salvare tutto il codice Javascript nel file banner.js.

Il codice HTML

Non ci resta che visualizzare a video il banner su un qualsiasi file HTML (ASP o PHP) delo nostro sito.

Innanzitutto includiamo il file Javascript:
<script type="text/javascript" src="banner.js"></script>
Poi, richiamiamo la funzione AJAX al caricamento della pagina e successivamente con una temporizzazione ogni 10 secondi:
<script type="text/javascript">
window.onload = function()
{
    Richiesta();
}
function RicaricaBanner()
{
    Richiesta();
}
window.setInterval("RicaricaBanner()", 10000); // 10 secondi
</script>
Visualizziamo a video il banner creando un livello di testo con uno specifico ID, utile per l'accesso via AJAX:
<div id="risultato"></div>
Per testare l'esempio, consiglio di diminuire il tempo di attesa, riducendolo da 10 secondi a 3 secondi:
window.setInterval("RicaricaBanner()", 3000); // 3 secondi

I più cliccati della sezione Ajax

:: Introduzione ad Ajax ed Asp con Jscript (22.579)

:: AJAX, una funzione più "snella" per gli oggetti XMLHttpRequest e XMLHTTP (6.785)

IN EVIDENZA
DOWNLOAD