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 Chromessa 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.

Teknologiat

Termi Ajax on tullut edustamaan laajaa joukkoa web-teknologioita, joita voidaan käyttää toteuttamaan web-sovelluksia, jotka kommunikoivat palvelimien kanssa taustalla häiritsemättä sivun nykyistä tilaa. Ajaxiin muun muassa sisältyvät seuraavanlaiset teknologiat:

• HTML (tai XHTML) ja CSS esitystä varten
• Document Object Model (DOM) dynaamista datan näyttöä ja vuorovaikutusta varten
• JSON tai XML datan vaihtoon ja XSLT XML:n käsittelyyn
• XMLHttpRequest-objekti asynkronista kommunikointia varten
• JavaScript näiden teknologioiden yhdistämiseksi

Ajaxin syntymisen jälkeen Ajax-sovelluksissa käytetyissä teknologioissa ja Ajax-termin määritelmässä on kuitenkin tapahtunut useita kehityksiä. XML ei ole enää pakollinen tiedonvaihdossa ja siksi XSLT ei ole enää välttämätön datan käsittelyyn. JavaScript Object Notation (JSON) on usein käytetty vaihtoehtoinen formaatti tiedonvaihdossa, vaikka myös muita formaatteja, kuten esimuotoiltua HTML:ää tai pelkkää tekstiä, voidaan käyttää. Useat suositut JavaScript-kirjastot, mukaan lukien jQuery, sisältävät abstraktioita, jotka auttavat Ajax-pyyntöjen toteuttamisessa.

Lisäksi muita nykyään yleisesti käytettyjä teknologioita ja lähestymistapoja Ajax-sovelluksissa ovat:

• Fetch API, joka tarjoaa modernin ja joustavamman tavan käsitellä HTTP-pyyntöjä verrattuna vanhempaan XMLHttpRequest-objektiin.
• Promises ja async/await-syntaksi, jotka helpottavat asynkronisen koodin kirjoittamista ja käsittelyä, tehden siitä luettavampaa ja hallittavampaa.
• WebSocketit, jotka mahdollistavat kaksisuuntaisen reaaliaikaisen viestinnän palvelimen ja asiakkaan välillä, mikä on hyödyllistä sovelluksissa, jotka vaativat jatkuvaa tietojen päivitystä ilman jatkuvia pyyntöjä palvelimelle.
• Service Workerit, jotka mahdollistavat taustalla suoritettavan käsittelyn ja välimuistin hallinnan, parantaen sovelluksen suorituskykyä ja käyttäjäkokemusta offline-tilassa.
• Frameworkit ja kirjastot, kuten React, Angular ja Vue.js, jotka tarjoavat tehokkaita työkaluja ja rakenteita dynaamisten ja interaktiivisten käyttöliittymien luomiseen Ajax-tekniikoita hyödyntäen.

Näiden uusien teknologioiden ja menetelmien myötä Ajax-sovellusten kehitys on kehittynyt huomattavasti mahdollistaen entistä monipuolisempia ja tehokkaampia web-sovelluksia.

Ajaxia tukevat selaimet

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 GET-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));

Aiheesta muualla

• Kuvia tai muita tiedostoja aiheesta Ajax (ohjelmointi) Wikimedia Commonsissa