Ajax (Asynchronous JavaScript and XML) - Luento 15

Perehdymme dynaamisten (DHTML) WWW-sovellusten tuottamiseen Javascriptin ja asynkronisten XMLHTTP-kutsujen avulla.

Luentotaltiointi

Ongelmia videon katselussa?

Mikä on Ajax?

Mitä Ajaxilla voi tehdä

Tunnettuja Ajax-sovelluksia

Myös suomalaisissa palveluissa osataan jo käyttää Ajaxia:

Miten Ajax-ohjelmia tehdään

XMLHTTPRequest-objekti

XMLHTTPRequest-objektin ominaisuudet kuvataan esim. W3C:n The XMLHttpRequest Object - draft-dokumentissa.

Tärkeimmät metodit:

XMLHTTPRequest-objekti
abort() Keskeytä menossa oleva pyyntö
setRequestHeader("nimi", "arvo") Asettaa pyynnön otsikkotietoja
getResponseHeader("nimi") Palauttaa yhden halutun http-otsakkeen arvon
getAllResponseHeaders() Palauttaa kaikki pyynnölle palautetut http-otsakkeet
open("method", "URL"[, async[, "tunnus"[, "salasana"]]]) Asettaa metodin (POST|GET|HEAD etc.), osoitteen ja mahdollisen käyttäjätunnuksen, salasanan ja tehdäänkö pyyntö asynkronisesti vai ei
send(data) Lähettää pyynnön ja mahdollisen datan
XMLHTTPRequest-objektin ominaisuudet
onreadystatechange Tapahtumankäsittelijä
readyState Objektin tila
  • 0 = alustamaton
  • 1 = lataa
  • 2 = ladattu
  • 3 = interaktiivinen
  • 4 = valmis
responseText Palautettu data merkkijonona
responseXML Palautettu data DOM-yhteensopivana XML-dokumenttina
status HTTP-statuskoodi (kts. luento 5)
statusText HTTP-statuskoodin mukana tullut mahdollinen teksti esim. virheilmoitus

Huomioitavaa

Muutama asia on huomioitava ennenkuin XMLHttpRequest toimii oikein:

GET

GET-metodia käytettäessä parametrit laitaa open-metodin url-parametriin. Käytä escape-funktiota tai muuta vastaavaa funktiota ääkkösten yms. korjaamiseksi.

Jos mitään tietoa ei lähetetä ja käytössä on GET-metodi, niin kutsu send(null).

POST

POST-metodia käytettäessä send-metodille annettava data on oltava querystring-muodossa:

nimi=arvo&toinen=arvo&kolomas=jotain

Käytettäessä POST-metodia täytyy mediatyyppi määrätä seuraavalla tavalla:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Jos mitään tietoa ei lähetetä ja käytössä on POST-metodi, niin kutsu send("").

Vasteen käsittely

Tapahtumankäsittelijässä on tarkistettava readyState-ominaisuudesta mikä on pyynnön vaihe ja status-attribuutista mikä on vasteen statuskoodi.

Kun nämä ovat ok, niin data saadaan responseText tai responseXML-attribuuteista.

responseXML

Jos vaste halutaan XML:nä, on huomioitava seuraavat asiat:

XMLHttpRequestien debuggaus

Pyynnöt ja vasteet saa näkyviin esim. Firebugin Console-ikkunasta.

JavaScript-kirjastot

Prototype on suosittu Javascript-kirjasto, jonka avulla voidaan tehdä eri selaimilla toimivaa Javascriptiä. Siinä on tuki myös tuki erilaisille Ajax-operaatioille.

Tapahtumien rekisteröinti

window.onload = function() {
  Event.observe('napin_id', 'click', tee_operaatiot); 
}

Ajax-operaatiot

Onnistuu prototypen Ajax-oliolla:

new Ajax.Request('hae_dataa.php', {
  onSuccess: paivita_sivu
});

Tapahtuman käsittely esim.

function paivita_sivu(transport) {
  if (transport.status == 200) {
    var vanhempi = $('elementin_id').parentNode;
    $('elementin_id').remove();
    if (document.importNode) {
      var uusinode = document.importNode(transport.responseXML.documentElement);
      vanhempi.appendChild(uusinode);
    // IE ei vain osaa
    } else {
      new Insertion.Bottom(vanhempi, transport.responseText);
    }
  }
}

GET-metodi parametreilla:

escape muuntaa merkkijonon URL-enkoodatuksi ISO Latin -heksamerkkikoodiksi.

POST-metodin käyttö:

  new Ajax.Request('hae_dataa.php', {
    method: 'post',
    parameters: Form.serialize($('lomakkeen_id'), true),
    onSuccess: paivita_sivu
  });

Serialize käyttää encodeURIComponent-funktiota, joka muuttaa merkin vastaamaan sen UTF-8-koodia. Tämä pitää muuttaa palvelimella takaisin ISO-8859-1-merkistöön, jos sitä halutaan käyttää. Esim. PHP:ssa:

iconv("UTF-8", "ISO-8859-1", $_REQUEST['haku'])

Ajax-esimerkkejä

Ajax-sovelluksien virheitä ja ongelmia

Lisätietoa

Linkkejä javascript-kirjastoihin ja Ajax-artikkeleihin.

Javascript-kirjastoja

AJAX-artikkeleita

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/sovellukset/luennot/luento15/
© Jukka Mäntylä (jmantyla@mit.jyu.fi) <http://www.iki.fi/jmantyla/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
2007-04-19 14:53:44