Ajax (ohjelmointi)

Ajax (akronyymi sanoista Asynchronous JavaScript And XML)  on joukko web-sovelluskehityksen tekniikoita, joiden avulla web-sovelluksista voi tehdä vuorovaikutteisempia. Alkuperäisessä merkityksessään AJAX:lla on alun perin viitattu tekniikkaan, jossa verkkosivulla JavaScriptillä asynkronisesti tehtävistä HTTP-pyynnöistä palautetaan XML-merkkausta, mutta nykyään käytetään laajasti yksinkertaisempaa JSON-merkkausta. Nykyisin Ajax-tekniikoilla viitataan yleisesti samankaltaiseen toimintatapaan: Ajaxissa selainohjelma vaihtaa pieniä määriä dataa palvelimen kanssa taustalla niin, ettei koko verkkosivua tarvitse ladata uudelleen joka kerta käyttäjän tehdessä muutoksen . Tekniikan päämääränä on siis lisätä verkkopalvelun vuorovaikutteisuutta, nopeutta ja käytettävyyttä.

Ajax koostuu seuraavien tekniikoiden yhdistelmästä: 
 XHTML (tai HTML), CSS – informaation merkitsemiseen ja muotoiluun. 
 DOM asiakaspuolen skriptikielellä – erityisesti ECMAScript-toteutukset (kuten JavaScript ja JScript). Käytetään informaation dynaamiseen esittämiseen ja vuorovaikutukseen informaation kanssa. 
 XMLHttpRequest-objekti – datan vaihtamiseen asynkronisesti verkkopalvelimen kanssa. Joissakin Ajax-puitteissa ja tietyissä tilanteissa, IFrame-objektia käytetään XMLHttpRequest-objektin sijasta datan vaihtamiseen palvelimen kanssa. Ajax -kysely voidaan muodostaa myös synkronisesti. Tätä tarvitaan tilanteessa, jolloin lähetetään peräkkäin monta eri kyselyä, jotka vaikuttavat toistensa sisältöön. Tällöin palautetun datan saapumisjärjestys on olennaista.
 XML – käytetään yleisesti muotona datan siirtämiseen takaisin palvelimelta, vaikkakin mikä tahansa muoto toimii: esimuotoiltu HTML, pelkkä teksti, JSON tai jopa EBML.

DHTML:n, LAMP:n ja SPA:n tapaan Ajax ei ole itsenäinen teknologia, vaan termi tarkoittaa useiden teknologioiden samanaikaista käyttöä.

Historia 

1990-luvun alkupuoliskolla suurin osa internet-sivuista perustui muuttumattomiin HTML-sivuihin. Käyttäjä siirtyi valintansa mukaan sivulta toiselle. Käyttäjän jokainen toiminto latasi siis koko sivun uudelleen ja lähetti kaiken sivulla löytyvän tiedon palvelimelle, vaikka siiryttäessä vain osa tästä tiedosta muuttui. Tämä toimintatapa kuormitti palvelinta, mistä seurasi internet-sivujen tehokkuuden ja käytettävyyden huononemista. Ongelmaan toi helpotusta, kun JavaScript 1.0 -ohjelmointikieli julkaistiin vuonna 1995 ja vuorovaikutteisten verkkosivujen kehittäminen alkoi. 

Vuonna 1996 Internet Explorer -selain laukaisi uuden asynkronisen IFrame-objektin ja kaksi vuotta myöhemmin Microsoft kehitteli konseptin, johon XMLHttpRequest -komentosarjaobjekti perustuu. XMLHttpRequest, joka tunnetaan myös nimellä XMLHTTP, on API, jonka objektin metodit välittävät tietoa verkkoselaimen ja -palvelimen välillä. Windowsin kehittelemän XMLHTTP ActiveX:n toiminnallisuudet toteutettiin myöhemmin myös muissa verkkoselaimissa kuten Mozilla Firefoxissa, Safarissa, Operassa ja Google Chormessa XMLHttpRequest JavaScript-objektina. Microsoft otti XMLHttpRequest-objektin käyttöön ensimmäisen kerran Internet Explorer 7 -mallissa. ActiveX-versio on edelleen käytössä Internet Explorer -selaimessa, muttei enää Microsoft Edge -selaimessa.

