AJAX-esittely

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 palvelimelle

AJAX-esimerkki

Paina alla olevaa painiketta muuttaaksesi tätä tekstiä Ajax:llä:

Kokeile itse

AJAX-esimerkki selitys

HTML-sivu

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

Tämä HTML-sivu sisältää div- ja button-elementin.

<div> Näyttää tietoja palvelimelta.

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

Tämä funktio pyytää tietoja verkkoserveristä ja näyttää sen:

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

Mitä 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 asynkronisen päivityksen vaihtamalla tietoja taustalla olevan Web-palvelimen kanssa. Tämä tarkoittaa, että voidaan päivittää verkkosivun osia ilman, että koko sivu täytyy ladata 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 toiminnon (esim. sivun päivittäminen)