Opasarkisto: AJAX: AJAX - Asynchronous JavaScript and XML

AJAX on tekniikka, jonka avulla voidaan siirtää tietoa selaimen (client) ja palvelimen (server) välillä ilman, että koko www-sivua täytyy ladata uudelleen. Tällä tavoin sivujen toimintaa pyritään viemään enemmän kohti tavanomaisia tietokoneohjelmia. Käytännössä AJAX on usean vanhemman tekniikan yhteiskäyttöä (JavaScript, (X)HTML, XML, DOM, XMLHTTPRequest). Tässä oppaassa oletetaan, että lukija tuntee perusteet vähintään HTML-kielestä sekä JavaScriptistä. Käytännössä AJAXin käyttö vaatii myös jonkinlaista palvelinpuolen ohjelmointitaitoa, esimerkiksi PHP- tai Perl-kielellä.

XMLHTTPRequest-objekti on keskeinen asia AJAX-tekniikan käytössä, mutta se ei valitettavasti ole standardin mukainen. Tästä syystä objektia käsitellään hieman eri tavoin riippuen, käytetäänkö Internet Exploreria vai jotain muuta selainta (Opera, Mozilla jne.). Nämä erot käyvät ilmi myöhemmin tässä oppaassa.

Tuetut selaimet ovat Internet Explorer 5.0, Mozilla 1.0, Firefox, Opera 8, Netscape 7, Safari 1.2 sekä näitä uudemmat versiot.

AJAXin toimintaidea

Yleensä on totuttu siihen, että nettisivun sisällön muuttaminen vaatii sivun uudelleen lataamisen palvelimelta. Aina tällainen ei ole toivottua, ja monesti on aivan turhaa hakea verkosta koko sivua uudelleen, jos muutokset koskevat vain pientä osaa sivusta. AJAX-tekniikka mahdollistaa datan siirtämisen selaimen ja palvelimen välillä ilman, että käyttäjä huomaa välttämättä koko tapahtumaa. Data siirtyy siis taustalla asynkronisesti häiritsemättä muun sivun toimintaa.

Pieni esimerkki voisi olla vaikkapa videogalleria, jossa käyttäjä pystyy arvostelemaan videoita. Käyttäjä voi arvostella videon (esimerkiksi napsauttamalla painiketta tai valitsemalla listasta haluamansa arvosanan) videon toiston aikana. Tällöin arvio lähetetään AJAXin avulla palvelimelle, jossa tiedon käsittelevä skripti tallentaa sen tietokantaan. Käyttäjä ei huomaa tapahtumaa, eikä videon toisto katkea, kuten kävisi, mikäli koko sivu jouduttaisiin lataamaan uudelleen.

XMLHTTPRequest-objekti

AJAXin toiminta perustuu XMLHTTPRequest-objektin käyttöön. Muiden objektien tavoin XMLHTTPRequest-objektillakin on ominaisuuksia ja metodeja. Mikäli olio-ohjelmointi ja edellä mainitut termit ovat outoja, siitä ei tarvitse tässä vaiheessa välittää. AJAXin käyttö onnistuu tulevien esimerkkien avulla ilman olio-ohjelmointitaitojakin.

Seuraavaksi käydään läpi XMLHTTPRequest-objektin tärkeimmät ominaisuudet ja metodit. Tarkempi toiminta ja tarkoitus selviävät tulevien esimerkkien kautta.

readyState-ominaisuudella on viisi eri tilaa, jotka kertovat, missä vaiheessa suoritusta pyyntö on menossa. Tilat ovat 0 = objektia ei ole vielä alustettu, 1 = odottaa lataamista, 2 = pyyntö lähetetty ja latautuu, 3 = data lähetetty, prosessointi palvelimella kesken sekä 4 = valmis.

open-metodilla on muitakin vaihtoehtoisia parametreja, mutta kolme tärkeintä ovat taulukossa mainitut method, jolla valitaan käytettäväksi joko GET- tai POST-tyyppinen datan lähetys palvelimelle, URL, johon kirjoitetaan pyynnön vastaanottavan skriptin osoite, sekä async, jolla asetetaan asynkroninen siirto päälle (true) tai pois päältä (false).

send-metodilla lähetetään pyyntö lopulta palvelimelle. Mikäli käytetään POST-tapaa välittää tieto selaimelta palvelimelle, tulee send-metodin parametriksi lähetettävä data, muutoin null.

