AJAX og Spry

Hvad er AJAX?

I denne sammenhæng er AJAX er hverken et opvaskemiddel eller et fodboldhold. AJAX er faktisk heller ikke et nyt programmeringssprog men en metode til at lave mere interaktive websider. AJAX står for Asynchronous JavaScript and XML.

Hvis du med traditionenel JavaScript skal spørge efter en fil eller sende information til en server, vil du typisk klikke ’submit’ knappen i en formular, og serveren skal reagere før den sender dig en ny side, som skal loades i din browser. Dette kan foregå langsomt, men med AJAX kommunikerer din JavaScript direkte med serveren i baggrunden, mens brugeren bliver på den samme side hele tiden og ikke opdager denne dataudveksling. Derfor kaldes kommunikationen asynkron, da den foregår samtidig med brugerens interaktion.

>>Side med data, hvor du bladrer men bliver på samme side.

Dynamisk søgning

Prøv Google Suggest, som automatisk kommer med forslag samtidig med, at du skriver dine søgeord. Det samme er tilfældet for søgeformularen på YouTube. Det, der sker er, at samtidig med du skriver, sender et JavaScript dine søgeord videre via det såkaldte XMLHttpRequest objekt til en server, som så returnerer nogle forslag.

>>Prøv en intelligent søgeformular.

AJAX giver mulighed for at opdatere begrænsede mængder af data på en webside uden at hele siden skal opdateres. Det kan have store fordele i visse sammenhænge.

Forstil dig at du skal vælge land, region og by i en webapplikation. Med AJAX kan du vælge land, som sender svaret til serveren, som sender nye muligheder tilbage, og der bygges en formular med tilpasset indhold. Alt dette uden at siden opdateres.

>>Drop-down formular, som automatisk opdateres efter valg

Hvilke teknologier?

AJAX er en blanding af eksisterende teknologier. XHTML og CSS bruges til at præsentere siden. XML og XSLT til at udveksle og manipulere data. XMLHttpRequest objektet til asynkron kommunikation med serveren. JavaScript til at koble disses teknologier sammen. Der kan også anvendes andre teknologier, f.eks. VBScript som erstatning for JavaScript. Ligeledes er XML heller ikke et krav for dataudveksling.

Hvordan kommer du igang med AJAX?

Hvis du har forstand på ovenstående teknologier, kan du udvikle AJAX applikationer i et AJAX Direct Framework, hvor du skal kode det hele selv. Du kan også lave det i et framework med færdiglavede AJAX komponenter, som er genereret med XML og JavaScript. F.eks. Adobes Spry, som også beskrives på denne side. Fordelen her er, at du ikke behøver så meget programmeringserfaring. Til gengæld er der mindre kontrol for den erfarne.

 

Hvad er Spry?

Spry er et open source AJAX framework, udviklet af Adobe. Spry er målrettet webdesignere, som ikke ved så meget om hvordan man koder, men gerne vil have stillet nogle dynamiske komponenter til rådighed.

Spry framework består af:

• Spry Effekter, f.eks. fade, grow, shake osv. Kort sagt overgange mellem dine webelementer, som du kun troede var muligt med Flash. Nu lavet med en lille bid JavaScript. Prøv at klikke på disse elementer for at se nogle effekter:
  
       
  
        
  
  
• Spry Widgets, som er nye måder at organisere og strukturere megen data på sine websider. Der er eksempler på under Webdesign:
  
  >>Spry Accordion
  >>Spry Tabbed Panels
  
  Desuden er menuen en Spry Menu Bar. I Dreamweaver CS4 kan man lave Spry Tooltip. Prøv at bevæge musen henover her, for at se Spry Tooltip.
  
  
• Spry Data, som konverterer XML dokumenter til JavaScript i HTML-dokumenter. Du kan f.eks. lave dynamiske tabeller, som du kan sortere i, highlighte osv. Et eksempel er nedenstående, hvor jeg har lavet et XML-dokument til et Spry Data Set og viser dataen på to forskellige måder. Her kan du så sortere kolonner, klikke mellem personer og se oplysninger, alt sammen uden at siden opdateres.
  
  

  ARTISTID	FIRSTNAME	LASTNAME
  {ARTISTID}	{FIRSTNAME}	{LASTNAME}

  
  
  {ARTISTID}

  {FIRSTNAME}

  {LASTNAME}

  {ADDRESS}

  {CITY}

  {POSTALCODE}

  {PHONE}

  
  

Spry er integreret i Dreamweaver CS3 og CS4. Spry frameworket bliver jævnligt opdateret med ny funktionalitet. Du kan hente opdateringerne på Spry's hjemmeside.