AJAX Introduktion


Innehållsförteckning

    Visa innehållsförteckning

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

Exempel på AJAX

Låt AJAX ändra denna text



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>

AJAX-exempel förklarat

HTML-sida

<!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.

anropar en funktion (om den klickas).

Funktionen begär data från en webb server och visar 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();
}


Vad är AJAX?

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.


Hur AJAX fungerar

  • 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 (Fetch API)

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.