Oprettet ons. d. 23. marts 2011 kl. 11:24:55

nemlig
nemlig (5.151 point. Point ude: 0)

Vis et animationsur ved load af side - måske Ajax

Hejsa.
Jeg har et php-script, som henter nogle data fra et eksternt site, og typisk går der 20-30 sekunder inden dataene modtages og vises i browseren.
Er det muligt, fx. via noget Ajax, at starte med at vise et animationsur og en tekst "Henter data", og når dataene så er modtaget, fjernes uret og "Henter data"-teksten og de modtagne data vises.
Lidt forsimplet hentes dataene sådan her:

$data = file_get_contens('url');
echo $data;

Link til eksempel eller tutorials vil være supper.

Skrevet ons. d. 23. marts 2011 kl. 11:33:29| #1

phillips
phillips (22.104 point)
zereshade.dk
Hej nemlig

PHP-scriptet vil altid blive afviklet før siden sendes til browseren. Så som du selv er inde på, skal det køre via Ajax.

Fremgangsmåden er at lade siden blive hentet ind i browseren uden at starte PHP-scriptet. Bruger du fx jquery, kan du - når DOM'en er klar - fx vise en tekst (eller animation) på siden, og efterfølgende starte PHP-scriptet med jquery's ajax-funktion og evt indlæse resultatet i DOM'en.

Håber det giver mening :-)

Skrevet ons. d. 23. marts 2011 kl. 12:42:21| #2

Men 20-30 sekunder? Er tabellerne optimeret? Indexes på de rigtige felter osv.

Skrevet ons. d. 23. marts 2011 kl. 12:42:29| #3

nemlig
nemlig (5.151 point)
Jo - det giver lidt mening, og var nok også lidt det, jeg havde forestillet mig.
Men det vil være rart med noget konkret input, fx et eksempel eller tutorial.

Skrevet ons. d. 23. marts 2011 kl. 12:44:05| #4

nemlig
nemlig (5.151 point)
"2. Der er tale om et udtræk fra noget varmestyring (IHC-kontrollere). Det er i disse kontrollere flaskehalsene er.

Skrevet ons. d. 23. marts 2011 kl. 13:04:25| #5


Skrevet ons. d. 23. marts 2011 kl. 15:46:12| #6

aaberg_cc
aaberg_cc (39.323 point)
et simpelt eksempel med jquery:

$(document).ready(function(){

  $("#ajaxLoadBillede").show();

  $.get('langsomtDokument.php', function(result){
      $("#divResultatSkalSættesIndI").html(result);
      $("#ajaxLoadBillede").hide();
  });

});

Skrevet ons. d. 23. marts 2011 kl. 15:47:52| #7

olebole
olebole (214.613 point)
<ole>

michael_stim >> med al respekt, så er det, du linker til, et lysende pragteksempel på misforstået Ajax.

Eksemplet bruger innerHTML til at indsætte data i siden med - og det forudsætter jo, at klienten modtager en HTML formateret streng fra serveren. Men at lade serveren HTML formatere data bruger 5-10 gange så mange serverressourcer, som hvis de samme data blev formateret som XML eller JSON.

Det har aldrig været meningen med Ajax, at give serveren mere arbejde og sved på panden, end den i "gamle dage" fik under "Web 1.0" ... præcis tværtimod! Og når spørger netop har problemer med meget lang procestid på serveren, er det nok ikke ligefrem en løsning, han eller hans server vil opleve som et fremskridt  =)

nemlig >> Løsningen er at bruge Ajax - men at bruge det, som det oprindelig blev tænkt og udviklet:
Du foretager en XMLHttpRequest mod serveren. Serveren henter dine data (f.eks. i en DB) - formaterer dem som XML eller JSON - og returnerer dem til klienten. Her oprettes HTML elementer med DOM, og data fyldes i dem, hvorefter de indsættes i siden - igen med DOM. Det er Ajax - det giver mening!  *o)