POST ja GET

POST ja GET ovat kaksi erilaista tapaa siirtää tietoa selaimelta palvelimelle ja myöskin päinvastoin. Käytettäessä GET-muuttujia, tieto siirtyy URL-osoitteen mukana seuraavanlaiseen tapaan: www.ohjelmointiputka.net/opas.php?tunnus=ajax, eli kysymysmerkin (?) jälkeen tulee ensimmäisen muuttujan nimi ("tunnus"), jota seuraa yhtäsuuruusmerkki (=) ja muuttujan sisältämä arvo ("ajax"). Mikäli osoitteen mukana halutaan siirtää useampia muuttujia, ne erotellaan toisistaan &-merkillä: tunnus=ajax&toinen_muuttuja=toinen_arvo.

POST-muuttujien tapauksessa tieto siirtyy HTTP-otsikkotietojen mukana, jolloin tieto ei näy käyttäjälle, toisin kuin käytettäessä GET-muuttujia. POST-muuttujia kannattaa käyttää myös, mikäli siirrettävän tiedon määrä on suurempi.

Huomaa, että AJAX-tekniikassa pyyntö palvelimelle lähetetään taustalla käyttäjän näkymättömissä, jolloin edes GET-muuttujissa välitettävät tiedot eivät näy ulospäin.

Ensimmäinen AJAX-ohjelma

Seuraavaksi tehdään vaihe vaiheelta yksinkertainen ohjelma, jossa siirretään pieni määrä tietoa selaimen ja palvelimen välillä. Esimerkissä ei ole mukana varsinaisen sivun toteutusta HTML-kielellä, vaan ainoastaan tarvittava toiminnallisuus JavaScriptillä kirjoitettuna. Koodi tulee sivun head-osioon <script type="text/javascript"></script>-tagien väliin.

Ensimmäisenä esitellään globaali muuttuja XMLHTTPRequest-objektille kaikkien funktioiden ulkopuolella, jotta se olisi käytettävissä jokaisessa funktiossa. Tämän jälkeen muuttuja alustetaan selaimelle sopivalla tavalla omassa funktiossaan.

// Esitellään muuttuja XMLHTTPRequest-objektille:
var Pyynto;

