Med Web 2.0 og de deraf følgende Javascript biblioteker af stigende størrelse er der specielt én mangel i Javascript der så småt begynder at blive kritisk: mangelen på en “include” eller “import” erklæring, eller med andre ord at man ikke umiddelbart i én script fil kan angive at en anden skal indlæses. Min forrige artikel, “Leg med AJAX”, illustrerer det kun alt for tydeligt. Der skal inkluderes ikke mindre end 8 forskellige biblioteker for at få stillet funktionaliteten i det sidste til rådighed. Den stakkels udvikler der skal bruge Google biblioteket skal selv holde styr på at få de andre 7 inkluderet i den rette rækkefølge. Ekstrapoleres eksemplet til en hel Web 2.0 applikation kan det være over 100 script filer der på den måde skal holdes styr på. Noget må gøres!

Løsningen er nærliggende. AJAX giver netop mulighed for ikke blot at hente XML, men også Javascript og alt muligt andet. Så de samme teknologier som anvendes til at gøre en Web 2.0 side levende kan anvendes til at forenkle den. Løsningen findes i flere forskellige varianter. De fleste inkluderer på en eller anden måde eval() funktionen, hvilket jeg har meget svært ved at finde elegant – den har aldrig samme effekt som at loade filen på den “sædvanlige” måde, med et script tag. Den løsning jeg foreslår her er lidt anderledes, omend uhyre enkel: den efterspurgte Javascript kode hentes som tekst og indsættes i kroppen af et script tag, der derefter indsættes på siden. Browserens umiddelbare reaktion er at fortolke hele indholdet af script tag’et.

Nedenstående to knapper illustrerer teknikken. Klik på den første og du får en fejl (eller ingenting, hvis din browser ikke er sat op til at vise Javascript fejl). Klik på den anden medfører indlæsning af et script, hvorefter klik på første knap igen har et mere positivt resultat.

Script objektet der stiller løsningen til rådighed findes i filen Script.js. Det er ganske få linier der er tale om, så overhead’et er lille. Script objektet stiller udover funktionen require() også en funktion addAlias() til rådighed. Tanken er at en script fil der gør brug af Script.require() ikke nødvendigvis skal rettes blot fordi der flyttes rundt på de andre script-filer. Ved at referere til symbolske navne i stedet for absolutte stier er dette enkelt at håndtere. I praksis tænkes biblioteket anvendt på følgende måde på en given side:

<!-- Først loader vi Script biblioteket -->
<script type="text/javascript" src="Script.js"></script>

<!-- Derefter sætter vi alle nødvendige alias'er op (bør placeres i en ekstern script fil) -->
<script type="text/javascript">
  Script.addAlias("Prototype 1.4", "/javascript/lib/prototype.js");
  Script.addAlias("Prototype 1.5", "/javascript/lib/prototype-1.5.0_pre0.js");
  Script.addAlias("String extensions", "/javascript/ext/StringX.js");
  // ...
</script>

<!-- Så er vi klar! Nu kan vi inkludere script filer der indeholder noget svarende til: -->
<script type="text/javascript">
  Script.require("String extensions");
  
  alert("foobar".right(3)); // right funktionen defineres i String extensions
</script>

Der hører et par bemærkninger til løsningen her til sidst. Eftersom XmlHttpRequest anvendes til at hente de ønskede scripts ligger løsningen under for cross domain problematikken – det er kun muligt at bede om scripts fra samme server som siden kommer fra. Funktionen `require()` har en ekstra parameter “async” man kan sætte til “true” for at omgå dette problem. Resultatet er at der blot indsættes et script tag med en src attribut. Det har samme virkning, men som async parameteren angiver hentes scriptet asynkront, dvs. mens det eksekverende script kører videre. Alt hvad der loades på denne måde vil således først være tilgængeligt når den aktuelle script blok forlades (alle de browsere jeg har testet venter med at starte eksekveringen af næste script blok til de ønskede data er hentet). I nogle tilfælde er det brugbart.

Opdatering: Eksemplet nedenfor har stadig en vis relevans kode-mæssigt, men da Google har droppet deres SOAP API fungerer det ikke længere.

Dagens menu står på kald af SOAP-baserede web services via AJAX. Og hvis ikke du for nylig har forsynet dig med en kop kaffe, så var det måske en god idé at gøre det før du læser meget videre. For det er en hel del komponenter jeg hermed bringer i spil på samme tid. For de utålmodige starter jeg med resultatet — indlejrede Google søgninger:

Bemærk at Google kun tillader 1000 forespørgsler pr. dag pr. nøgle, så hvis der ikke kommer noget svar kan det være derfor.

Det var sjovt, vis mig koden!

Ovenstående er frembragt af følgende:

Okay, men hvor er koden?

Den ligger selvfølgelig i striben af inkluderede javascript filer. Lad os tage dem fra en ende af.

