AJAX

Denna artikel handlar om akronymen AJAX. Se även andra betydelser av Ajax.

AJAX (en. Asynchronous JavaScript and XML) är ett samlingsnamn för flera olika tekniker som kan användas för att bygga applikationer för World Wide Web med bättre interaktivitet än tidigare webbapplikationer. Kända tjänster som använder dessa lösningar är Gmail, Google Maps och Facebook.

Översikt

AJAX är ett samlingsnamn för bland annat dessa tekniker:

• XMLHttpRequest-objektet, som tillåter JavaScript på en webbsida att göra anrop till webbservern utan att sidan laddas om.
• DOM (Document Object Model) vilket tillåter JavaScript att skriva om innehåll på den aktuella sidan.
• XHTML (eller HTML) och CSS vilket beskriver utseende för, och märker, innehållet på sidan.
• XML, som ibland används för att formatera data som transporteras mellan klient och server. Vanlig text kan också användas som format.

Dessa tekniker används för att förenkla och snabba på interaktionen mellan användare, webbsida och bakomliggande system.

Just XMLHttpRequest-objektet spelar en stor roll för AJAX:s succé. Detta finns och fungerar i stort sett likadant i de stora populära webbläsarna (Mozilla/Firefox, Safari, Opera och Internet Explorer). För de äldre webbläsarna kan istället en inbäddad ram (Iframe) användas.

Historia

Termen Ajax myntades 2005 av Jesse James Garrett, designstrateg och produktutvecklare hos Adaptive Path i USA. I essän Ajax: A New Approach to Web Applications , noterade han att det faktum att en webbsida varit tvungen att kommunicera med servern vid varje liten interaktion från användarens sida, gjort användningen ofta plågsamt långsam och obekväm. Han konstaterade att många då relativt nya sajter eller tjänster, som Flickr, Google Maps och Google Mail använde ett antal elegantare och snabbare tekniker med ett mellanlager - en "Ajax-maskin" som laddas som en del av webbsidan.

Garrett poängterade att de tekniker som gjorde detta möjligt hade funnits en längre tid, och att det nu handlade om att använda dem samlat och med ett bestämt syfte.

XMLHttpRequest-objektet fanns t.ex. redan 1999 i Internet Explorer, via en så kallad ActiveX-kontroll. W3C har föreslagit en standard motsvarande XMLHttpRequest som heter DOM level 3, eller Document Object Model Level 3, och har funnits som utkast sedan 2004.

Garretts essä möttes av en kraftig respons, och AJAX-tekniker fick snabbt stor utbredning.

Implementation i kod

I de nyare webbläsarna är det inte alls svårt att skapa ett sådant här objekt i JavaScript. Den kod som krävs för detta är:

var req = new XMLHttpRequest();

Om man istället ska använda äldre webbläsare av Internet Explorer så måste man skriva en något mer komplicerad kod:

var req = new ActiveXObject("Microsoft.XMLHTTP");

API för XMLHttpRequest i korthet

Tillståndsvariabler (Properties)
onreadystatechange	Återanrop som uppdaterar om tillståndsförändringar.
readyState	Indikator av tillstånd för serversvar.
responseText	Svaret från servern i textform.
responseXML	Svaret från servern i form av XML (DOM-träd).
status	Statuskoder från webbserver enligt protokollet för HTTP.
statusText	Beskrivning av serversvar (ex. "Ej hittad").
Metoder
abort()	Återställer anropet och återställer readyState.
getAllResponseHeaders()	Hämtar en sträng av samtliga huvudfält åtskilda av radmatningar (\n).
getResponseHeader(<huvudfält>)	Returnerar värdet för ett enskilt fält.
open(<frågemetod>, <url>[, <asynkron flagga>[, <användarnamn>, <lösenord>] ] )	Initierar anropet.
send(<innehåll>)	Utför själva anropet.
setRequestHeader(<huvudfält>,<huvudvärde>)	Sätter ett huvudfält inför anropet med angivet värde.

