AJax eksempel - dynamisk klokke

[saivert]

Jeg har laget en dynamisk analog klokke.

 

Nøkkelord: PHP, GD, AJAX

 

Jeg genererer klokken ved hjelp av GD funksjoner i PHP (GD er en bildebehandlingsmodul). Jeg bruker JavaScrippt for at klokkens visere skal oppdateres underveis uten å laste hele siden på nytt.

 

 

(Linker er fjernet. Om det er absolutt behov for skriptet så kontakt meg på PM)

 

Håper de av dere som har vært redd for AJAX kansje vil prøve det ut etter å ha sett dette eksemplet. Dette skriptet er selvfølgelig meget enkelt og du vil antagligvis ikke lage AJAX baserte webapplikasjoner som Googles GMail med det første, men jeg håper du kommer godt på vei.

 

Som alltid: Håper dere liker dette.

Endret 26. desember 2006 av saivert

[Mobsan]

Jeg har også laget et ganske likt script for å teste, men sliter med IE.. jeg ser at din også har problmere med IE. er det bare min IE som er føkka? eller er dette et problem? Det er også problem med Opera.

Endret 11. desember 2005 av Mobsan

[saivert]

...men sliter med IE..

5283329[/snapback]

 

Jeg har testet dette skriptet i både Firefox og IE. Javascriptet skal bruke MSXML hvis det kjøres under IE og XmlHttpRequest hvis et kjøres under Mozilla baserte nettlesere.

Men koden som oppdaterer tekstklokka fungerer ikke under IE. Rart synes jeg da jeg brukte et eksempel på en annen nettside.

 

Jeg synes Microsoft aktivt saboterer web standarder med å ikke følge opp W3C sine spesifikasjoner selv om de påstår det offisielt. MSXML er proprietært mens XmlHttpRequest objektet er transparent (i nettlesere som støtter det) og følger JavaScript 1.5 standarden.

 

Med Opera vet jeg ikke. Skal sjekke senere, men regner med Opera er mer likt Mozilla enn IE.

 

Du kan godt linke til den siden du laga selv.

 

EDIT: Jeg fiksa buggen med IE. Jeg måtte legge til &q=<tilfeldig tall> etter URL-en i GET forespørselen i AJAX koden slik at IE ikke vil lagre i cache (dette er noe jeg også gjør for klokkebildet). IE er veldig nøye på å hente opp sider fra cache i stedet for å laste ned på nytt selv i sider som hentes via MSXML. Firefox henter siden på nytt hver gang noe som er mer intelligent synes jeg da. Man vil vel ikke ha gammel data via AJAX??

Endret 11. desember 2005 av saivert

[Mobsan]

Ja, der fikk jeg det til også med IE, legger bare til en timestamp for hver gang...

 

now = new Date;

http.open('get', 'test.php?update='+now.getTime());

 

da blir den refresha i IE også. Men sliter fortsatt med Opera, samme hos deg, der går grafikk klokken riktig, men tiden i skrift under oppdateres ikke.

[saivert]

Ja, istedet for timestamp bruker jeg bare et økende nummer.

 

Hva kan være forskjellig i Opera i forhold til Firefox og IE?

Må sjekke opp noen cross-browser tips sider igjen.

Hadde ikke Opera.com/.no noen informasjonssider eller forum som jeg kan sjekke?

 

EDIT: Fjerna sitat og fiksa ordfeil.

Endret 12. desember 2005 av saivert

[PT]

Funker fint i Opera 9.0 TP1 i alle fall.

Uansett, Opera har en Knowledge database og et forum der du sikkert får hjelp

[Nervetattoo]

Opera fikk ikke støtte for XmlHTTPRequest-objektet før etter versjon 7.60 (altså neste versjon etter den), men nå tviler jeg på at det dere bruker en såpass gammel versjon.

 

IE må som kjent bruke en ActiveX-komponent, noe som er helt latterlig og like dårlig som resten av IE, men så lenge du instanitierer rett objekt har den akkurat samme metoder og bruksmåte som XmlHTTPRequest-objektet.

[saivert]

Opera fikk ikke støtte for XmlHTTPRequest-objektet før etter versjon 7.60 (altså neste versjon etter den), men nå tviler jeg på at det dere bruker en såpass gammel versjon.

5284086[/snapback]

 

