AJAX XMLHttpRequest-objektet


Innehållsförteckning

    Visa innehållsförteckning

Keystone i AJAX är XMLHttpRequest-objektet.

  1. Skapa ett XMLHttpRequest-objekt

  2. Definiera en återuppringningsfunktion

  3. Öppna XMLHttpRequest-objektet

  4. Skicka en förfrågan till en server

XMLHttpRequest-objektet

Alla moderna webbläsare stöder XMLHttpRequest-objektet.

Objektet XMLHttpRequest kan användas för att utbyta data med en webbserver bakom scener. Detta innebär att det är möjligt att uppdatera delar av en webbsida, utan laddar om hela sidan.


Skapa ett XMLHttpRequest-objekt

Alla moderna webbläsare (Chrome, Firefox, IE, Edge, Safari, Opera) har ett inbyggt XMLHttpRequest-objekt.

Syntax för att skapa ett XMLHttpRequest-objekt:

variable = new XMLHttpRequest();

Definiera en återuppringningsfunktion

En återuppringningsfunktion är en funktion som skickas som en parameter till en annan funktion.

I det här fallet bör återuppringningsfunktionen innehålla koden som ska köras när svaret är klart.

xhttp.onload = function() {
   // What to do when the response is ready
}

Skicka en förfrågan

För att skicka en begäran till en server kan du använda metoderna open() och send() i XMLHttpRequest-objekt:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Exempel

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
  // Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Åtkomst över domäner

Av säkerhetsskäl tillåter inte moderna webbläsare åtkomst över domäner.

Det betyder att både webbsidan och XML-filen som den försöker ladda måste finnas på samma server.

Exemplen på W3Schools alla öppna XML-filer som finns på W3Schools-domänen.

Om du vill använda exemplet ovan på en av dina egna webbsidor, XML-filerna du laddar måste finnas på din egen server.



XMLHttpRequest-objektmetoder

new XMLHttpRequest()

Skapar ett nytt XMLHttpRequest-objekt

abort()

Avbryter den aktuella begäran

getAllResponseHeaders()

Returnerar rubrikinformation

getResponseHeader()

Returnerar specifik rubrikinformation

open(method, url, async, user, psw)

Anger begäran

metoden: begäranstypen GET eller POST
url: filplatsen
async: sant (asynkront) eller falskt (synkront)
användare: valfritt användarnamn
psw: valfritt lösenord

send()

Skickar begäran till servern
Används för GET-förfrågningar

send(string)

Skickar begäran till servern.
Används för POST-förfrågningar

setRequestHeader()

Lägger till ett etikett/värdepar i rubriken som ska skickas


XMLHttpRequest Object Properties

onload

Definierar en funktion som ska anropas när begäran tas emot (laddas)

onreadystatechange

Definierar en funktion som ska anropas när egenskapen readyState ändras

readyState

Behåller statusen för XMLHttpRequest.
0: begäran inte initierad
1: serveranslutning upprättad
2: begäran mottagen
3: bearbetar begäran
4: begäran klar och svaret är klart

responseText

Returnerar svarsdata som en sträng

responseXML

Returnerar svarsdata som XML-data

status

Returnerar statusnumret för en begäran
200: "OK"
403: "Forbidden"
404: "Not Found"
För en komplett lista gå till Http Meddelanden Referens

statusText

Returnerar statustexten (t.ex. "OK" eller "hittades inte")


Onload Property

Med objektet XMLHttpRequest kan du definiera en återuppringningsfunktion som ska köras när begäran får svar.

Funktionen definieras i egenskapen onload för objektet XMLHttpRequest:

Exempel

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
 }
 xhttp.open("GET", "ajax_info.txt");
 xhttp.send();

Prova själv →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Flera återuppringningsfunktioner

Om du har mer än en AJAX-uppgift på en webbplats bör du skapa en funktion för exekvera XMLHttpRequest-objektet och en återuppringningsfunktion för varje AJAX uppgift.

Funktionsanropet ska innehålla URL:en och vilken funktion som ska anropas när svaret är klart.

Exempel

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
}

function myFunction2(xhttp) {
  // action goes here
}

Onreadystatechange-egendomen

Egenskapen readyState håller statusen för XMLHttpRequest.

Egenskapen onreadystatechange definierar en återuppringningsfunktion som ska köras när readyState ändras.

Egenskapen status och egenskaperna statusText håller statusen för XMLHttpRequest-objektet.

onreadystatechange

Definierar en funktion som ska anropas när egenskapen readyState ändras

readyState

Behåller statusen för XMLHttpRequest.
0: begäran inte initierad
1: serveranslutning upprättad
2: begäran mottagen
3: bearbetning av begäran
4: förfrågan avslutad och svaret är klart

status

200: "OK"
403: "Förbjudet"
404: "Sidan hittades inte"
För en fullständig lista gå till Http-meddelanden Referens

statusText

Returnerar statustexten (t.ex. "OK" eller "hittades inte")

Funktionen onreadystatechange anropas varje gång readyState ändras.

När readyState är 4 och status är 200 är svaret klart:

Exempel

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML =
        this.responseText;
      }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

Prova själv →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Händelsen onreadystatechange utlöses fyra gånger (1-4), en gång för varje ändring i readyState.