Ajax-termiltä ei ole voinut välttyä varmasti yksikään, joka edes millään muotoa on harrastanut web-sivujen tekoa. Tässä oppaassa tutustumme Ajaxin alkeisiin, teemme yksinkertaisen demosivun ja päivitämme sen sisältöä dynaamisesti JavaScriptin avulla.

Katso demo
Lataa tiedostot

Monille ensimmäinen kosketus dynaamisten sivujen rakentamiseen on PHP:n include-ominaisuus jolla HTML-sivu voidaan koostaa useammasta pienemmästä kappaleesta. Näin esimerkiksi sivun navigointia ei tarvitse ei tarvitse toistaa HTML-koodissa uudestaan joka sivulla, vaan se voidaan hakea yhdestä tiedostosta joka kerta.

Tänä päivänä sivulle voi helposti tuoda sisältöä myös sivun latauksen jälkeen. Tähän käytetään AJAX-tekniikkaa, joka mahdollistaa sivun sisällön päivittämisen ilman, että koko sivu ladataan uudelleen.

Käytän esimerkeissä jQuery JavaScript-kirjastoa, joka harmonisoi mukavasti selainten erilaisen käyttäytymisen JavaScriptin kanssa, sekä helpottaa ja nopeuttaa kaiken kaikkiaan koodin kirjoittamista.

Tehdään alkuun yksinkertainen mallisivu, jolla on vain pieni navigointi ja yksi div-elementti, johon dynaaminen sisältö ladataan. Ei mitään liian jännää:

<h1>Otsikko</h1>

<ul>
 <li><a id="etusivu" href="index.html">Etusivu</a></li>
 <li><a id="uutiset" href="uutiset.html">Uutiset</a></li>
 <li><a id="yhteystiedot" href="yhteystiedot.html">Yhteystiedot</a></li>
</ul>

<div id="sisalto">
 <h2>Etusivun jutut</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</div>

Seuraavaksi voimme tehdä navigointia vastaavat sisältöosiot omiin tiedostoihinsa:

uutiset.html

<h2>Uutiset</h2>

<p>Päivän tärkeimmät tapahtumat.</p>

yhteystiedot.html

<h2>Yhteystiedot</h2>

<p>Osoite, puhelinnumero yms...</p>

Lisää vielä seuraava rimpsu sivusi head-osioon:

<script src="http://www.google.com/jsapi"></script>

Edellinen koodinpätkä mahdollistaa jQueryn käytön suoraan Googlen palvelimelta, joten sinun ei tarvitse asentaa kirjastoa välttämättä itsellesi.

Nyt meillä on kaikki tarvittava sisältö ja voimme alkaa rakentamaan JavaScriptiä, joka hoitaa sisällön hakemisen #sisalto-diviin kun käyttäjä klikkaa navigoinnin linkkiä. Käytämme jQueryn .load()-metodia, jonka syntaksi on hyvin yksinkertainen:

// Ladataan jQuery Googlen palvelimelta ja ajetaan JS vasta kun
// koko dokumentti on latautunut.
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function() {

	// Kun Uutiset-linkkiä klikataan:
	$('#uutiset').click( function() {

		// Lataa uutiset.html-tiedoston sisältö 'sisalto'-divin sisään.
		// Samalla vanha sisältö pyyhkiytyy pois.
		$('#sisalto').load('uutiset.html');

		// Lopuksi estämme selainta turhaan seuraamasta linkkiä
		// klikattuun osoitteeseen.
		return false;

	});

	// Toistetaan sama temppu yhteystiedoille
	$('#yhteystiedot').click( function() {
		$('#sisalto').load('yhteystiedot.html');
		return false;
	});

});

Tällä hetkellä emme ole vielä tehneet mitään etusivulle vievälle linkille ja tässä yksinkertaisessa esimerkissä kaikki toimii jo nyt ok, mutta voimme ladata myös etusivun sisältöosuuden uudestaan etusivulle.

	// Ladataan etusivun sisällöt takaisin näkyviin ilman
	// koko sivun uudelleen päivittämistä
	$('#etusivu').click( function() {
		$('#sisalto').load('index.html #wrapper');
		return false;
	});

Syntaksi on hiukan muuttunut tällä kertaa. Koska etusivun jutuille ei ole olemassa omaa erillistä HTML-tiedostoaan, vihreiden arvojen kunniaksi kierrätämme index.html-tiedoston uusiokäyttöön, mutta otamme siitä vain tarvitun osan, eli sisällön:

$('#sisalto').load('index.html #wrapper');

Jos yrittäisimme käyttää edellisten esimerkkien koodia ja lataisimme vain suoraan #sisalto-divin vanhan #sisalto-divin sisään tapahtuisi aika epätoivottu reaktio:

<div id="sisalto">
 <div id="sisalto">
 <h2>Etusivun jutut</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
 </div>

</div>

Koska Yo Dawg-efekti ei ole tavoitteissamme, lisäämme alkuperäiseen index.html-tiedostoon ylimääräisen wrapperin heti #sisalto-divin jälkeen. Ylimääräisen HTML:n lisääminen ei ole kovin elegantti ratkaisu, mutta jokainen voi kotitehtävänä miettiä, miten edellä esitetty ongelma kierretään tyylikkäämmin.

Valmiin demon voit katsastaa täältä.

Lataa tiedostot