BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.


 

Všechny články v sekci
Ajaxu
Článek pro vás napsal Taskkill
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje teorii programovacích jazyků, typové teorii, programovacím paradigmatům a jejich výuce.
Aktivity (1)

 

 

Komentáře

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:18.9.2015 18:28

No, na úvod do AJAXu poměrně dobré, ale představoval bych si tu i další informace, hlavně ukázku s jQuery, které se hojně využívá a velmi ulehčuje samotné volání a práci s AJAXem.

Určitě bych také vysvětlil rozdíl mezi POST/GET, jelikož čtenář význam těchto pojmů nutně znát nemusí.

Odpovědět
18.9.2015 18:28
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:18.9.2015 19:30

Díky za komentář... co se týká jQuery, snažím se jí držet si od těla... ale určitě se tu něco takového objeví... POST/GET jsou už v hotovém druhém díle o posílání dat na server, třetí oproti tomu bude o obdržení odpovědi... pojal jsem to hodně zvolna... časem až se k tomu dosteneme s celým seriálem, chtěl bych pracovat i na obtížnějších věcech a postupech.

 
Odpovědět
18.9.2015 19:30
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:18.9.2015 21:38

Na jQuery není nic špatného, je to skvělá knihovna, která ulehčuje mnoho věcí a řeší kompatibilitu mezi prohlížeči. Možná by bylo dobré napsat někdy později menší článek, který bude ukazovat jak udělat předchozí věci v jQuery a ukázat, že tam to je v podstatě hned. :)

Odpovědět
18.9.2015 21:38
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:18.9.2015 23:47

Nebráním se tomu... to že si jí držím od těla neznamená, že budu popírat její výhody. Nicméně pár much by se taky našlo ;D no flame .

 
Odpovědět
18.9.2015 23:47
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.