Den animerede spinner kan du så enten lave som en animeret gif - eller du kan gøre som MS gør i sine sidebar gadgets. Her bruges et lille baggrundsbillede med 15-20 billeder under hinanden. Dette billede loades så som baggrundsbillede i et lille div på 16x16 pixels - og dets backgroundPosition flyttes så 16px ned ad gangen med en setInterval.

Billedet kan under Win7 typisk findes her: C:\Program Files\Windows Sidebar\Gadgets\Weather.Gadget\images - eller under en anden af MS' standard gadgets.

Hvad selve XML/JSON formateringen angår, så kommer det anpå det aktuelle scenarium - og det samme gælder indsættelsen i browserdokumentet.

Ajax adskiller sig fra lørdagskyllinger og andre færdigretter, der kritikløst kan smides i microovnen. Ajax skal der tænkes over og tages stilling til i hvert enkelt tilfælde  *o)

/mvh
</bole>

Skrevet ons. d. 23. marts 2011 kl. 15:48:31| #8

aaberg_cc
aaberg_cc (39.323 point)
Eksemplet vil vise dit billede med id="ajaxLoadBillede" når siden åbner, og den vil starte kørsel af det langsomme php script.

Når den er færdig, vil den sætte indholdet af php scriptet ind i en div med id="divResultatSkalSættesIndI", og til sidst fjerne "ajaxLoadBillede"

Skrevet ons. d. 23. marts 2011 kl. 16:08:03| #9

Har ikke kigget på det ole bole. Var bare et eksempel.

Skrevet ons. d. 23. marts 2011 kl. 16:12:20| #10

Men jeg burde selvfølgelig have skummet koden igennem først ;o)

Skrevet ons. d. 23. marts 2011 kl. 17:04:42| #11

olebole
olebole (214.613 point)
michael_stim >> Jeg forstår udmærket ... det er desværre vanskeligere at finde en troværdig og brugbar tutorial om Ajax på nettet, end det er at finde et et par badebukser på Antarktis! Langt de fleste, der skriver om Ajax, har skræmmende ringe indsigt i Ajax - og JavaScript/DOM generelt. Det smitter desværre voldsomt af på de fleste, der bruger Ajax  :o|

