Design tips

Gestaltlovene

Elementer der hører sammen skal placeres nær hinanden.

Loven om nærhed

AJAX programmering

AJAX programmering giver dig muligheder for at lave mikroopdateringer på dine sider. Kun en lille del af siden bliver opdateret, og brugeren skal ikke vente på at hele siden bliver indlæst igen. Resultatet er øget interaktivitet, hastighed og brugervenlighed.

AJAX er en forkortelse for Asynchronous JavaScript And XML (Asynkront JavaScript og XML). Asynkront betyder, at der kan opdateres fra serveren uden synkronisering. D.v.s at siden kan bruges, mens AJAX henter oplysningerne på serveren.

Med AJAX kan man sende requests til serveren, afvikle scripts (f.eks. små php programmer) på serveren og få svar retur uden at skulle opdatere hele siden.

Teknologien bag AJAX har eksisteret i flere år, men AJAX blev først rigtig populært efter Google i 2005 begyndte at programmere med AJAX.

AJAX er let at komme igang med, hvis du kan programmere i JavaScript, og kender til serverside programmering som PHP, ASP eller .NET.

Min AJAX tutorial viser basal AJAX, kodet fra bunden. Hvis du er interesseret i en AJAX tutorial, der tager udgangspunkt i et moderne JavaScript Library, så se mit blogindlæg om Jquery,

AJAX begynder tutorial. En nyhedsboks

Denne begynder tutorial går up på at lave en AJAX nyhedsboks.

Åben AJAX script til nyhedsboks (åbner i nyt vindue). Scriptet er grundigt kommenteret på dansk, let at copy-paste og bruge/eksperimentere med for begyndere.


Men lad os komme igang med at programmere.

XMLHTTPRequest. Tjek af browser

 <script type="text/javascript">

  function ajaxFunction(v){  
	var xmlHttp;
	 try{   		//Firefox, Oprera, Safari, Internet Explorer 7.0+
	    xmlHttp=new XMLHttpRequest(); 
	   }
	catch (e){
	   try{ 		 //Internet Explorer 6.0
	      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	  }
	 catch (e){
	      try{      //Internet Explorer 5.5+
		      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	     }
		catch (e){
		   alert("Your browser does not support AJAX!");
		   return false;
		}
	   }
	}

Først skal vi have oprettet vores XMLHTTPRequest, som vi skal bruge til at lave request til serveren med. Metoden afhænger af hvilke browser brugeren benytter.

Derfor forsøger vi ved hjælp af et Try and Catch Statement at oprette et XMLHttpRequest objekt. Lykkedes det er browseren en Internet Explorer 7.0+, Firefox, Opera eller Safari Lykkedes det ikke oprettes i stedet et ActiveXObject, hvilket sker når browseren er en ældre Internet Explorer (IE6 og tidligere). Denne indledende øvelse skal foretages hver gang man skal bruge AJAX.

Readystage. Håndtering af forbindelse

xmlHttp.onreadystatechange=function(){ 
   if(xmlHttp.readyState==4){
       document.getElementById("tekst").innerHTML=xmlHttp.responseText; 
    }
  }

Så oprettes en 'onreadystatechange funktion', der håndterer den oprettede forbindelse, checker status på de forespurgte data og sætter dem ind på siden.

Funktionen er bygget op omkring en 'readystate', der holder øje med serverens respons. 'readystate' returnerer en række værdier fra 0 (forespørgelsen er ikke startet) til og med 4 (forespørgelsen er fuldført). Og hver gang readystate "status" ændres, så kører onreadystatechange funktionen.

I praksis bør man også foretage et check på status af responsen. Er status ok (HTTP Status Code - 200) eller er siden f.eks. fundet (HTTP Status Code - 404).

Data sættes ind med en 'innerHTML'.

Kontrolstruktur

  if(v==1){	
	var tekster = "nyheder1.php"; 
  }
  if(v==2){
	var tekster = "nyheder2.php";
  }
  if(v==3){
	var tekster = "nyheder3.php";
  }

Så følger en simpel JavaScript kontrolstruktur, der undersøger, hvilket link der er klikket på. En variabel bruges til at sætte det tilsvarende indhold.

Selve forespørgelsen og sidens XHTML

  xmlHttp.open("GET",tekster,true); 
  xmlHttp.send(null);
  }
    </script>