1. prototype-1.5.0_pre0.js – Sam Stephensons Prototype bibliotek er vel efterhånden noget af det nærmeste man kommer til en standard for AJAX kommunikation, og i øvrigt et rigtigt pænt generelt Javascript bibliotek. Jeg bruger en pre-release af version 1.5.0 her, frisk fra Subversion repositoriet. Jeg har selv fundet stor hjælp i denne dokumentation til Prototype, som dog kun dækker funktionalitet i 1.4. Der er dog kun et enkelt sted jeg bruger en funktion fra 1.5, og det tilmed en meget lille en, så tingene ville ret let kunne omskrives til at køre på 1.4.0 (det er testet).
2. DocumentX.js – definerer xml og loadXML() på Document klassen, ifald den findes. Dermed kan xml strenge ind- og udlæses i Mozilla på samme måde som i Internet Explorer.
3. StringX.js – definerer (bl.a.) en metode fix_broken_utf8() på String klassen, der bruges til at rette op på en encoding fejl i Firefox.
4. xmlhttp.js – AJAX Extended er et smart lille bibliotek af Alex Serebryakov, der skifter brugen af XMLHttpRequest ud med dynamiske script tags, hvormed bl.a. cross-domain problemer undgås. Kræver dog en server-side proxy. Jeg bruger version 0.9 her, men har forbedret lidt på den, så tag min udgave. Alle ændringer er tydeligt markeret.
5. prototype-xmlhttp.js – justerer Prototype til at anvende AJAX Extended i stedet for XMLHttpRequest på kun tre linier!
6. ws.js – IBM’s James Snell har skrevet WS-AJAX der er “a cross-platform, JavaScript-based SOAP Web services client based on the Asynchronous JavaScript and XML (Ajax) design pattern for Web applications”. WS-AJAX tager sig af SOAP og message parsing og benytter Prototype (og dermed i mit tilfælde AJAX Extended) til at kommunikere med serveren. Versionen der er tilgængelig på IBM’s side lider af den brist at den kun kan snakke med en web service der ligger på den server scriptet anvendes fra. Et problem jeg har løst ved at anvende AJAX Extended. Desuden bruger jeg en nyere version af Prototype end den James Snell bruger, og der er af den årsag indført nogle rettelser i min udgave af ws.js. Min udgave er baseret på version 0.1.
7. ws-x.js – retter et problem i XML.getElementsByQName(), og tilføjer en enkelt ofte anvendt metode get_first_child() til WS-AJAX.
8. Google.js – en Google API klient, og klassen der binder det hele sammen.

Hvordan hænger det sammen?

Når der klikkes på søge-knappen ovenfor kaldes Google.search() metoden i Google.js, her set i uddrag:

Metoden opretter et WS-AJAX Call objekt, udfylder det, og beder om at få udført en SOAP RPC forespørgsel til Google. WS-AJAX bygger en SOAP kuvert med parametrene i og beder derefter Prototype om at levere et objekt der kan transportere kuverten til modtageren. Normalt ville Prototype levere et XMLHttpRequest objekt (det vil den hvis prototype-xmlhttp.js filen fjernes), men her leveres i stedet XMLHTTP objektet fra AJAX Extended. WS-AJAX beder om at få sendt kuverten, så AJAX Extended sender den videre til server-side proxy scriptet (via en eller flere ganske komplicerede javascript uri’er), som kommunikerer med Google og sender svaret tilbage. WS-AJAX parser svaret (et XML dokument) til et SOAP objekt, som gives som parameter til funktionen der erklæres nederst i ovenstående uddrag. Funktionen tager sig derefter af at placere data de ønskede steder på siden.

Pyyh… Det var en lang omgang. Men eftersom det eneste der skal ændres for at snakke med en anden web service er det der ligger i Google.js (ca. 60 linier kode), er det faktisk ikke så kompliceret.

Jeg vil se mere!

Det tænkte jeg nok. Der er en detalje ved html koden ovenfor som ikke er behagelig — den indeholder “funktionalitet” i form af inline script kode. Den slags hører ikke hjemme i html. Heldigvis er det til at råde bod på. Ind træder Behaviour af Ben Nolan. “Behaviors” har længe været kendt i Internet Explorer: I CSS stylesheetet kan man via en særlig behavior: erklæring tilknytte funktionalitet i form af script kode til elementer, på samme måde som der tilknyttes layout. Både Netscape og Microsoft har forsøgt at “sælge” denne idé til W3C, først hver for sig — hhv. Action Sheets og HTML Components, begge i 1998 — og siden sammen i 1999 under titlen “ Behavioral Extensions to CSS“. Men det er aldrig blevet til mere end et Working Draft.

I mangel af en egentlig standard er det heldigvis muligt at implementere konceptet i Javascript, som Ben Nolan har gjort. Med Behaviour kan vi skrive Google eksemplet om som følger:

