Keystone i AJAX är XMLHttpRequest-objektet.
Skapa ett XMLHttpRequest-objekt
Definiera en återuppringningsfunktion
Öppna XMLHttpRequest-objektet
Skicka en förfrågan till en server
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.
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();
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
}
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();
// 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>
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.
Skapar ett nytt XMLHttpRequest-objekt
Avbryter den aktuella begäran
Returnerar rubrikinformation
Returnerar specifik rubrikinformation
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
Skickar begäran till servern
Används för GET-förfrågningar
Skickar begäran till servern.
Används för POST-förfrågningar
Lägger till ett etikett/värdepar i rubriken som ska skickas
Definierar en funktion som ska anropas när begäran tas emot (laddas)
Definierar en funktion som ska anropas när egenskapen readyState ändras
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
Returnerar svarsdata som en sträng
Returnerar svarsdata som XML-data
Returnerar statusnumret för en begäran
200: "OK"
403: "Forbidden"
404: "Not Found"
För en komplett lista gå till Http Meddelanden Referens
Returnerar statustexten (t.ex. "OK" eller "hittades inte")
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
:
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>
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.
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
}
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.
Definierar en funktion som ska anropas när egenskapen readyState ändras
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
200: "OK"
403: "Förbjudet"
404: "Sidan hittades inte"
För en fullständig lista gå till Http-meddelanden Referens
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:
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.