Lekce 1 - Úvod do AJAXu

Ako iste väčšina z Vás vie, Javascript je tzv. Client-side jazyk. Vykonáva sa teda na strane webového prehliadača na klientskom počítači a je interpretovaný javascriptovým interpreter. Disponuje radom vlastností, okrem iného aj tou, ktorá nás teraz bude zaujímať najviac - schopnosťou vykonávať asynchrónny operácie / úlohy.

V čom vlastne spočíva Nesúrodý v AJAXu? Ide o schopnosť JavaScriptu zavolať na serveri nejaký skript, alebo prvok API a nečakať bezprostredne na odpoveď. Namiesto toho pokračuje vykonávanie kódu (užívateľovi sa napríklad zobrazí stránka a môže s ňou bežne pracovať). Keď potom odpoveď príde, vykonávanie hlavného kontextu kódu sa pozastaví (skôr, či neskôr v závislosti na priorite vykonávané úlohy) a dôjde k zavolanie tzv. Callbacku - funkcia, ktorá sa vykoná v prípade, že zo servera dostaneme odpoveď. Takémuto kódu, či takéto funkcii sa potom hovorí neblokujúca, pretože neblokuje priebeh vykonávania skriptu čakaním na odpoveď, či spracovanie.

Čo teda ten AJAX je a čo nám prináša? Ide o skratku Asynchronous Javascript And XML, to nám zatiaľ nepovie viac, než že to súvisí s XML a JavaScript, však pôjdeme na to postupne a všetko si vysvetlíme.

AJAX je spôsob, ako programovať v Javascriptu - nie je to teda žiadny nový jazyk ani framework alebo knižnica tretej strany. Ide o spôsob, ktorým môžeme vymieňať dáta v našej aplikácii s databázou, serverovými skripty (PHP, Java, ASP, atď.) Bez toho aby sme aktualizovali / reloadovali celú stránku, technicky vzaté neaktualizuje (v zmysle refresh) vôbec žiadnu časť našej aplikácie, či stránky a v tom vlastne tkvie tá "magická sila" a podstata AJAXu.

Prečo sa v názve vyskytuje skratka XML? Jednoducho je to jeden z formátov dát, v ktorom AJAX vie získať informáciu zo servera, najznámejšie a často používané sú JSON, XML, text, binárne dáta. Každý z nich má niečo do seba, každý sa hodí na niečo iné a používa sa trochu inak.

AJAX vám napríklad dáva možnosť skontrolovať údaje zadané užívateľom ešte než je používateľ odošle potvrdením formulára. Do istej miery je toho schopný aj doteraz známy Javascript, ale čo keď ide o registračný formulár s podmieneným heslom, užívateľským menom alebo e-mailom, ktoré musia byť unikátne v rámci databázy / tabuľky? Presne pre tieto a mnohé ďalšie účely je táto technológia to pravé. Dovolí vám totiž vykonať tie isté operácie, ktoré by ste vykonávali volaním napríklad PHP skriptov pri presmerovaní po odoslaní formulára, ale na rozdiel od nich vám umožní vykonávať takéto volania na pozadí.

V tomto seriáli vám predstavím všetky najčastejšie používané metódy pre asynchrónne Javascript a naučíme sa pracovať so štandardom nazývaným JSONP, ktorý "obchádza" SOP - Same Origin Policy. Čo je to SOP a na čo slúžia, si tiež v priebehu seriálu ukážeme.

Dosť teórie. Pozrieme sa na typický príklad AJAXu:

