AJAX är en utvecklares dröm, eftersom du kan:
Läs data från en webbserver - efter att sidan har laddats
Uppdatera en webbsida utan att ladda om sidan
Skicka data till en webbserver - i bakgrunden
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>
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2> <button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
HTML-sidan innehåller en <div>-sektion och en
<div> sektionen används för att visa information från en server.
Funktionen begär data från en webb server och visar den:
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
AJAX=Asynkron JavaScript And XML.
AJAX är inte ett programmeringsspråk.
AJAX använder bara en kombination av:
Ett webbläsarinbyggt XMLHttpRequest
-objekt (för att begära data från en webbserver)
JavaScript och HTML DOM (för att visa eller använda data)
AJAX är ett missvisande namn. AJAX-applikationer kan använda XML för att transportera data, men det är lika vanligt att transportera data som vanlig text eller JSON-text.
AJAX tillåter webbsidor att uppdateras asynkront genom att utbyta data med en webbserver bakom kulisserna. Det innebär att det är möjligt att uppdatera delar av en webbsida, utan att ladda om hela sidan.
1. En händelse inträffar på en webbsida (sidan laddas, en knapp klickas)
2. Ett XMLHttpRequest-objekt skapas av JavaScript
3. Objektet XMLHttpRequest skickar en begäran till en webbserver
4. Servern behandlar begäran
5. Servern skickar ett svar tillbaka till webbsidan
6. Svaret läses av JavaScript
7. Korrekt åtgärd (som siduppdatering) utförs av JavaScript
Moderna webbläsare kan använda Fetch API istället för XMLHttpRequest Object.
Fetch API-gränssnittet tillåter webbläsare att göra HTTP-förfrågningar till webbservrar.
Om du använder XMLHttpRequest-objektet kan Fetch göra detsamma på ett enklare sätt.