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.
AJAX är ett samlingsnamn för bland annat dessa tekniker:
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.
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 [1], 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.
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");
| 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. |
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!
AJAX kan underlätta och snabba på interaktionen med webbapplikationer på många sätt.
Fördelar:
Nackdelar: