AJAX

Från Rilpedia

Hoppa till: navigering, sök
Wikipedia_letter_w.pngTexten från svenska WikipediaWikipedialogo_12pt.gif
rpsv.header.diskuteraikon2.gif
Denna artikel handlar om akronymen AJAX. Se även andra betydelser av Ajax.

AJAX är en akronym för Asynchronous JavaScript and XML (Asynkron JavaScript och XML) som är ett samlingsnamn för ett antal 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.

AJAX är en blandning av:

  • 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 datan som transporteras mellan klient och server. Vanlig text kan också användas som format.

Dessa tekniker används i AJAX för att interaktivt och tydligare visa när något har ändrats i en webbsida.

Just XMLHttpRequest-objektet spelar en stor roll för AJAXs 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.

Innehåll

Historia

Det hela började med ett konsultuppdrag som var att undersöka varför det tog sådan tid för personalen att hantera försäkringar på ett stort försäkringsbolag i USA. Företaget använde sig av en webbaserad tillämpning för att underlätta för sin personal. Det fungerade på det viset att man fyllde i ett formulär och när man sedan tryckte på submit-knappen så skickades formuläret iväg och om något värde var fel så fick man tillbaka formuläret och uppmaning att ändra just det värde som var felaktigt. Enligt konsulten var det detta som var problemet, och det gick helt enkelt inte att vara effektiv med en sådan tillämpning. Denna konsult var Jesse James Garret, som inte är någon utvecklare, men har jobbat mycket med design och gränssnitt och skrivit många böcker om detta. När rapporten skrevs visste han inte vilken stor genomslagskraft den skulle få.

Tekniken

Den teknik som gör detta möjligt är inte på något sätt något nytt, utan har funnits en längre tid. Det fanns redan 1998 i Internet Explorer, då via en så kallad ActiveX-kontroll. Tekniken som ligger bakom är XMLHttpRequest-objektet. 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. I den nyare webbläsarna är det inte alls svårt att skapa ett sådan 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 [1]
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, att tillägga är att 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 {
		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 browser stödjer inte AJAX."); // Felmeddelande.                                               
      return false // Retunera 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>

Användning

AJAX kan användas till väldigt mycket, här är några saker som kan tillämpas med AJAX.

  • Validering av formulär i realtid: Vilket innebär att man inte behöver fylla i ett formulär helt för att sedan trycka på submit, en kontroll kan automatiskt utföras under tiden som man fyller i formulären.
  • Automatisk textkomplettering
  • Sofistikerade användargränssnittskontroller och -effekter: 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å kanske hon får 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.
  • En liten procent av användare på webben har inte JavaScript.

[2] [3]

Källor

  1. Artikel Enklare med Ajax i Dator Magazin nr 3 2006
  2. http://www.websitedesignerslist.com/articles/The+Pros+and+Cons+of+AJAX+(Asynchronous+JavaScript+and+XML)/
  3. http://www.emergingearth.com/ajax-pros-and-cons/

Se även

Personliga verktyg