Progresjon

Vi kan løse dette på mange måter ved hjelp av Javacsript. Nedenfor er en enkel løsning som bruker animert GIF som indikator:

I dette tilfellet starter og stopper vi progress indikatoren eksplisitt ved å klikke for start og stopp. Det er enkelt å knytte disse triggerne (startspin og stopspin) til de funksjonene i en AJAX-løsning som henholdsvis sender en forespørsel og mottar resultatet.

Det involverte Javascriptet ser slik ut:

function stopspin(){
  eltShow=document.getElementById('showspin');
  eltWhat=document.getElementById('spin0FF');
  eltShow.innerHTML=eltWhat.innerHTML;
}
function startspin(){
  eltShow=document.getElementById('showspin');
  eltWhat=document.getElementById('spinON');
  eltShow.innerHTML=eltWhat.innerHTML;
}

Den delen av HTML-koden på denne siden som er invovert i denne mekanismen ser slik ut:

<!-- starting the spintest -->
<div style="cursor:pointer" onclick="startspin()">start</div>

<!-- stop the spin test -->
<div style="cursor:pointer" onclick="stopspin()">stop</div>

<!-- spin position -->
<p id="showspin">
<image src="wait28_OFF.gif" alt ="0"/>
</p>

<!-- storing spin images the first is a placeholder with same size as the spinner -->
<div id="spin0FF" style="display:none"><image src="wait28_OFF.gif" alt ="0"/></div>
<div id="spinON" style="display:none"><image src="wait28.gif" alt ="1"/></div>

Et AJAX-eksempel

Du kan prøve et AJAX-eksempel som bruker prototype [1] . Den involverte koden er slik:

// relies on jquery
function goGet(address,targetNode,spinner){
    if(spinner!=null)
        $('#'+targetNode).html('<img src="'+spinner+'" alt=" "/>');
    $.ajax({
    url:address,
    success:function(data)
    {
        $('#'+targetNode).html(data);
    },
    error:function(data)
    {
        $('#'+targetNode).html("Could not access content");
    }
    });
    }

Vanlig spinner

goGet('http://www.it.hiof.no/~borres/cgi-bin/ajaxtest/waiter.py','result1','wait28.gif')

?

Hjemmlagd spinner: inspirert av MS-Windows load

goGet('http://www.it.hiof.no/~borres/cgi-bin/ajaxtest/waiter.py','result2','spinbar.gif')

?

Ingen spinner

goGet('http://www.it.hiof.no/~borres/cgi-bin/ajaxtest/waiter.py','result3',null)

?