Exempelkod

Här följer en bit exempelkod på AJAX i arbete. Det finns andra sätt att använda det på men detta är ett exempel för att visa hur det kan se ut.

//JAVASCRIPT
function callback(serverData, serverStatus, id) { // Anropas när vi fått datat från servern
	if(serverStatus == 200){
   		document.getElementById(id).innerHTML = serverData;   //Skriv ut datat i vårt HTML element
	} else {
		// Laddar
		document.getElementById(id).innerHTML = 'Laddar...'; 
	}
}

function ajaxRequest(openThis, id) {
	
   var AJAX = null; // Skapa AJAX variablen.
   if (window.XMLHttpRequest) { // Kolla om denna webbläsaren har ett XMLHttpRequest objekt?
      AJAX=new XMLHttpRequest(); // Om ja! -- Ladda det.
   } else { // Nej!, Försök skapa det på Microsofts sätt.
      AJAX=new ActiveXObject("Microsoft.XMLHTTP"); // Okej, då gör vi det med ActiveX
   } // Klart.
   if (AJAX == null) { // Om vi inte kunde skapa vårt AJAX objekt...
      alert("Din webbläsare stödjer inte AJAX."); // Felmeddelande.                                               
      return false; // Returnera false, vi misslyckades.
   }
   AJAX.onreadystatechange = function() { // När webbläsaren har den efterfrågade informationen.
      if (AJAX.readyState == 4 || AJAX.readyState == "complete") { // Kolla om det är helt klart.
         callback(AJAX.responseText, AJAX.status, id); // Skicka vidare informationen för bearbetning.
      }  else { document.getElementById(id).innerHTML = 'Laddar...<br />'; 
         } 
   }
   var url= openThis; // Detta är adressen vi vill öppna.
   AJAX.open("GET", url, true); // Öppna adressen.
   AJAX.send(null); // Skicka en förfrågan.
}

ajaxRequest('exempel.php?id=1', 'minDivTag'); //Kör

//HTML KOD
<div id="minDivTag">Här kommer AJAX att lägga in data</div>

// KLART!

Användning

AJAX kan underlätta och snabba på interaktionen med webbapplikationer på många sätt.

• Validering av formulär i realtid: En kontroll kan automatiskt utföras under tiden som man fyller i formulären. Man behöver inte fylla i ett formulär helt och trycka på submit (och vänta på svar från serven) för att se om något fält i formuläret fyllts i fel.
• Automatisk textkomplettering
• Sofistikerade kontroller och effekter i användargränssnittet: träd, menyer, tabeller, kalendrar etcetera
• Partiell submit: En HTML-sida kan göra en submit på den formulärdata som behövs istället för att ladda om hela sidor.
• Sidor som liknar vanliga skrivbordsapplikationer

För- och nackdelar

Fördelar:

• Sidor går fortare att ladda då klienten kör HTML lokalt och endast hämtar den data som behövs från servern. Hela sidan behöver inte laddas om så fort något ska ändras, vilket resulterar i att den upplevs som snabbare och nyttjar mindre bandbredd.
• Känns mer som en applikation.
• Separerar data från layout.

Nackdelar:

• Användandet av AJAX leder till problem för webbläsaren. När klienten laddar dynamiska sidor så registreras inte dessa i webbläsarens historik, så när användaren trycker på bakåtknappen så kan det leda till oönskat resultat.
• Användaren kan få problem med att lägga till ett bokmärke av ett visst tillstånd på sidan. Detta beror på att webbsidans URL aldrig förändras, utan data skickas och tas emot i bakgrunden.
• Sökmotorer kan ha problem med att läsa AJAX.
• Ett fåtal procent av användare på webben har inte JavaScript.

Se även

• ASP.Net Atlas
• AJAX for n00bs (Lär dig AJAX, nybörjare)
• Ajax Tutorial Get, post, text, XML.
• A New Approach to Web Applications
• Jesse James Garrett hos adaptive path
• Jesse James Garretts personliga webbplats