Endelig følger de funktioner 'open()' og 'send()', der foretager selve forespørgelsen til serveren. 'open()' tager følgende 3 parametrer.

  • Metoden til at foretage requesten: jeg bruger GET.
  • Stien til den requestede fil: jeg har brugt en variabel til angive stinavnet til den ønskede fil.
  • Og en boolean: Jeg har brugt TRUE, der angiver at requesten skal afsendes asynkront (Siden skal kunne bruges, mens HTTPrequesten sendes).

'send()'tager parameteren 'null', når metoden er GET.

XHTML'en og De sidste detaljer

  <p> 
  <a href="#" onclick="ajaxFunction(1)" >Nogle nyheder</a>
  <a href="#" onclick="ajaxFunction(2)" >Andre nyheder</a>
  <a href="#" onclick="ajaxFunction(3)" >Flere nyheder</a>
  </p>
	
  <p>
	<div id="tekst"> 
	  <?php include("nyheder1.php") ?>
	</div>
  </p>

Nu mangler du bare den sidste XHTML og så at oprette de tre filer, som AJAX forespørger på serveren. I mit tilfælde har jeg 3 php scripts, som henter data ud af min nyhedsdatabase. Men indholdet i filerne er ligegyldigt. Det er dog vigtigt, at filerne hedder .php, da Internet Explorer ellers ikke vil vise indholdet af dem.

Hent scriptet

Åben mit AJAX begynder script til nyhedsboks (åbner i nyt vindue).

Hvis du vil lære mere er w3schools begynder tutorials et rigtig godt sted at starte. Både til at lære AJAX programmering, men også til andre former for programmering og scripting.

Name generator fun

Hvis du leder efter noget andet, der er sjovt og uforpligtigende at lege med, så tjek mit navnegenerator script ud.

Name generator script. Scriptet er grundigt kommenteret og beskrevet, og dermed let for begyndere at eksperimentere videre med.

Her er et mere uddybende blogindlæg: How to build a name generator. Artiklen beskriver fra bunden, hvordan man laver en navnegenerator.

AJAX i JavaScript Libraries

I dag (2009) bliver hovedparten af AJAX programmering lavet med hjælp fra JavaScript frameworks eller JavaScript libraries. Alle de store JavaScript Libraries fra JQuery, Prototype og Mootool til Dojo og Spry, har fuldt udviklet AJAX håndtering.

Ajax programmeringen gennem javascript frameworks'ene er let. Browsertjek, httprequest og fejlhåndtering klarer frameworks'ene automatisk. Parsing af parametrer, og håndtering af GET og POST foregår simpelt og let.

De forskellige Frameworks har forskellige syntakser, man skal sætte sig ind i. Når man kender basal AJAX er det lettere at overskue JavaScripts Frameworks'ene AJAX scripting.

Find masser af jQuery tutorials, inspiration og eksempler i mit blogindlæg om Jquery.

Hvad bruger man AJAX til idag

I dag bruger man AJAX til mange opgaver. Takket være JavaScript Librariene, der håndtere den basale AJAX og masser af plugins til de store libraries er brugen af AJAX eksploderet.

AJAX bruges til interaktion med brugeren. F.eks. håndtering af formularer, afvikling af funktioner i webapplikationer, chat bokse, navigation, udveksling af data med serveren, opslag i databaser etc.

AJAX begrænsninger

AJAX er dog ikke udelukkende fryd og gammen. Så overvej altid følgende grundigt:

AJAX og dybe links

Da fidussen ved mikroopdateringer er at brugeren bliver på den samme side, kan man heller ikke linke til det opdaterede indhold.

Et stort problem, hvis du vil give dine brugere mulighed for at linke til dine informationer.

AJAX og tilbageknappen

Når brugeren bliver på den samme side kan han heller ikke bruge tilbageknappen til at bladre med.

Det er altid skidt for brugervenligheden, når du begrænser navigationsmulighederne.

AJAX og søgemaskinerne

Søgemaskinerne ikke kan se det indhold du henter ind med AJAX. Dine brugere har altså ingen chancer for at vide, at du har informationerne.

Det er selvfølgelig heller ikke godt for din pagerank, hvis søgemaskinerne ikke kender hele indholdet af dine sider.