Objektet XMLHttpRequest används för att begära data från en server.
För att skicka en begäran till en server använder vi metoderna open() och send() för XMLHttpRequest-objektet:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();Anger typen av begäran
metod: typen av begäran: GET eller POST
url: serverns (filens) plats
asynkron: sant (asynkront) eller falskt (synkront)
Skickar begäran till servern (används för GET)
Skickar begäran till servern (används för POST)
URL-parametern för metoden open() är en adress till en fil på en server:
xhttp.open("GET", "ajax_test.asp", true);Filen kan vara vilken typ av fil som helst, som .txt och .xml eller serverskriptfiler som .asp och .php (som kan utföra åtgärder på servern innan svaret skickas tillbaka).
Serverförfrågningar ska skickas asynkront.
Asynkronparametern för open() metoden ska ställas in på true:
xhttp.open("GET", "ajax_test.asp", true);Genom att skicka asynkront kan JavaScript behöver inte vänta på serversvaret, utan kan istället:
kör andra skript medan du väntar på serversvar
hantera svaret efter att svaret är klart
Standardvärdet för async-parametern är async=true.
Du kan säkert ta bort den tredje parametern från din kod.
Synchronous XMLHttpRequest (async=false) rekommenderas inte eftersom JavaScript kommer sluta köra tills serversvaret är klart. Om servern är upptagen eller långsam, applikationen hänger eller stoppar.
GET begäran eller POST begäran?GET är enklare och snabbare än POST och kan användas i de flesta fall.
Använd dock alltid POST-förfrågningar när:
En cachad fil är inte ett alternativ (uppdatera en fil eller databas på servern).
Skickar en stor mängd data till servern (POST har inga storleksbegränsningar).
Skickar användarinmatning (som kan innehålla okända tecken), POST är mer robust och säker än GET.
En enkel GET begäran:
xhttp.open("GET", "demo_get.asp");
xhttp.send();Prova själv →
<!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 exemplet ovan kan du få ett cachat resultat. För att undvika detta, lägg till ett unikt ID till URL:en:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();Prova själv →
<!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>
Om du vill skicka information med metoden GET, lägg till informationen i webbadressen:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();Prova själv →
<!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>
Hur servern använder indata och hur servern svarar på en förfrågan, förklaras i ett senare kapitel.
En enkel POST-förfrågan:
xhttp.open("POST", "demo_post.asp");
xhttp.send();Prova själv →
<!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>
För att POSTA data som ett HTML-formulär, lägg till en HTTP-rubrik med setRequestHeader(). Ange vilken data du vill skicka med metoden send():
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");Prova själv →
<!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>
Lägger till HTTP-rubriker i begäran
huvud: anger rubrikens namn
värde: anger rubrikvärdet
För att utföra en synkron begäran, ändra den tredje parametern i metoden open() till false:
xhttp.open("GET", "ajax_info.txt", false);Ibland används async=false för snabbtestning. Du hittar också synkrona förfrågningar i äldre JavaScript-kod.
Eftersom koden väntar på att servern är färdig, finns det inget behov av en onreadystatechange fungera:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;Prova själv →
<!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) rekommenderas inte eftersom JavaScript kommer sluta köra tills serversvaret är klart. Om servern är upptagen eller långsam, applikationen hänger eller stoppar.
Moderna utvecklarverktyg uppmuntras att varna för användning synkrona förfrågningar och kan orsaka ett InvalidAccessError-undantag när det inträffar.