• Forside
• Idékassen
• Artikler/erfaringer
• Links
• Om softspot

• ASP 3.0
• HTML og CSS
• JavaScript
  • Klient validering
  • AJAX
• ASP.NET
• Umbraco

Baggrundsopdatering på dine sider med AJAX

Det er helt vildt HIP at understøtte AJAX på dit websted!

Anyway! Jeg har fedtet lidt med det i den seneste tid og er efterhånden kommet frem til en løsning, som ikke umiddelbart kræver andet end en god gammeldags iframe.

NB: Der er ingen grund what so ever til at benytte en iframe længere! Der er mange javascript-biblioteker på markedet idag som understøtter AJAX på en meget bedre og mere elegant måde, f.eks. jQuery, Prototype, MooTools m.fl. Tag af check et af dem i stedet - det er besværet værd! Personligt har jeg forelsket mig i jQuery, nok mest fordi Microsoft officielt bakker op om det og da jeg lever af at udvilke med Microsoft's værktøjer, er det nok et nærligende valg...

Metoden med at bruge en iframe som "serverkaldskanal", har nogle ulemper. Det er f.eks. sværere at kontrollere om der er opstået en fejl i kaldet til serveren, da det vil være noget med at aflæse dokumentet i den pågældende iframe og se om der står en fejlkode (det er muligt der er andre metoder til at kontrollere om en iframe har fejler, men i så fald kender jeg den ikke). Med et HttpRequest får man en statuskode som fortæller hvad der gik galt i kaldet.

Men uanset hvad, så er det en metode som fungerer nogenlunde og som er let at komme igang med. Desuden er en iframe (eller en almindelig frame i et frameset for den sags skyld) tilgængelig i mange browsere, så det kunne måske være et argument...

Nå, men for at komme igang med noget konkret, så kan vi starte med, på vores side, at placere et par funktioner som faciliterer kald til serveren via en iframe. Disse funktioner kan man med fordel placere i en ekstern js-fil, så det er let at inkludere på de sider, hvor det måtte være relevant. Indpakningen giver samtidig mulighed for at ændre serverkaldsmetoden senere uden de sider der bruger funktionerne, nødvendigvis behøver at vide noget om dette. Jeg har følgende setup for mine serverkald:

Som du måske har opdaget kræves det at der ligger en iframe på din side, som er navnetgivet ifmAJAXCommand, så funktionen hentData har noget at starte sit kald i. Definitionen af denne iframe kunne se således ud:

Ud over en iframe, så er der nogle funktioner som kaldes for at koble et event til og fra den iframe, nemlig addEvent og removeEvent. Disse funktioner er et par crossbrowser compatible (mere eller mindre) funktioner som kalder enten addEventListener/attachEvent og removeEventListener/detachEvent, alt efter om der er tale om en Gecko eller IE-browser. Det fungerer altså ikke med samtlige browsere, men med de mest almindelige på markedet. Funktionerne ser således ud:

function addEvent(elm, evType, fn, useCapture) {  if (elm.addEventListener) {    elm.addEventListener(evType, fn, useCapture);    return true;  }  else if (elm.attachEvent) {    var r = elm.attachEvent('on' + evType, fn);    return r;  }  else {    elm['on' + evType] = fn;  }}
function removeEvent(elm, evType, fn) {  if (elm.removeEventListener) {    elm.removeEventListener(evType, fn, false);    return true;  }  else if (elm.detachEvent) {    var r = elm.detachEvent('on' + evType, fn);    return r;  }  else {    elm['on' + evType] = null;  }}

På serveren skal der leveres en side der mindst leverer et dokument, hvor der findes et javascript-objekt som hedder data. Hvordan man i øvrigt udformer det objekt er op til den enkelte udvikler. Jeg er personligt blevet glad for JSON (JavaScript Object Notation), hvor man opretter javascript objekter på en deklarativ måde. Et simpelt eksempel på sådan en side kunne være:

For læsbarhedens skyld har jeg lavet indryk og lige formatering, men det kan man ligeså godt lade være med når det virkelig gælde, da det bare er spild af båndbredde med de ekstra mellemrum. Normalt ville man nok også generere dene stump HTML-kode med noget serverscript, så det ville ikke være noget man havde brug for at kunne læse og rette direkte i.

Med ovenstående kode liggende i en fil der hedder test.htm på min server og mit AJAX-setup liggende i en fil der hedder AJAXHelper.js, kunne jeg så hente den med mit AJAX-setup således:

Hent testdata på
serveren (uden at skifte side)

Som det ses, skal der ikke meget til for at få tingene i skred. Herfra kan man bare udbygge server-scriptet (som kan laves i hvilket som helst server scripting sprog man ønsker) og klienten med den logik der skal til for at opfylde kravene til ens webapplikation. Jeg siger ikke det er let at komme videre herfra, for det kræver naturligvis et indgående kendskab til DOM (i de forskellige afskygninger), samt nogen erfaring med javascript, men det lærer man kun, hvis man kommer igang... Hvad venter du på! :D