Keystone i AJAX er XMLHttpRequest-objektet.
Opret et XMLHttpRequest-objekt
Definer en tilbagekaldsfunktion
Åbn XMLHttpRequest-objektet
Send en anmodning til en server
Alle moderne browsere understøtter XMLHttpRequest-objektet.
Objektet XMLHttpRequest kan bruges til at udveksle data med en webserver bag scener. Det betyder, at det er muligt at opdatere dele af en webside, uden genindlæser hele siden.
Alle moderne browsere (Chrome, Firefox, IE, Edge, Safari, Opera) har et indbygget XMLHttpRequest-objekt.
Syntaks til at oprette et XMLHttpRequest-objekt:
variable = new XMLHttpRequest();En tilbagekaldsfunktion er en funktion, der overføres som en parameter til en anden funktion.
I dette tilfælde skal tilbagekaldsfunktionen indeholde koden, der skal udføres, når svar er klar.
xhttp.onload = function() {
// What to do when the response is ready
}For at sende en anmodning til en server kan du bruge open() og send() metoderne i XMLHttpRequest objekt:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();// 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();Prøv det selv →
<!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>
Af sikkerhedsmæssige årsager tillader moderne browsere ikke adgang på tværs af domæner.
Det betyder, at både websiden og XML-filen, den forsøger at indlæse, skal være placeret på den samme server.
Eksemplerne på W3Schools alle åbne XML-filer placeret på W3Schools domæne.
Hvis du vil bruge eksemplet ovenfor på en af dine egne websider, de XML-filer du indlæser skal være placeret på din egen server.
Opretter et nyt XMLHttpRequest-objekt
Annullerer den aktuelle anmodning
Returnerer headeroplysninger
Returnerer specifikke headeroplysninger
Angiver anmodnings
metoden: anmodningstypen GET eller POST
url: filplaceringen
async: sand (asynkron) eller falsk (synkron)
bruger: valgfrit brugernavn
psw: valgfri adgangskode
Sender anmodningen til serveren
Bruges til GET-anmodninger
Sender anmodningen til serveren.
Bruges til POST-anmodninger
Tilføjer et etiket/værdipar til den overskrift, der skal sendes
Definerer en funktion, der skal kaldes, når anmodningen modtages (indlæses)
Definerer en funktion, der skal kaldes, når readyState-egenskaben ændres
Beholder status for XMLHttpRequest.
0: anmodning ikke initialiseret
1: serverforbindelse etableret
2: anmodning modtaget
3: behandling af anmodning
4: Forespørgsel afsluttet, og svar er klar
Returnerer svardataene som en streng
Returnerer svardataene som XML-data
Returnerer statusnummeret for en anmodning
200: "OK"
403: "Forbudt"
404: "Ikke fundet"
For en komplet liste gå til Http Beskeder reference
Returnerer statusteksten (f.eks. "OK" eller "Ikke fundet")
Med XMLHttpRequest objektet kan du definere en tilbagekaldsfunktion, der skal udføres, når anmodningen modtager svar.
Funktionen er defineret i onload-egenskaben for XMLHttpRequest-objektet:
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();Prøv det selv →
<!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>
Hvis du har mere end én AJAX-opgave på en hjemmeside, bør du oprette én funktion til udførelse af XMLHttpRequest-objektet og én tilbagekaldsfunktion for hver AJAX opgave.
Funktionskaldet skal indeholde URL'en og hvilken funktion der skal kaldes, når svar er klar.
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
}Egenskaben readyState har status for XMLHttpRequest.
Egenskaben onreadystatechange definerer en tilbagekaldsfunktion, der skal udføres, når readyState ændres.
Egenskaberne status og egenskaberne statusText holder status for XMLHttpRequest-objektet.
Definerer en funktion, der skal kaldes, når readyState-egenskaben ændres
Beholder status for XMLHttpRequest.
0: anmodning ikke initialiseret
1: serverforbindelse etableret
2: anmodning modtaget
3: behandling af anmodning
4: Forespørgsel afsluttet, og svar er klar
200: "OK"
403: "Forbudt"
404: "Siden blev ikke fundet"
For en komplet liste gå til Http-meddelelsesreference
Returnerer statusteksten (f.eks. "OK" eller "Ikke fundet")
Funktionen onreadystatechange kaldes hver gang readyState ændres.
Når readyState er 4 og status er 200, er svaret klar:
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();
}Prøv det selv →
<!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 udløses fire gange (1-4), én gang for hver ændring i readyState.