!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

AJAX
Progress
Børre Stenseth
AJAX >Progresjon

Progresjon

Hva
indikasjon av at vi venter på en AJAX-forespørsel

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:

start
stop

0

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')

Klikk her for å hente litt tekst

?


Hjemmlagd spinner: inspirert av MS-Windows load

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

Klikk her for å hente litt tekst

?


Ingen spinner

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

Klikk her for å hente litt tekst

?


Referanser
  1. prototype Javascript bibliotek prototypejs.org www.prototypejs.org/ 14-03-2010
  1. Free AJAX-Style Animated Wait/Busy Icons AndrewDavidson.com www.andrewdavidson.com/articles/spinning-wait-icons/ 14-09-2010
  1. Make Your Own Spinenrs ajaxload.ino www.ajaxload.info/ 14-09-2010
  1. GIF Animator J. Hepple, Inc www.jhepple.com/gif_animator.htm 14-09-2010

All koden er sitert på siden.

Vedlikehold

B.Stenseth, juli 2006

( Velkommen ) AJAX >Progresjon ( Caching )