// Alustetaan Pyynto-muuttuja sopivalla tavalla riippuen käytettävästä selaimesta:
function alustaPyynto()
{
	// Jos käytettävä selain on Internet Explorer:
	if(window.ActiveXObject)
	{
		Pyynto = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// Jos käytettävä selain on jokin muu, esim. Mozilla, Opera, Safari:
	else if(window.XMLHttpRequest)
	{
		Pyynto = new XMLHttpRequest();
	}
}

Edellä on siis esitelty muuttuja XMLHTTPRequest-objektille ja alustettu se selaimen edellyttämällä tavalla. Tästä eteenpäin AJAX-tekniikan käyttö on samanlaista selaimesta riippumatta. Seuraavaksi määritellään funktio varsinaisen pyynnön suorittamiselle.

// Käytetään GET-muuttujia tiedon välittämiseen palvelimelle
function suoritaPyynto()
{
	// Alustetaan ensin Pyynto-muuttuja kutsumalla edellä toteutettua funktiota:
	alustaPyynto();

	// Määritellään funktio, joka suoritetaan, kun vastaus palvelimelta on saapunut:
	Pyynto.onreadystatechange = kasitteleVastaus;

	// Käytetään GET-muuttujia tiedon lähettämiseen asynkronisesti
	// palvelimelle tarkista.php-nimiselle skriptille:
	Pyynto.open("GET", "tarkista.php?nimi=Mika", true);

	// Lähetetään pyyntö palvelimelle:
	Pyynto.send(null);
}

Huomaa, että vastauksen käsittelevän funktion nimi annetaan onreadystatechange-ominaisuudelle ilman sulkuja. Esimerkissä palvelimelle välitetään URL-osoitteen nimi-nimisessä muuttujassa Mika-merkkijono, jonka tilalla voidaan tietysti käyttää myös muuttujan nimeä: "tarkista.php?nimi=" + nimi.

Pyyntö lähetetään matkaan send-metodilla, jolle annetaan GET-muuttujia käytettäessä parametriksi null. Seuraavaksi saman funktion toteutus POST-muuttujia käytettäessä.

// Käytetään POST-muuttujia tiedon välittämiseen palvelimelle
function suoritaPyynto()
{
	// Alustetaan ensin Pyynto-muuttuja kutsumalla edellä toteutettua funktiota:
	alustaPyynto();

	// Määritellään funktio, joka suoritetaan, kun vastaus palvelimelta on saapunut:
	Pyynto.onreadystatechange = kasitteleVastaus;

	// Käytetään POST-muuttujia tiedon lähettämiseen asynkronisesti
	// palvelimelle tarkista.php-nimiselle skriptille:
	Pyynto.open("POST", "tarkista.php", true);

	// Asetetaan HTTP-otsake kertomaan sisällön tyyppi:
	Pyynto.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

	// Lähetetään pyyntö palvelimelle:
	Pyynto.send("nimi=Mika");
}

Edellisistä suoritaPyynto-funktioista toteutetaan siis vain toinen riippuen siitä, kumpaa tapaa halutaan käyttää tiedon siirtämisessä palvelimelle. POST-muuttujien tapauksessa lähetettävä data annetaan parametriksi send-metodille. Tällöin on myös asetettava HTTP-otsake "Content-Type" kertomaan, minkälaista tietoa on tulossa.

Nyt tarvitsemme vielä jotain, joka käynnistää pyynnön (kutsuu suoritaPyynto-funktiota) sekä käsittelee palvelimelta saapuvan datan. Tässä esimerkissä pyyntö käynnistetään painiketta napsauttamalla.

<input type="button" value="Tarkista nimi" onclick="suoritaPyynto()" />

Kun painiketta klikataan, siirrytään suoritaPyynto-funktioon, jossa kutsutaan XMLHTTPRequest-objektin alustavaa alustaPyynto-funktiota. Tämän jälkeen pyyntö lähetetään palvelimelle ja jäädään odottamaan vastausta. Kun vastaus saapuu, se käsitellään onreadystatechange-ominaisuudessa määritetyllä funktiolla. Funktion toteutus näkyy alla.

function kasitteleVastaus()
{
	// Tarkistetaan, onko pyyntö suoritettu kokonaan:
	if(Pyynto.readyState == 4)
	{
		// Tarkistetaan, onko pyynnön suoritus onnistunut:
		if(Pyynto.status == 200)
		{
			// Jos kaikki on kunnossa, käsitellään saapunut data:
			alert(Pyynto.responseText);
		}
		else
		{
			alert("Pyynnön suorituksessa on tapahtunut virhe!");
		}
	}
}

Funktiossa tarkistetaan ensin, onko pyyntö suoritettu kokonaisuudessaan, jolloin readyState-ominaisuuden arvoksi tulee 4. Tämän jälkeen tutkitaan, onko pyynnön suorittaminen onnistunut vai onko tapahtunut virhe. Onnistunut pyynnön suorittaminen asettaa status-ominaisuuden arvoksi 200. Sen sijaan esimerkiksi virhekoodi 404 kertoo, ettei annetusta osoitteesta löytynyt sivua (skriptiä).

Palvelimen lähettämä data saadaan poimittua esille responseText- tai responseXML-ominaisuudesta. Näistä ensimmäinen sisältää datan tekstimuotoisena, jolloin se voidaan tulostaa vaikka viesti-ikkunaan, kuten ylläolevassa yksinkertaisessa esimerkissä. Jälkimmäinen sisältää datan xml-muodossa, jolloin voidaan ottaa vastaan huomattavasti monimutkaisempia tietorakenteita. XML-datan käsittelystä on tulossa tässä oppaassa vielä oma esimerkki.

Tässä vaiheessa saattaa herätä kysymys, kuinka palvelimella oleva skripti käytännössä lähettää tietoa asiakkaalle. Se tapahtuu esimerkiksi PHP:ssä yksinkertaisesti tulostamalla echo-komennolla:

<?php echo "Tässä lähetetään tekstimuotoista dataa asiakkaalle."; ?>

Nyt responseText-ominaisuuden arvona pyynnön suorittamisen jälkeen on ylläoleva teksti.

Edellisen esimerkin myötä on käyty läpi kaikki asiat (XML-datan käsittelyä lukuunottamatta), joita tarvitaan AJAX-tekniikan hyödyntämiseksi. Kun data on vastaanotettu, sen jatkokäsittely tapahtuu muiden tekniikoiden avulla (JavaScript, DOM). Pyynnön vastaanottava skripti puolestaan toteutetaan jollain palvelinpuolen ohjelmointikielellä (esimerkiksi PHP, Perl, Python).

Voit ladata edellä läpikäydyn skriptin kokonaisuudessaan tekstitiedostona GET-muuttujia käytettäessä ja POST-muuttujia käytettäessä sekä palvelimelle tarvittavan PHP-skriptin.

XML-muotoisen datan käsittely

XML-datan käsittely tapahtuu pääosin DOM-mallin metodeja ja ominaisuuksia hyödyntämällä. Ensimmäisenä kannattaa huomata, että mikäli data otetaan vastaan palvelimelta XML-muotoisena, on palvelimella suoritettavan skriptin alussa kerrottava lähetettävän datan tyyppi. Esimerkiksi PHP-kielessä tämä tapahtuu seuraavasti.

<?php
// Asetetaan HTTP-otsake, jossa kerrotaan palvelimen selaimelle lähettämän tiedon tyyppi:
header("Content-type: text/xml");

// Tähän varsinainen skripti
?>

Lähetettävän datan on oltava XML-standardin mukaista. Alla lyhyt esimerkki XML-muotoisesta tiedosta. Tässä oppaassa ei käydä tarkemmin läpi XML:ää.

<?xml version="1.0" encoding="iso-8859-1"?>
<henkilot>
	<henkilo>
		<nimi>Aku Ankka</nimi>
		<osoite>Ankkalinna 8 A</osoite>
		<puhnro>050-123456</puhnro>
	</henkilo>
	<henkilo>
		<nimi>Iines Ankka</nimi>
		<osoite>Ankkalinna 14 B</osoite>
		<puhnro>044-901234</puhnro>
	</henkilo>
</henkilot>

XML-data muodostaa puurakenteen, jonka elementteihin pääsee käsiksi DOM-mallin metodeilla ja ominaisuuksilla. getElementsByTagName-metodilla voidaan XML-datasta poimia vaikkapa kaikki osoite-elementit taulukkoon. Jokaisella osoite-elementillä on puolestaan omat lapsisolmunsa, joihin päästään käsiksi childNodes-ominaisuuden avulla. Seuraava esimerkki havainnollistaa asiaa.

var osoitteet = Pyynto.responseXML.getElementsByTagName("osoite");
var osoite = osoitteet[0].childNodes[0].nodeValue;

alert(osoite);

Ensin kaikki osoite-nimiset elementit haetaan osoitteet-taulukkoon. Sitten osoitteet-taulukosta otetaan ensimmäinen osoite-elementti (osoitteet[0]), ja sen ensimmäinen lapsisolmu (childNodes[0]). Tämän solmun arvo "Ankkalinna 8 A" löytyy nodeValue-ominaisuudesta.

Loppusanat

AJAX itsessään ei ole kovin monimutkainen tekniikka. Käytännön sovellukset vaativat yleensä aina kuitenkin muidenkin www-tekniikoiden hyödyntämistä. Palvelimella on oltava skripti, joka ottaa pyynnön vastaan ja tekee sen edellyttämät toimenpiteet. Asiakaspuolella saapuva data on käsiteltävä halutulla tavalla - monesti tämä vaatii JavaScriptin lisäksi myös DOM-osaamista.

Lisätietoa XMLHTTPRequest-objektista tarjoaa W3C:n dokumentaatio. Lopuksi vielä linkit hieman suurempaan AJAX-esimerkkiin sekä sen lähdekoodeihin.

Esimerkki: Autokauppa

Lähdekoodit: AutokauppaEtusivu.html | autokauppa.php | luoAutoTaulu.php | lisaaAutoja.php | autot.txt

Kaikki lähdekooditiedostot ovat tekstitiedostoja. Mikäli haluat kokeilla esimerkkiä itse, muuta tiedostojen päätteet yllämainituiksi. Aluksi sinun on luotava tiedoille taulu suorittamalla luoAutoTaulu.php-skripti. Tämän jälkeen voit lisätä autojen tiedot tauluun suorittamalla lisaaAutoja.php-skripti, joka lukee autojen tiedot autot.txt-tiedostosta.