[HTML/JS] Image tijdens AJAX request

[WoBBeL]

Op mijn website doe ik een AJAX request naar een server die thuis staat...het duurt soms wel een seconde of 3 (pfuuu ) voordat die request klaar is, en in de tussentijd zou ik graag een throbber willen laten zien.

Hoe pak ik dit aan? Googlen naar dit onderwerp levert mij echt duizenden loading images op maar niet de manier waarop ik het moet uitvoeren!!

Ik had de volgende hersenscheet al gehad:


Dit is m'n AJAX request code:

code:

function BarcodeCheck(value)
{
    xmlhttp.open("GET", "ajax_check.php?request=barcodecheck&barcode="+value,true);//method, target, async (set always true!)
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            eval ( xmlhttp.responseText );
        }
    }
    
    xmlhttp.send(null);
}

Is het dan logisch om bij xmlhttp.readyState==1 een <div> weer te geven die ik weer laat verdwijnen als xmlhttp.readyState==4 bereikt heeft?
En hoe doe ik dit precies? Ik snap nog precies hoe de if / else statements werken in JS (in PHP werken ze iets anders )

[ Voor 6% gewijzigd door WoBBeL op 16-09-2007 19:51 ]

[Verwijderd]

Strategie 1
- Voor je de daadwerkelijk request doet, zet je de throbber aan.
- Zodra je een resultaat terughebt, zet je de throbber weer uit.

Strategie 2
- Voordat je ook maar iets doet, zet je de throbber aan.
- Nadat je het teruggegeven resultaat hebt verwerkt, zet je de throbber weer uit.

En serieus. Als je het gewoon had geprobeerd was je nu al klaar geweest.

[WoBBeL]

Verwijderd schreef op zondag 16 september 2007 @ 19:57:
Strategie 1
- Voor je de daadwerkelijk request doet, zet je de throbber aan.
- Zodra je een resultaat terughebt, zet je de throbber weer uit.

Strategie 2
- Voordat je ook maar iets doet, zet je de throbber aan.
- Nadat je het teruggegeven resultaat hebt verwerkt, zet je de throbber weer uit.

En serieus. Als je het gewoon had geprobeerd was je nu al klaar geweest.

Probleem is dus dat ik totaal geen javascript kan en ik nu beetje aan het kijken ben hoe ik eea aan moet pakken en wat de slimste strategien zijn om problemen als deze op te lossen.

[pin_point]

Mijn ajax kennis is nou niet helemaal je van het, maar zoals cheatah al aangeeft met bijv. strategie 1, en jijzelf met "xmlhttp.readyState" aangeeft, kun je het volgens mij ook op deze manieren toepassen

JavaScript:

if (xmlhttp.readyState == 1)
  {
    <div id="throbber" style=" visibility:visible"><img src="throbber.gif" /> </div>
  }elseif (xmlhttp.readyState == 4)
    {
      <div id="throbber" style="visibility:hidden"></div>
    }


// Of met een while lus

while (xmlhttp.readyState != 4)
  {
    <div id="throbber" style="visibility:visible"> <img src="throbber.gif" /> </div>
  }

Heb de code niet getest, maar dit is wat er in mij opkomt om zoiets weer te laten geven.

[Rekcor]

xost schreef op zondag 16 september 2007 @ 20:01:
[...]


Probleem is dus dat ik totaal geen javascript kan en ik nu beetje aan het kijken ben hoe ik eea aan moet pakken en wat de slimste strategien zijn om problemen als deze op te lossen.

Strategie 3:
- Leer Javascript
- Strategie 1

[WoBBeL]

Oke, bedankt voor de hulp.

Zodra ik de functie aanroep waarin de AJAX code zit ga ik ook de throbber weergeven. Als ik dan readystate 4 bereik laat ik de throbber weer verdwijnen.

[Verwijderd]

pin_point schreef op maandag 17 september 2007 @ 10:02:
Mijn ajax kennis is nou niet helemaal je van het, maar zoals cheatah al aangeeft met bijv. strategie 1, en jijzelf met "xmlhttp.readyState" aangeeft, kun je het volgens mij ook op deze manieren toepassen

JavaScript:

if (xmlhttp.readyState == 1)
  {
    <div id="throbber" style=" visibility:visible"><img src="throbber.gif" /> </div>
  }elseif (xmlhttp.readyState == 4)
    {
      <div id="throbber" style="visibility:hidden"></div>
    }


// Of met een while lus

while (xmlhttp.readyState != 4)
  {
    <div id="throbber" style="visibility:visible"> <img src="throbber.gif" /> </div>
  }

Heb de code niet getest, maar dit is wat er in mij opkomt om zoiets weer te laten geven.

helaas werkt e4x alleen in firefox

[pin_point]

Mag je mij uitleggen wat je met e4x bedoelt.

Heb zelf even lopen denken en kom tot de bedenking dat 't volgens mij alleen werkt met de while lus, maar weet dus niet of dat ook in IE gaat werken na wat mophor zegt

[_eXistenZ_]

Strategie 5:
Gebruik Mootools \o/
www.mootools.net