Progress

... mens vi venter

Når vi laster opp en helt ny side vil nettleseren med forskjellige mekanismer indikere en progresjon og i hvert fall i en viss utstrekning holde oss som brukere informert om hvordan vår forespørsel om en ny vevside går.

Når vi bruker AJAX får vi ingen slike indikasjoner. Vevsiden endrer seg ikke før forespørselen er fullført og nettleseren gir ingen indikasjoner på at noe er på gang. Det betyr at dersom vi gjør forespørsler som antas å ta litt tid, databaseoppslag, beregninger bruk av webservices eller hva det måtte være, så må vi selv ta ansvaret for å gi en form for "vente"-informasjon eller "ta det med ro jeg arbeider med saken"-indikasjon.

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 mitt standardbibliotek med noen spinnervarianter nedenfor. Biblioteket ser slik ut:

Standard spinner implementert i biblioteket std.js

doRequest('http://www.ia.hiof.no/~borres/cgi-bin/ajaxtest/waiter.py','','result1','std')

?

Hjemmlagd spinner: inspirert av MS-Windows load

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

?

Ingen spinner

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

?