Logotyp för Björns studiewebb

AJAX (JavaScript)

Innehåll

På den webbsidan behandlas AJAX med JavaScript. Beskrivningen är mycket kort då det rekommenderas att man lär sig ett JavaScript-bibliotek (så som jQuery eller YUI Library) och använder det för AJAX. :-)

2020-02-09: Observera att informationen - främst kodexempel - på denna sida är något föråldrad! Uppdatering av sida är planerad.

Principen för AJAX-anrop

I detta avsnitt beskrivs den grundläggande principen för AJAX-anrop. Detaljer beskrivs i avsnitt nedan.

Skapa instans av XMLHttpRequest

Funktionen getXMLHttpRequest()

Att skapa en instans av XMLHttpRequest kompliceras av att det måste ske på olika sätt i olika webbläsare, eller t.o.m. olika versioner av webbläsare (främst då Internet Explorer). Så vi bör "prova" oss fram enligt kod nedan - lämpligen genom att skriva en funktion som returnerar instans av objekt.

function getXMLHttpRequest() {
  var xhrObject;

  try { //Forsok med "standard" satt
    xhrObject = new XMLHttpRequest();
  }
  catch(e) {  //Ej standard - forsok med IE-satt
    try {
      xhrObject = 
        new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e) { //... och forsok m annat IE-satt
      try {
        xhrObject = 
          new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch(e) {}
    }
  }
  return xhrObject;
}

Anropa funktionen getXMLHttpRequest()

Med funktion ovan klar så kan vi skapa en instans av XMLHttpRequest med kod nedan.

var ajax = getXMLHttpRequest();

Det verkar som om Microsoft äntligen fixat sin webbläsare, i.a.f. version 9, så att man kan skapa en instans av XMLHttpRequest enligt "standard", d.v.s. samma som i Firefox, Opera, m.fl..

Koppla funktion till händelsehanterare

När vi har en instans av XMLHttpRequest så är det dags att koppla händelsehanterare till objektets händelse OnReadyStateChanged. Detta kan vi göra genom att t.ex. definiera en funktion och sen tilldela den till objekt (observera att parenteser utelämnas vid tilldelning av en funktion!), eller genom att tilldela en anonym funktion (andra exemplet).

function myFunction() { ... }
ajax.onreadystatechanged = myFunction;
ajax.onreadystatechange = function() {
  if (ajax.readyState == 4 && ajax.status == 200) {
    //Kod att exekvera nar anrop lyckats
  }
}

Utföra anrop

Nu är det klart att utföra själva anropet till server, vilket innebär att öppna en förbindelse och skicka en begäran till server.

ajax.open("GET", "{en URL}");
ajax.send('');

Större exempel

Funktion getXMLHttpRequest()

Till början på sida

XMLHttpRequest

XMLHttpRequest-objekt innehåller ett antal egenskaper och metoder (några som visats ovan). I detta avsnitt beskrivs de olika metoderna och egenskaperna efter dess användningsområde - i begäran eller svaret på en begäran.

Metoder och egenskaper för begäran

Egenskaper i XMLHttpRequest
Egenskap Beskrivning
.timeout Tid i millisekunder som begäran väntar innan den avbryts
.withCredentials Sant om begäran innehåller användarnamn och lösenord, annars falsk (enbart läsbar)
.upload
Metoder i XMLHttpRequest
Metod Beskrivning
.abort() Avbryt påbörjade begäran
.open(metod, url[, async[, anvnamn, losenord]]) Öppna anslutning för begäran för HTTP-metod och URL. Tredje argumentet är sant som standard, men kan sättas till falskt om man vill ha synkron begäran (vänta på svar innan kod fortsätter exekvera).
.send(data) Skicka begäran till server, med eventuell data
.setRequestHeader(header, varde) Ange värde för header i begäran

Metoder och egenskaper för svar på begäran

Nedan beskrivs metoder och egenskaper i XMLHttpRequest som har med svar på begäran.

Egenskaper i XMLHttpRequest
Egenskap Beskrivning
.readyState Tillstånd för begäran (se nedan)
.response Innehåller hela svaret på begäran
.responseText Innehåller hela svaret på begäran som text - eventuella taggar, m.m. exkluderat
.responseType Innehåller typ på innehåll i svar (se nedan)
.responseXML Innehåller hela svaret på begäran med eventuella taggar
.status HTTP-status för begäran - används för att avgöra om begäran lyckades eller inte
.statusText HTTP-status för begäran som text (t.ex. OK för HTTP-status 200)
Metoder i XMLHttpRequest
Metod Beskrivning
.getAllResponseHeaders() Hämta alla headers i svar från server
.getResponseHeader() Hämta en viss header i svar från server
.overrideMimeType() Ange MIME-typ för svar (beskrivs inte vidare...)

I tabell nedan beskrivs de olika tillstånden för XMLHttpRequest-objekt.

Tillstånd (readyState) för XMLHttpRequest
Status Beskrivning
0 Oinitierad
1 Etablerat förbindelse med server
2 Begäran skickad
3 Begäran behandlas
4 Svar erhållet

Nedan beskrivs de vanligaste typerna av svar.

Svarstyper
Typ Beskrivning
arraybuffer ??? (Kvar att ta reda på :-))
blob Binary Large Object
document ??? (Kvar att ta reda på :-))
json JSON-objekt
text Enbart text

Till början på sida

Referenser

Nedan finns några webbsidor/-platser med mer information om ämnet på denna webbsida.