<input type="text" id="search_string" />
<input type="button" value="Søg" id="search_button" />
<img src="/graphics/spinner-small.gif" alt="spinner"  id="searchingGoogle" style="display: none"/>

<p id="result_section" style="display: none">10 første resultater (af <span id="estimated_count">?</span>):<br /><ul id="results"></ul></p>

Funktionaliteten erklæres i en Javascript fil (her placeret i Google.js for at holde det enkelt):

Google.behaviours = {
  '#search_string' : function(element) {
    Behaviour.addEventObserver(element, 'keydown',
      function(e) {
        if (!e) var e = window.event;
        if (e.keyCode == Event.KEY_RETURN) {
          $('search_button').click();
        }
      }, false
    );
  },
  
  '#search_button' : function(element) {
    Behaviour.addEventObserver(element, 'click',
      function() {
        Google.search($F('search_string'));
      }, false
    );
  }
};

Behaviour.register(Google.behaviours);

Bemærk at Bens version af Behaviour, omend en rigtigt god start, lider af en række fejl og mangler. Mange af disse har venlige personer rådet bod på, men rettelserne er desværre ikke blevet tilføjet den officielle udgave. Du bør derfor anvende min version af behaviour.js indtil Ben får frigivet noget der er bedre. Den kræver i øjeblikket Prototype 1.5, men ville forholdsvis let kunne rettes til at køre uden.

Ovenstående eksempel er ret simpelt, men man kan også anvende mere komplicerede CSS selector udtryk indeholdende både element-navne, klasser, ét id samt alle CSS2 og CSS3 attribut selectors. F.eks. “#mydiv table tr.even a[href*=w3.org]“.

God fornøjelse!

Først resultatet af mine anstrengelser. Prøv at kopiere den underlige tekst ovenfor ind i feltet til venstre her nedenfor, og forlad så feltet (f.eks. ved at trykke på tabulator-tasten eller klikke på feltet til højre). Dit operativsystem og din browser, samt de installerede skrifttyper, skal understøtte Unicode for at det lykkes.

Virkede det? Smart ikke?

Konverteringen foretages i javascript, og koden ser således ud:

function tis2unicode(tis) {
  var unicode = "";
  for (i = 0; i < tis.length; i++) {
    var val = tis.charCodeAt(i);
    if (val < 0x80) {
      unicode += tis.charAt(i);
    } else if ((0xA1 <= val && val <= 0xDA) || (0xDF <= val && val <= 0xFB)) {
      unicode += String.fromCharCode(0x0E00 + val - 0xA0);
    }
  }
  return unicode;
}

Du kan downloade koden her. Den er baseret på et perl script fra ZzzTh@i projektet. Et glimrende eksempel på forekomst af forkert fortolket TIS-620 tekst kan findes på siden om TIS-620 formatet. De fleste browsere i denne del af verden vil fortolke siden i ISO-8859-1 (fordi der ikke er specificeret en encoding på siden). I nogle browsere kan man manuelt vælge TIS-620 under “Encoding”, hvorefter siden fortolkes korrekt.

Men hvorfor skal det være så besværligt? Her præsenteres et almindeligt input felt beregnet til dato-indtastning. Bag feltet ligger lidt logik der sørger for at en stribe forskellige formater håndteres helt automatisk. Idéen er ikke min egen, men stammer fra Simon Willisons artikel A better way of entering dates. Her tilrettet til brug i danske applikationer og udvidet lidt. Prøv selv!

Indtast en dato (valgfrit format):

Bemærk, af praktiske årsager fortolkes indtastningen først når feltet forlades. Her er et par eksempler på gyldige indtastninger:

• i dag/i morgen/i går, evt. sammentrukket og/eller forkortet
• 6
• 6. jan
• 6. jan 2005
• jan 6
• næste fredag
• sidste onsdag
• 06/01/2005
• 06/01/05
• 06/01
• 6/1
• 2005-01-06
• 05-01-06
• 01-06
• 1-6
• pil op/pil ned retter til næste/foregående dag

Skulle flere formater ønskes kan de let tilføjes. Ovenstående eksempel er genereret med følgende kode:

<script type="text/javascript" src="/javascript/ArrayX.js"></script>
<script type="text/javascript" src="/javascript/StringX.js"></script>
<script type="text/javascript" src="/javascript/DateBox.js"></script>

Indtast en dato (valgfrit format):
<input type="text" id="datebox" value="" />

<script type="text/javascript">
  DateBox.register(document.getElementById('datebox'));
</script>

Der er desuden krydret med følgende CSS:

.DateBoxControlErrorMsg
{
  color: Red;
}

.DateBoxControlMsg:before, .DateBoxControlErrorMsg:before
{
  content: " (";
}

.DateBoxControlMsg:after, .DateBoxControlErrorMsg:after
{
  content: ")";
}

De to sidste regler har ingen effekt i Internet Explorer op til version 6.

Download: ArrayX.js, StringX.js, DateBox.js.