function loadFromTextFile()
{
var xmlhttp;
if (window.XMLHttpRequest) // kod pro IE7+, Firefox, Chrome, Opera, Safari
  {
  xmlhttp = new XMLHttpRequest();
  }
else // kod pro IE6, IE5
  {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange = function()
  {
  if (this.readyState == 4 && this.status == 200) // this zde referuje na konkretni instanci XMLHTTP pozadavku, na nas xmlhttp
    {
    alert(this.responseText);
    }
  }
xmlhttp.open("GET","./ajax_info.txt",true);
xmlhttp.send();
}
// zavolani funkce obsahujici AJAX
loadFromTextFile();

Vysvetlenie: Ak sa s asynchrónnym kódom stretávate prvýkrát, najskôr ste sa pri pohľade na ukážku cítili dosť zmätene, v skutočnosti to ale nie je tak komplikované, ako sa na prvý pohľad zdá. Poďme teraz krok po kroku vysvetliť, čo sa vlastne v priebehu spracovania uvedeného kódu deje.

1. Vytvorenie funkcie, ktorú neskôr zavoláme, toto nie je nutnosťou, pokojne môžete AJAX volať z hlavného kontextu Vášho kódu, tu len pre názornosť.
2. Vytvorenie premenné s názvom xmlhttp - zatiaľ je prázdna a neskôr sa do nej uloží špeciálnej objekt typu XMLHttpRequest.
3. Občas sa toto "klasické demo" vyskytuje v podobe bez podmienky, ale na účely zoznámenie s technikou AJAX je podľa mňa nutné uviesť aj tento "háčik". Pomocou podmienky, ktorá berie ako parameter window.XMLHttpRequest, zisťujeme, o aký prehliadač ide. Alebo tiež, či prehliadač podporuje danú technológiu, ako ste iste pochopili z komentára pri kóde, robíme to špeciálne pre Internet Explorer verzie 5 a 6 - AJAXové požiadavka sa totiž v týchto prehliadačoch vytvára trochu inak - ako tzv. ActiveXObject - od siedmej verzie IE už sa ale všetko píše úplne štandardne a ak nehodláte podporovať IE5 alebo 6 môžete túto podmienku vypustiť, k ničomu vám nebude. Na účely ukážky je však absolútne kľúčové vysvetliť a ukázať, že niečo ako ActiveXObject existuje.
4. Teraz vytvárame vlastne klasický eventHandler a rovno ho ukladáme do premennej. Pre celistvosť, je to časť kódu, ktorá hovorí prehliadači, že pokiaľ nastane určitá udalosť, má spustiť funkciu, ktorá je uložená práve v zodpovedajúcej premennej. Existuje viac spôsobov, ako pracovať s klasickými udalosťami. V AJAXu sa používa princíp premenné. Funkcia sa vykoná zakaždým, keď xmlhttp objekt vyvolá udalosť onreadystatechange. V praxi sa vykonáva skutočne viackrát (v tom vlastne spočíva skutočná hĺbka AJAXu). Iste si všimnete, že sa v tejto vnorené tzv. Reakčnou funkciu testujú dve premenné na svoju hodnotu. Pre začiatok postačí povedať, že ak nadobudnú hodnôt v podmienke, obsahuje napríklad premenná responseText, alebo napríklad responseXML potrebnú hodnotu zo servera a vykoná sa volanie na alert().
5. Funkcia open() a send() sú záležitosti na dlhšie vysvetlenie, preto zatiaľ postačí povedať, že ak používate metódu GET, bude to takto stačiť. V budúcnosti si predstavíme metódu POST as ňou aj malý detail, ktorý prinesie do AJAXu navyše. Funkcia open() očakáva tri parametre. Prvým je typ metódy pre volanie skriptu na serveri, druhý je jeho absolútny alebo relatívny adresa, tretí je boolean a povieme si o ňom nabudúce, spolu s detailným rozborom zvyšných dvoch argumentov.
6. Nakoniec vlastne len zavoláme našu AJAXové funkciu. Opäť je to záležitosť čisto estetická - pokojne by sme mohli celý kód zaradiť do hlavného kontextu zdrojového kódu a nič by sme volať nemuseli.

Záver: Dnešný diel bol veľa teoretický, ale je to nutná teória. Do budúcnosti sa pokúsim zaradiť viac praxe a kódu.