Servisni del aplikacije je nastal že leta 2000 in sem ga nato posodabljal ter nadgrajeval precej let. Že v osnovi pa je bil zgrajen podobno kot so današnje AJAX aplikacije, le da takrat te tehnologije ni bilo in sem se poslužil IFRAME in FRAMESET, da je bila količina osveževanega najmanjša.

AJAX (Asynchronous Javascript And XML) filozofija je čisto preprosta: namesto osveževanja cele strani, z JavaScriptom zahtevamo (asinhrono - torej ne nujno na željo uporabnika) nalaganje strani s serverja v pomnilnik. Nato tako naloženo stran vrinemo oz. vstavimo v DOM (običajno v innerHTML property).

Zveni čisto preprosto in v resnici tudi je, če le odmislimo tehniko. In tu se je tudi meni zdelo nepotrebno kompliciranje. Zato sem malo pogledal naokoli. Kupil sem si knjigo AJAX, JavaScript and PHP in malo poštudiral. V knjigi je priporočenih kar nekaj zanimivih JavaScript knjižnic za delo z AJAXom. V oko mi je padla knjižnica prototype.js, a se mi je zdela nepotrebno velika. Verjamem, da ima mnogo funkcij, a jih vseh nisem potreboval.

Iskanje me je preko množice raznoraznih knjižnic privedlo do jQuery. Sprva sem jo zgolj bežno preletel in, ker je nisem razumel, enostavno preskočil. A mi ni dalo miru, stalno sem se vračal na stran in študiral primere. In končno sem dojel.

Lepota jQuery je odlično izražena v njenem sloganu: Write less, do more! In kako to drži!

Primer:
Servisno stran imam razdeljeno na tri dele: zgoraj je menu, na levi strani je seznam in na desni urejevalno okno. V straih časih sem za spodnji del uporabil IFRAME in, znotraj, FRAMESET. Tokrat sem se odločil za modernejši pristop in pripravil DIVe. Enega za menu, enega za spodnji del, ki vsebuje še dva, levega in desnega.

<div id="menu">...koda za menu...</div>
<div id="okvir">
<div id="levo" style="float:left">&nbsp;</div>
<div id="desno" style="float:left">&nbsp;</div>
</div>

In ker so DIVi block objekti visoki zgolj toliko kot njihova vsebina, sem jih moral raztegniti, preko vsega zaslona. Klasično je to kar precej kode (ki je tukaj ne bom ponavljal), z jQuery pa zgolj:

function fixSize() {
var frame = $("#okvir").width(0).height(0); // fix scroller problem
var list = $("#levo").width(0).height(0);
var edit = $("#desno").width(0).height(0);

frame.width($(window).width()).height($(window).height() - frame.position().top);
list.height(frame.innerHeight()).width(325);
edit.height(frame.innerHeight()).width(frame.innerWidth()-325);
}
...
$(document).ready(fixSize);
$(window).resize(fixSize);

A ni to lepo? Morda na prvi pogled res ne, a če pogledamo podrobno je smešno enostavno. $(document).ready() pove, naj se po končanem nalaganju strani zažene funkcija fixSize(). Isto naredi $(window).resize() za slučaj, če uporabnik spremeni velikost okna.

Prve tri vrstice v funkciji fixSize poskbijo za anomalijo, ki se pojavi s prikazom scrollerjev in so v bistvu nepomembne. Četrta vrstica (frame.width(...)) poskrbi za raztegnitev DIVa okvir preko preostanka zaslona. Vse v eni vrstici! Pa še čitljivo je! Torej, širina je širina okna, nato sledi višina, ta je višina okna minus vertikalni položaj samega DIVa. Sledi zgolj nastavitev še za DIVa levo in desno. Širino levega sem fiksiral na 325.

Iz menija se nalaga vsebina v levi del, ki jse seznam vsebine (npr. besedil, ...). Tudi tu je koda smešno enostavna. V meniju imam onClick JavaScript, ki naredi tole:

$("#levo").load('pot/levo.php?izbor='+ID);

To pomeni, da v DIV levo (njegov innerHTML) naloži vsebino strani levo.php (s parametrom kaj želim nalagati). In linki (A) v levi vsebini so praktično vsi enaki:

jaascript:$("#desno").load('pot/desno.php?izbor='+ID);

Simp'l za poscat se!