Ja. Den meldingen gledet meg. Det er greit å tilpasse koden for to forskjellige nettlesere, men TRE blir altfor mye. Så glad for at Opera følger samme vei som Mozilla og bruker XmlHTTPRequest-objektet istedet for proprietære ActiveX objekter.

 

Jeg anser nå koden for PHP/AJAX klokka ferdig siden den fungerer som den skal i de tre viktigste nettleserne (hvis man bruker moderne og oppdaterte nettlesere, *kremt* IE er vel bare halvveis oppdatert).

 

Håper jeg kan kommer tilbake med et mer fyldig og nyttig AJAX eksempel senere.

 

Vil bare nevne at dere kan justere farger og slik på klokken og bruke den på deres hjemmesider også.

Følge dette formatet på adressa:

h t t p://home.no.net/nxs/clock.php?width=<bredde>&height=<høyde>&hcol=<farge for timeviser>&mcol=<farge for minuttviser>&scol=<farge for sekundviser>&handwidth=<bredde i pixler for viserne>

 

Farge er standard HTML fargekoder uten # prefikset.

Dvs. #CECECE (grå) blir bare CECECE

 

Vel bekomme.

Endret 12. desember 2005 av saivert

[Steinmann]

Må si at dette kansje ikke var den beste demonstrasjonen av AJAX.

En bedre løsning ville vel vært å bare lage en klokke i javascript?

------

Uansett, godt gjort. Bare den praktiske delen jeg lurer på

[Gjest Slettet-8fx0y6VV]

Bare et lite tips: bruk et javascript "framework" som tar seg av xmlhttprequesten, slik at du slipper å jobbe pået slikt lågt nivå. Eksempler: MochiKit (min favoritt) og Dojo

[Nervetattoo]

Bare et lite tips: bruk et javascript "framework" som tar seg av xmlhttprequesten, slik at du slipper å jobbe pået slikt lågt nivå. Eksempler: MochiKit (min favoritt) og Dojo

5286022[/snapback]

 

Helt enig.

 

Siden vi snakker om php her kan jeg foreslå CPaint. Som er laget utelukkende for ajax med php/asp. Det har fungert smertefritt for meg, og er en enkel måte å abstrahere bort backendlogikken og, så slipper man selv å tenke på å produsere korrekt xml etc.

[saivert]

Tyder på at dere er veldig eksperter innen AJAX allerede her på forumet så kansje ikke noe vits i å starte en mini-AJAX skole eller komme med eksempler.

 

Jeg er fullstendig klar over at PHP/AJAX klokka var et dårlig eksempel, men det beviste bare hvor simpelt AJAX kan være.

 

Jeg har nå laget et nytt PHP/AJAX eksempel som kansje er mer interessant. Det tar seg av innlogging.

 

http://saivertweb.no-ip.com/files/ajax.php

 

Har også fikset en del på JavaScriptet så det kan brukes mer generelt.

 

Problemet er egentlig at jeg ikke har en bestemt ide om hvordan jeg skal anvende AJAX. Jeg tenkte på å lage en hjemmeside med masse fancy grafikk rundt hovedinnholdet og så bruke AJAX for å laste inn tekst i midten, men er redd for at det vil minne mer om frames da.

 

Mange AJAX applikasjoner kunne vært omskrevet til å bruke frames der hvor dynamisk innhold blir putta inn. Jeg ser derfor på AJAX som en oppfinnelse av hjulet på nytt.

[yonderboy]

Neida, det er interessant med ajax-eksempler. Kom gjerne med mer av det.

 

Men jeg tror ikke ajax til navigasjon mellom sider er noen god ide - du ødelegger noe av funksjonaliteten i nettleseren: tilbakeknappen og bokmerker. Innloggingseksempelet ditt er ganske illustrerende: etter å ha skrevet feil passord, kan man ikke bruke tilbake-knappen for å komme tilbake til innloggingsboksen, men man må refreshe siden.

 

Det er nok ikke bare du som har problemer med å finne smarte måter å bruke ajax på. Det er et buzzword så det holder, men har kanskje litt begrenset nytteverdi. Tror det må sees på som et redskap blant mange, ikke som Svaret På Alt.

[Steinmann]

var en artikkel oppe i webcafeen her om dagen etter at jeg også lagde et upraktisk ajax eksempel.

http://www.sourcelabs.com/blogs/ajb/2005/1...t_use_ajax.html

der var den.

 

Og navigasjon slik du tenker på var ikke en av dem.

