Rotazione banner in Ajax

Autore: Luca Ruggiero | Tell a Friend eBook ASP base Impara a creare siti dinamici con ASP e VBScript da zero! Corso ASP Impara a creare siti dinamici professionali con ASP! E-Commerce con ASP Impara a creare un sito di E-Commerce con carrello della spesa!

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>

<?
    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>

var XMLHTTP;

function Richiesta()
{
    XMLHTTP = RicavaBrowser(CambioStato);
    XMLHTTP.open("GET", "banner.ext", true);
    XMLHTTP.send(null);
}

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!");
    }
}

<script type="text/javascript" src="banner.js"></script>

<script type="text/javascript">
window.onload = function()
{
    Richiesta();
}
function RicaricaBanner()
{
    Richiesta();
}
window.setInterval("RicaricaBanner()", 10000); // 10 secondi
</script>

<div id="risultato"></div>

window.setInterval("RicaricaBanner()", 3000); // 3 secondi