AJAX Introduktion

Indholdsfortegnelse

AJAX er en udviklerdrøm, fordi du kan:

Læs data fra en webserver - efter at siden er indlæst
Opdater en webside uden at genindlæse siden
Send data til en webserver - i baggrunden

Eksempel på AJAX

Lad AJAX ændre denne tekst

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>

AJAX-eksempel forklaret

HTML-side

<!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-siden indeholder en <div> sektion og en .

<div> sektion bruges til at vise information fra en server.

kalder en funktion (hvis der klikkes på den).

Funktionen anmoder om data fra et web server og viser den:

Funktion loadDoc()

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    
document.getElementById("demo").innerHTML = this.responseText;
    }
  xhttp.open("GET", "ajax_info.txt", true);
  
xhttp.send();
}

Hvad er AJAX?

AJAX=Asynkron JavaScript And XML.

AJAX er ikke et programmeringssprog.

AJAX bruger bare en kombination af:

Et browser indbygget XMLHttpRequest objekt (for at anmode om data fra en webserver)
JavaScript og HTML DOM (for at vise eller bruge dataene)

AJAX er et misvisende navn. AJAX-applikationer kan bruge XML til at transportere data, men det er lige så almindeligt at transportere data som almindelig tekst eller JSON-tekst.

AJAX tillader websider at blive opdateret asynkront ved at udveksle data med en webserver bag kulisserne. Det betyder, at det er muligt at opdatere dele af en webside, uden at genindlæse hele siden.

Sådan fungerer AJAX

1. En hændelse opstår på en webside (siden er indlæst, der klikkes på en knap)
2. Et XMLHttpRequest-objekt oprettes af JavaScript
3. XMLHttpRequest-objektet sender en anmodning til en webserver
4. Serveren behandler anmodningen
5. Serveren sender et svar tilbage til websiden
6. Svaret læses af JavaScript
7. Korrekt handling (som sideopdatering) udføres af JavaScript

Moderne browsere (Fetch API)

Moderne browsere kan bruge Fetch API i stedet for XMLHttpRequest Object.

Fetch API-grænsefladen gør det muligt for webbrowseren at lave HTTP-anmodninger til webservere.

Hvis du bruger XMLHttpRequest-objektet, kan Fetch gøre det samme på en enklere måde.