Men til posting av kommentarer osv kan det være bra.

--------

Og ikke glemme å ha komplett fallback om noen ikke skulle ha javascript aktivert

Endret 12. desember 2005 av orsus

[saivert]

Ajax er et buzzword, det stemmer det. Å det finnes mange måter å missbruke Ajax på som alt annet.

 

Ajax er egentlig gammel teknologi en ny innpakking. Javascript har kunnet utføre lignende eller tilsvarende oppgave før uten bruk av hverken XmlHttpRequest og MSXML objekter.

 

Et eksempel: Hvis du vil sende noe data kjapt til en server uten å refreshe siden kan man bygge opp en URL med en query string ved hjelp av JavaScript og så sette SRC attributten på en IFRAME med bredde og høyde = 0 pixler. Dette vil laste siden i den skjulte IFRAME'en og man kan så hente ut respons fra serveren her ved å bruke innerHTML egenskapen.

 

Innlogginseksemplet mitt var bare et eksempel som viser at man ikke behøver å laste hele siden på nytt når man skal logge inn på et nettsted. Man kan f.eks hvis nødvendig bare laste hele siden på nytt hvis passord og brukernavn er korrekt og ellers bare vise en "ugyldig brukernavn og/eller passord" under innloggingsboksen.

Må til mitt forsvar fortelle at det skriptet ikke er ferdig ennå, og at jeg har tenkt å gjøre det slik at innloggingsboksen kommer frem igjen hvis brukernavnet og/eller passordet er feil. Jeg trenger bare å pusse opp litt i PHP koden slik at jeg forhindrer kodeduplisering.

 

Jeg tenkte ikke å bruke AJAX for å erstatte frames da jeg mener dette undergraver det AJAX egentlig er ment for. Jeg kommer nok mest til å leke meg med AJAX en tid fremover til jeg finner ut hva jeg virkelig skal bruke det til.

 

Leste siden som orsus linket til og ble litt klokere.

[Mobsan]

En ting jeg fortsatt lurer litt på er:

AJAX står for? Asynchronous Javascript And XML

 

da lurer jeg på hva er har det egentlig med XML å gjøre? Er det kun

new ActiveXObject("Microsoft.XMLHTTP");

new XMLHttpRequest();

disse to som har noe med XML å gjøre?

[Nervetattoo]

En ting jeg fortsatt lurer litt på er:

AJAX står for? Asynchronous Javascript And XML

 

da lurer jeg på hva er har det egentlig med XML å gjøre? Er det kun

new ActiveXObject("Microsoft.XMLHTTP");

new XMLHttpRequest();

disse to som har noe med XML å gjøre?

5289832[/snapback]

 

Nei.

 

For at du skal kunne kalle det AJAX må det være XML du laster med http-forespørselen.

Mange tror de bruker ajax og så sender de rundt på klartekst eller javascript-objekter, i så fall er det bare asynkrone http-kall i javascript, og har ingen ting med buzzwordet AJAX å gjøre (Til tross for at det ikke er store forskjeller)

AJAX er bare et buzzword som er samlebegrep for teknologiene xml, javascript og asynkron httpreq.

[Mobsan]

Så med det mener du at faktisk er ingen av eksemplene her AJAX?

[saivert]

AJAX er bare en måte å unngå evolusjon på. Istedet for å forkaste hele det lappeteppet som dagens web er og lage en skikkelig etterkommer av HTTP/1.1 protokollen, så bruker man JavaScript og tillegg til HTTP protokollen for å komme seg en liten vei videre.

 

Web 2.0 er også et begrep du finner ofte sammen med AJAX. Det er fordi Web 2.0 er blitt mulig ved hjelp av AJAX. Web 2.0 er også et buzzword og er ikke egentlig en versjon 2 av noe som helst. Vi vil ikke få noen ny type World Wide Web før man skifter om helt på protokollene og lager en ny type nettleser som er spesielt bygget for Web basert programvare.

 

Men det er jo kommet noe godt ut av dette da.

 

Web 2.0 applikasjoner som jeg anbefaler dere å ta en titt på:

 

http://www.goffice.com

http://www.numsum.com

http://www.gmail.com

[Skaptrollet]

er det meningen at klokken plutselig viser annen tid digitalt enn analogt?

 

den viser riktig og plutselig når jeg titter innom så viser den feil går 10sek mellom de elns, så neste gang er de like