Jeg har brugt en del af den forløbne weekend på at opfriske mit før temmelig begrænsede kendskab til JavaScript med henblik på at opdatere beregningssiderne til brug af den såkaldte Ajax-teknik.

Hidtil har beregnssiderne virket på den måde at ens broswer har sendt indholdet af input-formularen til skaktal.dk-serveren når man har trykket på “Beregn”-knappen, og så fået en ny webside retur fra serveren til at vise med resultatet af beregningen i stedet for den aktuelle side. Da resultatet således teknisk set har været en ny side, har det betydet at sidens position i browservinduet er ændret, så toppen af siden er blevet vist efter hver beregning såfremt hele siden ikke kan være i broswervinduet på en gang.

Med brug af Ajax (asynkron opdatering med JavaScript) vil browseren stadig sende indholdet af input-formularen til severen når man trykker på “Beregn”, men nu vil serversvaret ikke være en ny side, men vil være data til at opdatere den eksisterende side. Den synlige forskel for brugerne vil være at sidens position i browservinduet ikke længere ændres unødig, samt at browserens tilbage-knap ikke vil gå tilbage til sidens indhold fra før man trykkede “Beregn”, men til den side som blev vist før man gik til pågældende beregnsside.

Hvis man bruger en browser uden JavaScript, eller hvis man har slået JavaScript fra, vil alt virke som før med indlæsning af en ny side ved hver beregning.

Jeg har foreløbig lavet ændringen på siden til beregning af Elo-rating. De øvrige beregningssider vil blive opdateret med Ajax om kort tid hvis der ikke bliver rapporteret om nogen problemer eller kommer negative kommentarer i øvrigt i mellemtiden.

Jeg valgte at bruge det populære JavaScript-bibliotek jQuery til at simplificere koden og tage sig af forskellene i de forskellige browsere. Det viste at være overraskende nemt at bruge. Der tager kun 4 korte linjer JavaScript-kode at sende formular-indholdet til serveren og opdatere siden med svaret. Og på serveren er der bare én ny ekstra php-fil på 6 linjer til at tage sig af det. Den er så kort fordi den udelukkende består af kald til de samme funktioner som også bruges ved den gamle metode.

Når jeg nu har gang i JavaScript, vil det muligt også at lave andre “fancy” ting som for eksempel input-validering i browseren med pop op-vinduer eller lignende hvis man skriver forkerte ting i formularerne. Jeg har ingen aktuelle planer om det, men det kommer måske senere. Hvis nogen har gode idéer til funktionalitet, hører jeg gerne om det. Skriv for eksempel en kommentar til dette indlæg.

En ting som vil være muligt at udføre, men som jeg ikke regner med at lave, er at udføre selve beregningerne i browseren uden serverkontakt. Det vil jeg ikke implementere fordi det vil være besværligt at vedligeholde 2 sæt parallelle programmer i henholdsvis PHP til serveren og JavaScript til browseren som skal have præcis samme funktion.