XMLHttpRequest-objektet bruges til at anmode om data fra en server.
For at sende en anmodning til en server bruger vi metoderne open() og send() for XMLHttpRequest-objektet:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();Angiver typen af anmodning
metode: typen af anmodning: GET eller POST
url: serverens (fil) placering
asynkron: sand (asynkron) eller falsk (synkron)
Sender anmodningen til serveren (bruges til GET)
Sender anmodningen til serveren (bruges til POST)
URL-parameteren for open()-metoden er en adresse til en fil på en server:
xhttp.open("GET", "ajax_test.asp", true);Filen kan være en hvilken som helst fil, såsom .txt og .xml eller serverscriptfiler som .asp og .php (som kan udføre handlinger på serveren, før du sender svaret tilbage).
Serveranmodninger skal sendes asynkront.
Asynkronparameteren for open() metode skal sættes til sand:
xhttp.open("GET", "ajax_test.asp", true);Ved at sende asynkront JavaScript behøver ikke at vente på serversvaret, men kan i stedet:
udføre andre scripts, mens du venter på serversvar
håndtere svaret, når svaret er klar
Standardværdien for async-parameteren er async=true.
Du kan roligt fjerne den tredje parameter fra din kode.
Synchronous XMLHttpRequest (async=false) anbefales ikke, fordi JavaScript vil stop med at udføre, indtil serversvaret er klar. Hvis serveren er optaget eller langsom, applikationen hænger eller stopper.
GET anmodning eller POST anmodning?GET er enklere og hurtigere end POST og kan bruges i de fleste tilfælde.
Brug dog altid POST-anmodninger, når:
En cachet fil er ikke en mulighed (opdater en fil eller database på serveren).
Sender en stor mængde data til serveren (POST har ingen størrelsesbegrænsninger).
Sender brugerinput (som kan indeholde ukendte tegn), POST er mere robust og sikker end GET.
En simpel GET anmodning:
xhttp.open("GET", "demo_get.asp");
xhttp.send();Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp");
xhttp.send();
}
</script>
</body>
</html>
I eksemplet ovenfor får du muligvis et cachelagret resultat. For at undgå dette skal du tilføje et unikt id til URL'en:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
}
</script>
</body>
</html>
Hvis du vil sende oplysninger med GET-metoden, skal du tilføje oplysningerne til URL'en:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
}
</script>
</body>
</html>
Hvordan serveren bruger inputtet, og hvordan serveren reagerer på en anmodning, forklares i et senere kapitel.
En simpel POST anmodning:
xhttp.open("POST", "demo_post.asp");
xhttp.send();Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post.asp");
xhttp.send();
}
</script>
</body>
</html>
For at POST data som en HTML-formular skal du tilføje en HTTP-header med setRequestHeader(). Angiv de data, du vil sende i send()-metoden:
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post2.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
</body>
</html>
Tilføjer HTTP-headere til anmodningen
header: angiver headernavnet
værdi: angiver overskriftsværdien
For at udføre en synkron anmodning skal du ændre den tredje parameter i open()-metoden til false:
xhttp.open("GET", "ajax_info.txt", false);Nogle gange bruges async=false til hurtig test. Du finder også synkrone anmodninger i ældre JavaScript-kode.
Da koden vil vente på serverens færdiggørelse, er der ikke behov for en onreadystatechange fungere:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
Synchronous XMLHttpRequest (async=false) anbefales ikke, fordi JavaScript vil stop med at udføre, indtil serversvaret er klar. Hvis serveren er optaget eller langsom, applikationen hænger eller stopper.
Moderne udviklerværktøjer opfordres til at advare om brug synkrone anmodninger og kan give en InvalidAccessError-undtagelse, når den opstår.