AJAX 简介

AJAX on kehittäjien unelma, koska voit:

  • Päivitä sivu ilman sivun uudelleenlataamista
  • Pyydä tietoja palvelimelta sivun lataamisen jälkeen
  • Vastaanota tietoja palvelimelta sivun lataamisen jälkeen
  • Lähetä tietoja taustalla olevaan palvelimeen

AJAX 实例

Napsauta alla olevaa painiketta, jotta Ajax muuttaa tätä tekstiä:

Kokeile itse

AJAX-esimerkki selitys

HTML-sivu

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Muuta tätä tekstiä AJAXilla</h2>
  <button type="button" onclick="loadDoc()">Muuta tekstiä</button>
</div>
</body>
</html>

Tämä HTML-sivu sisältää div:n ja buttonin.

<div> Näyttää tietoja palvelimelta.

<button> Kutsu funktiota (kun se on napsautettu).

Tämä funktio hakee tietoja verkkoserveristä ja näyttää ne:

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();
}

Mikä on AJAX?

AJAX = Asynchronous JavaScript And XML.

AJAX ei ole ohjelmointikieli.

AJAX koostuu vain:

  • Selaimessa sisäänrakennettu XMLHttpRequest-objekti (pyytää tietoja web-palvelimelta)
  • JavaScript ja HTML DOM (näyttää tai käyttää tietoja)

Ajax on harhaanjohtava nimi. Ajax-sovellukset saattavat käyttää XML:ää tietojen siirtämiseen, mutta puhtaan tekstin tai JSON-tekstin siirtäminen on myös yleistä.

Ajax mahdollistaa verkkosivun osien päivittämisen asynkronisesti vaihtamalla tietoja taustalla olevan Web-palvelimen kanssa. Tämä tarkoittaa, että voidaan päivittää verkkosivun osia ilman, että koko sivu on ladattava uudelleen.

Miten AJAX toimii

AJAX
  1. Verkkosivulla tapahtuu tapahtuma (sivun lataaminen, painikkeen napsautus)
  2. JavaScript luo XMLHttpRequest-objektin
  3. XMLHttpRequest-objekti lähettää pyynnön verkkopalvelimelle
  4. Palvelin käsittelee pyynnön
  5. Palvelin lähettää vastauksen takaisin verkkosivulle
  6. JavaScript lukee vastauksen
  7. JavaScript suorittaa oikean toiminnan (esim. sivun päivittäminen)