Verkkosivujen taustalla ajettujen HTTP-pyyntöjen ja asynkronisten menetelmien mahdollistamat edut jäivät melko huomaamattomiksi, kunnes Ajaxia alettiin hyödyntämään suurissa verkkosovelluksissa kuten Googlen Gmail- ja Google Maps -sovelluksissa vuosina 2004 ja 2005. Näissä Googlen toteutuksissa oli mahdollista muun muassa hakea tietoa uusista sähköposteista ja selata karttoja lataamatta koko sivua uudelleen.

Termiä Ajax käytti ensimmäisen kerran Jesse James Garrett helmikuussa 2005 uutta menetelmää käsittelevässä esseessään Ajax: A New Approach to Web Applications kuvaillen Ajaxia keskeisenä muutoksena verkon mahdollisuuksiin.  Huhtikuussa 2006 World Wide Webin standardeja ylläpitävä ja kehittävä taho World Wide Web Consortium julkaisi XMLHttpRequest-objektille ensimmäisen luonnoksen objektin määritelmistä, joiden tarkoituksena on luoda virallinen verkkostandardi lisäten verkon yhtenäisyyttä. XMLHttpRequest-objektin viimeisin luonnos julkaistiin 6.10.2016 ja on jatkuvasti avoin päivityksille.

Selaimet, jotka tukevat Ajaxia 
Ajaxin käyttö vaatii selaimelta tukea XMLHttpRequest DOM-ohjelmointirajapinnalle. Yleisimmissä työpöytäselaimissa on olemassa tälle tuki seuraavasti: 

 Microsoftin Internet Explorerin versio 5.0  ja uudemmat sekä sen Trident HTML-moottoria ja JScript-moottoria käyttävät selaimet. (IE:n Mac OS -versioita ei tueta.)
 Gecko-HTML-moottoria käyttävät selaimet, kuten Mozillan Firefox, SeaMonkey, Camino, Flock, Web, Galeon sekä Netscapen versio 7.1 ja uudemmat, joiden kanssa käytetään TraceMonkey-nimistä JavaScript-moottoria.
 Selaimet, jotka käyttävät KHTML-moottorin versiota 3.2 tai uudempaa, mukaan lukien Konquerorin versio 3.2 ja siitä johdetun Webkit-HTML-moottorin uudemmat versiot, joita Apple käyttää Safarin version 1.2 jälkeen. Safarissa käytetään Nitro-nimistä JavaScript-moottoria, Konquerorissa KJS-nimistä JavaScript-moottoria.
 Operan kehittämä Opera-selain, joka käyttää Presto-HTML-moottoria ja Carakan-nimistä JavaScript-moottoria, versiosta 8.0 alkaen, mukaan lukien Operan mobiiliselaimen versio 8.0 ja uudemmat.

Yllä oleva lista on yleispiirteinen. Yksityiskohtainen tuki on rakennettu kunkin selaimen tukemien ominaisuuksien pohjalle.

Esimerkit 
JavaScript esimerkki
Esimerkki yksinkertaisesta AJAX pyynnöstä, joka lähtee [] kutsulla

// Alusta HTTP pyyntö.
let xhr = new XMLHttpRequest();
// määrittele pyyntö
xhr.open('GET', 'url.json');

// Seurataan vastauksen tilannetta, kunnes se toteutuu tai epäonnistuu.
xhr.onreadystatechange = function () {
	const DONE = 4; // readyState 4 tarkoittaa, että pyyntö onnistui.
	const OK = 200; // status 200 on onnistunut palautus.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText);
		} else {
			console.log('Error: ' + xhr.status); // Virhetilanne.
		}
	}
};

Fetch esimerkki
Fetch on JavaScript yleisellä käytöllä oleva XMLHttpRequest:n korvaaja. Fetch suoraviivaistaa web pyyntöjen tekoa.

fetch('send-ajax-data.php')
    .then(data => console.log(data))
    .catch (error => console.log('Error:' + error));

Lähteet

Aiheesta muualla 

Ohjelmointikielet
Seulonnan keskeiset artikkelit