Anyway, hvis nogen har lyst til at prøve animationen, jeg beskrev ovenfor, er her et eksempel. Hent først billedet activity16v.png, der ligger for enden af stien: C:\Program Files\Windows Sidebar\Gadgets\Weather.Gadget\images\. Prøv så følgende (som dog ikke er MS' originale script, men noget jeg selv har skrevet og "krøllet sammen"):


<script type="text/javascript">
(function() {
  /***** Edit these properties *****/
    var h = 16, w = 16,
    im = "activity16v.png";
  /*********** Stop edit ***********/

function z(s){return s+"px"};var ws=function(eP){this.s=document.createElement("div");var oC={position:"absolute",width:z(w),height:z(h),top:"50%",left:"50%",margin:"-"+z(h)+" -"+z(w),zIndex:1000,backgroundImage:"url("+im+")",backgroundPositionY:0},x=null,c=this.s.style;for(x in oC)c[x]=oC[x];this.c=eP};var p=ws.prototype;p.show=function(){this.c.appendChild(this.s);this.a()};p.hide=function(){if(this.t){clearInterval(this.t);this.t=null}this.c.removeChild(this.s)};p.a=function(){var c=this.s.style;this.t=setInterval(function(){c.backgroundPositionY=parseInt(c.backgroundPositionY)-w},30)};window.WaitSpinner=ws;
})()

var oSpin = new WaitSpinner(document.body);
</script>

<p><button onclick="oSpin.show()">Vis spinner</button>
    <button onclick="oSpin.hide()">Gem spinner</button></p>



Argumentet, der medsendes, når en WaitSpinner instantieres, er elementet, spinneren indsættes i. Dette element skal være positioneret absolute eller relative - og spinneren vil så centrere sig horisontalt og vertikalt

Skrevet ons. d. 23. marts 2011 kl. 17:11:16| #12

olebole
olebole (214.613 point)
PS: En af fordelene ved denne form for animation er, at man kan bruge PNG24 billeder med semitransparens. Billedet og script tilsammen fylder desuden ikke mere end en animeret gif

Skrevet ons. d. 23. marts 2011 kl. 17:19:35| #13

olebole
olebole (214.613 point)
PPS: Skal en spinner bruges til flere XHR-kald i samme HTML dokument, skal den ikke instantieres hvergang. Man bruger bare de to metoder show/hide, hvor den første indsætter spinneren og starter timeren - den anden stopper timeren og fjerner spinneren fra DOM'en. Spinneren ligger dog stadig klar til indsættelse i hukommelsen

Skrevet ons. d. 23. marts 2011 kl. 17:51:40| #14

showsource
showsource (32.621 point)
hmm, der var en gang et billede som blev vist her på siden, indtil doc var loadet.
og det var vist før div. x-ver. af js ?
Noget lign kan vel bruges ?

Skrevet ons. d. 23. marts 2011 kl. 18:40:34| #15

olebole
olebole (214.613 point)
showsource >> Der er en tilsvarende animeret gif på kategorisiderne. F.eks. vises den her:
    http://www.eksperten.dk/ (...)

- når du skifter til en anden scriptkategori i select'en - men den loader også med såkaldt Ajax.

Du kan godt lave noget lignende uden Ajax. Det kræver dog, at sidens HTML ned til og med body tagget og en animeret gif er sendt til klienten (evt. efterfulgt af en flush()), før serveren begynder på den tidskrævende databehandling

Skrevet tir. d. 12. april 2011 kl. 09:16:48| #16

nemlig
nemlig (5.151 point)
Puhha Olebole - jeg bliver knagmene udfordret, da det eneste jeg forstår er, at du er ret skarp på, hvad der er god ajax-kode. Mine javascript-kundskaber svarer nok til en chimpanses viden om det periodiske system.

Men jeg har nu anskaffet mig noget litteratur om Javascript, så jeg kan blive klogere på dette område, og senere på Ajax.

Tusind tak til jer alle for jeres bidrag.

Jeg deler pointene mellem jer der sender et svar - så venligst send svar.

Skrevet tor. d. 05. maj 2011 kl. 10:54:29| #17

nemlig
nemlig (5.151 point)
Så er det svartid. Kom med et svar, og jeg deler pointene.

Skrevet fre. d. 20. maj 2011 kl. 20:27:02| #18

nemlig
nemlig (5.151 point)
Er der mon nogen, der vil svare???? :)

Skrevet man. d. 08. august 2011 kl. 20:44:01| #19


Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   

   

Seneste spørgsmål

Hjælp til validering

Oprettet den 26. maj 2012 kl. 14.01
Stefan1 giver 20 point for svar | Giv et svar »

Javascript sliders?

Oprettet den 24. maj 2012 kl. 11.29
NizeGuy giver 15 point for svar | Giv et svar »

Validere navn i form

Oprettet den 22. maj 2012 kl. 15.13
13thsky giver 60 point for svar | Giv et svar »



   




Tips & Tricks fra PC World

Teaser billede

Læserne: Her er vores værste it-indkøb

Det er ikke al it-udstyr, som er det rene guld. Her er nogle af læsernes skrækhistorier.


Anmeldelser fra PC World

Teaser billede

Test: Mobil med Ferrari-design - og en Trabant-motor

Motorola har begået endnu en smartphone med lækkert design og potentiale til at være blandt de bedste. Men den når ikke i mål. Se her hvorfor.


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Sådan siger du farvel til Facebook

Læs her, hvordan du dropper Facebook og i stedet anvender nogle brugervenlige alternativer, så du stadig kan være social på nettet.


Nyheder fra Computerworld

Teaser billede

Galleri: De fedeste håndholdte gennem 40 år

Her har du de mest banebrydende håndholdte computere gennem alle tider.


Kurser
Samarbejdspartnere

Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger