AJAX 简介

AJAX är utvecklarnas dröm eftersom du kan:

  • Uppdatera webbsidan utan att refreshing
  • Hämta data från servern efter att sidan har laddats
  • Hämta data från servern efter att sidan har laddats
  • Skicka data till servern i bakgrunden

AJAX 实例

Klicka på knappen nedan för att låta Ajax ändra denna text:

Prova själv

AJAX-exempel förklaring

HTML-sida

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Låt AJAX ändra denna text</h2>
  <button type="button" onclick="loadDoc()">Ändra text</button>
</div>
</body>
</html>

Denna HTML-sida innehåller en <div> och en <button>.

<div> Används för att visa information från servern.

<button> Anropa funktionen (när den klickas).

Denna funktion hämtar data från webbservern och visar den:

Function loadDoc()
function loadDoc() {
  var 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", true);
  xhttp.send();
}

Vad är AJAX?

AJAX = Asynchronous JvaScript And XML.

AJAX är inte ett programmeringsspråk.

AJAX kombinerar bara:

  • Inbyggda XMLHttpRequest-objekt i webbläsaren (begära data från webbservern)
  • JavaScript och HTML DOM (visa eller använda data)

Ajax är ett missvisande namn. Ajax-applikationer kan använda XML för att överföra data, men det är också vanligt att data överförs som ren text eller JSON-text.

Ajax möjliggör asynkron uppdatering av webbsidan genom att utbyta data med webbservern bakom scenen. Detta innebär att delar av webbsidan kan uppdateras utan att hela sidan behöver laddas om.

Hur AJAX fungerar

AJAX
  1. En händelse inträffar på webbsidan (sida laddas, knapp klickas)
  2. XMLHttpRequest-objektet skapas av JavaScript
  3. XMLHttpRequest-objektet skickar en förfrågan till webbservern
  4. Servern hanterar förfrågan
  5. Servern skickar svaret till webbsidan
  6. Svar läses av JavaScript
  7. Rätt åtgärd utförs av JavaScript (t.ex. uppdatera sidan)