1. díl - Úvod do AJAXu

JavaScript AJAX Úvod do AJAXu

Jak jistě většina z Vás ví, Javascript je tzv. client-side jazyk. Provádí se tedy na straně webového prohlížeče na klientském počítači a je interpretován javascriptovým interpreterem. Disponuje řadou vlastností, mimo jiné i tou, která nás teď bude zajímat nejvíce – schopností provádět asynchronní operace/úlohy.

V čem vlastně spočívá asynchronnost v AJAXu? Jde o schopnost Javascriptu zavolat na serveru nějaký skript, nebo prvek API a nečekat bezprostředně na odpověď. Místo toho pokračuje provádění kódu (uživateli se například zobrazí stránka a může s ní běžně pracovat). Když potom odpověď přijde, provádění hlavního kontextu kódu se pozastaví (dříve, či později v závislosti na prioritě prováděné úlohy) a dojde k zavolání tzv. callbacku – funkce, která se provede v případě, že ze serveru dostaneme odpověď. Takovémuto kódu, či takovéto funkci se pak říká neblokující, protože neblokuje průběh provádění skriptu čekáním na odpověď, či zpracování.

Co tedy ten AJAX je a co nám přináší? Jde o zkratku Asynchronous Javascript And XML, to nám zatím neřekne víc, než že to souvisí s XML a Javascriptem, nicméně půjdeme na to postupně a všechno si vysvětlíme.

AJAX je způsob, jak programovat v Javascriptu – není to tedy žádný nový jazyk ani framework nebo knihovna třetí strany. Jde o způsob, kterým můžeme vyměňovat data v naší aplikaci s databází, serverovými skripty (PHP, Java, ASP, atd.) aniž bychom aktualizovali/re­loadovali celou stránku, technicky vzato neaktualizujeme (ve smyslu refreshe) vůbec žádnou část naší aplikace, či stránky a v tom vlastně tkví ta "magická síla" a podstata AJAXu.

Proč se v názvu vyskytuje zkratka XML? Jednoduše je to jeden z formátů dat, ve kterém AJAX umí obdržet informaci ze serveru, nejznámější a často používané jsou JSON, XML, text, binární data. Každý z nich má něco do sebe, každý se hodí na něco jiného a používá se trochu jinak.

AJAX vám například dává možnost zkontrolovat data zadávaná uživatelem ještě než je uživatel odešle potvrzením formuláře. Do jisté míry je toho schopný i doteď známý Javascript, ale co když jde o registrační formulář s podmíněným heslem, uživatelským jménem nebo e-mailem, které musí být unikátní v rámci databáze/tabulky? Přesně pro tyto a mnohé další účely je tato technologie to pravé. Dovolí vám totiž provést ty samé operace, které byste prováděli voláním například PHP skriptů při přesměrování po odeslání formuláře, ale na rozdíl od nich vám umožní provádět tato volání na pozadí.

V tomto seriálu vám představím všechny nejčastěji používané metody pro asynchronní Javascript a naučíme se pracovat se standardem zvaným JSONP, který "obchází" SOP - Same Origin Policy. Co je to SOP a k čemu slouží, si také v průběhu seriálu ukážeme.

Dost teorie. Podíváme se na typický pří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();

Vysvětlení: Pokud se s asynchronním kódem setkáváte poprvé, nejspíš jste se při pohledu na ukázku cítili dosti zmateně, ve skutečnosti to ale není tak komplikované, jak se na první pohled zdá. Pojďme teď krok po kroku vysvětlit, co se vlastně v průběhu zpracování uvedeného kódu děje.

  1. Vytvoření funkce, kterou později zavoláme, toto není nutností, klidně můžete AJAX volat z hlavního kontextu Vašeho kódu, zde jen pro názornost.
  2. Vytvoření proměnné s názvem xmlhttp - zatím je prázdná a později se do ní uloží speciální objekt typu XMLHttpRequest.
  3. Občas se toto "klasické demo" vyskytuje v podobě bez podmínky, avšak pro účely seznámení s technikou AJAX je podle mě nutné uvést i tento "háček". Pomocí podmínky, která bere jako parametr window.XMLHttpRequest, zjišťujeme, o jaký prohlížeč se jedná. Nebo také, zda prohlížeč podporuje danou technologii, jak jste jistě pochopili z komentáře u kódu, děláme to speciálně pro Internet Explorer verze 5 a 6 – AJAXový požadavek se totiž v těchto prohlížečích vytváří trochu jinak - jako tzv. ActiveXObject – od sedmé verze IE už se ale vše píše naprosto standardně a pokud nehodláte podporovat IE5 nebo 6 můžete tuto podmínku vypustit, k ničemu vám nebude. Pro účely ukázky je nicméně naprosto stěžejní vysvětlit a ukázat, že něco jako ActiveXObject existuje.
  4. Nyní vytváříme vlastně klasický eventHandler a rovnou ho ukládáme do proměnné. Pro celistvost, je to část kódu, která říká prohlížeči, že pokud nastane určitá událost, má spustit funkci, která je uložena právě v odpovídající proměnné. Existuje více způsobů, jak pracovat s klasickými událostmi. V AJAXu se používá princip proměnné. Funkce se provede pokaždé, když xmlhttp objekt vyvolá událost onreadystatechange. V praxi se provádí skutečně vícekrát (v tom vlastně spočívá skutečná hloubka AJAXu). Jistě si všimnete, že se v této vnořené tzv. reakční funkci testují dvě proměnné na svou hodnotu. Pro začátek postačí říct, že pokud nabudou hodnot v podmínce, obsahuje například proměnná responseText, nebo třeba responseXML potřebnou hodnotu ze serveru a provede se volání na alert().
  5. Funkce open() a send() jsou záležitosti na delší vysvětlení, proto prozatím postačí sdělit, že pokud používáte metodu GET, bude to takhle stačit. V budoucnu si představíme metodu POST a s ní také malý detail, který přinese do AJAXu navíc. Funkce open() očekává tři parametry. Prvním je typ metody pro volání skriptu na serveru, druhý je jeho absolutní nebo relativní adresa, třetí je typu boolean a povíme si o něm příště, spolu s detailním rozborem zbylých dvou argumentů.
  6. Nakonec vlastně jen zavoláme naši AJAXovou funkci. Opět je to záležitost čistě estetická - klidně bychom mohli celý kód zařadit do hlavního kontextu zdrojového kódu a nic bychom volat nemuseli.

Závěr: Dnešní díl byl hodně teoretický, ale je to nutná teorie. Do budoucna se pokusím zařadit více praxe a kódu.


 

  Aktivity (3)

Článek pro vás napsal Taskkill
Avatar
Autor se věnuje vývoji na mobilních platformách a webu. Zajímá se o všechny oblasti informačních technologií a je zapřísáhlým fanouškem Open Source. Hrdě používá OS GNU Debian a všechno co je freeware.

Jak se ti líbí článek?
Celkem (12 hlasů) :
4.666664.666664.666664.666664.66666


 


Miniatura
Všechny články v sekci
AJAX
Miniatura
Následující článek
Metody GET a POST v AJAXu

 

 

Komentáře

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

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  +5 18.9.2015 18:28
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:

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  +2 18.9.2015 19:30
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

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  +1 18.9.2015 21:38
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:

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  +1 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.