AJAX - XMLHttpRequest objekt

XMLHttpRequest-objektet er fundamentet for AJAX.

  1. Opret XMLHttpRequest-objektet
  2. Definer callback-funktionen
  3. Åbn XMLHttpRequest-objektet
  4. Send forespørgsel til serveren

XMLHttpRequest-objektet

Alle moderne browsere understøtter det XMLHttpRequest-objektet.

XMLHttpRequest-objektet kan bruges til at udveksle data med en webserver i baggrunden. Dette betyder, at man kan opdatere dele af en webside uden at skulle genindlæse hele siden.

Opret XMLHttpRequest-objektet

Alle moderne browsere (Chrome, Firefox, IE, Edge, Safari, Opera) har indbygget XMLHttpRequest-objektet.

Syntaksen til at oprette et XMLHttpRequest-objekt:

variable = new XMLHttpRequest();

Definer callback-funktionen

Callback-funktioner er funktioner, der passes som parameter til en anden funktion.

I dette tilfælde skal callback-funktionen indeholde kode, der skal køres, når svaret er klar.

xhttp.onload = function() {
  // Hvad der skal gøres, når svaret er klar
}

Send forespørgsel

For at sende en forespørgsel til serveren kan du bruge XMLHttpRequest-objektets open() og send() Metode:

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

Eksempel

// Opret XMLHttpRequest-objektet
const xhttp = new XMLHttpRequest();
// Definerer callback-funktionen
xhttp.onload = function() {
  // Du kan bruge data her
}
// Send forespørgsel
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Prøv det selv

Krydsdomæneadgang (Access Across Domains)

Af sikkerhedsmæssige grunde tillader moderne browsere ikke krydsdomæneadgang.

Dette betyder, at hjemmesiden og den XML-fil, den forsøger at indlæse, skal være placeret på samme server.

Eksempler på CodeW3C.com åbner XML-filer placeret i domænet CodeW3C.com.

Hvis du vil bruge et af de ovennævnte eksempler på din egen hjemmeside, skal den XML-fil, du loader, være placeret på din egen server.

Metoder for XMLHttpRequest-objektet

Metode Beskrivelse
new XMLHttpRequest() Opret et nyt XMLHttpRequest-objekt.
abort() Annuller den aktuelle forespørgsel.
getAllResponseHeaders() Returnerer hovedinformationer.
getResponseHeader() Returnerer specifikke hovedinformationer.
open(method, url, async, user, psw)

Definerer forespørgslen.

  • method：Forespørgsels-type GET eller POST
  • url：Filplacering
  • async：true (asynkron) eller false (synkron)
  • user：Valgfri brugernavn
  • psw：Valgfri adgangskode
send() Send forespørgsel til serveren, brugt til GET-forespørgsler.
send(string) Send forespørgsel til serveren, brugt til POST-forespørgsler.
setRequestHeader() Tilføj et etiket/værdi-par til de hoveder, der skal sendes.

Egenskaber for XMLHttpRequest-objektet

Egenskab Beskrivelse
onload Definerer funktionen, der kaldes, når en (indlæsnings)forespørgsel modtages.
onreadystatechange Definerer funktionen, der kaldes, når readyState-ejenskaben ændres.
readyState

Gemmer XMLHttpRequest's status

  • 0: Anmodningen er ikke initialiseret
  • 1: Serverforbindelsen er oprettet
  • 2: Anmodningen er modtaget
  • 3: Behandler anmodningen
  • 4: Anmodningen er færdigbehandlet og svaret er klar
responseText Returnerer svarets data som en streng
responseXML Returnerer svarets data som XML
status

Returnerer statuskoden for anmodningen

  • 200: "OK"
  • 403: "Forbudt"
  • 404: "Ikke fundet"

For en fuld liste besøg venligst HTTP besked reference håndbog
statusText Returnerer status teksten (f.eks. "OK" eller "Ikke fundet")

onload egenskab

Når du bruger XMLHttpRequest-objektet, kan du definere en callback-funktion, der udføres, når svaret modtages

Definer en callback-funktion i XMLHttpRequest-objektet onload Funktionen defineres i attributten:

Eksempel

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

Prøv det selv

Flere callback-funktioner

Hvis der er flere AJAX-opgaver på webstedet, skal der oprettes en funktion til at udføre XMLHttpRequest-objektet, og en callback-funktion skal oprettes for hver AJAX-opgave

Funktion kaldet skal indeholde URL samt funktionen, der skal kaldes, når svaret er klar

Eksempel

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) {
  // Her er handlingen
}
function myFunction2(xhttp) {
  // Her er handlingen
}

onreadystatechange egenskab

readyState Egenskaben gemmer XMLHttpRequest's status

onreadystatechange Egenskaben definerer en callback-funktion, der udføres, når readyState ændres

status Egenskaber og statusText Egenskaben gemmer XMLHttpRequest-objektets status

Egenskab Beskrivelse
onreadystatechange Definerer funktionen, der skal kaldes, når readyState-attributten ændres
readyState

Gemmer XMLHttpRequest's status

  • 0: Anmodningen er ikke initialiseret
  • 1: Serverforbindelsen er oprettet
  • 2: Anmodningen er modtaget
  • 3: Behandler anmodningen
  • 4: Anmodningen er færdigbehandlet og svaret er klar
status

Returnerer statuskoden for anmodningen

  • 200: "OK"
  • 403: "Forbudt"
  • 404: "Ikke fundet"

For en fuld liste besøg venligst HTTP besked reference håndbog
statusText statusText

Retur status tekst (f.eks. "OK" eller "Ikke Fundet").

onreadystatechange-funktionen kaldes hver gang readyState ændres. 4 og status er 200 Når responsen er klar:

Eksempel

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

Prøv det selv

onreadystatechange-hændelsen blev udløst fire gange (1-4), hver gang readyState ændredes en gang.