Ajax pomocí JQuery snadno a rychle

Jak jste si jistě všimli, tak na TečceCZ se dnes objevila možnost klikacího hodnocení článků a komentářů pod nimi - ale o tomto se ještě dlouze rozepíšu v nějakém příštím dlouhém, nudném a stylisticky toporném článku - tady vás s tím nebudu zdržovat - a počkám si, který z nových článků si získá lepší hodnocení, abych věděl, o čem si rádi čtete: samotná čtenost článku totiž příliš nevypovídá o tom, kolika lidem se tenhle článek líbil a kolika ne.

S technologií Ajax [en.wikipedia.org] (Asynchronous Javascript and XML) jsem se poprvé seznámil cca před třemi lety, na začátku své krátké kariéry bulvárního programátora (šlo o český videoserver Stream.cz - ovšem stopy mého programátorského působení tam během let pozvolna tlejí a mizí pod nánosem jiných krátkodechých výplodů). Tamní dvojice jacscriptových, HTML a CSS coderů (nevím proč - ale šíleně mi přípomínali spoustu všech možných komických dvojic z historie kinematografie - od Laurela a Hardyho až po Jakea a Mlčenlivého Boba) zpočátku používala multiplatformní toolkit prototype - ale ke konci mé krátké a a zejména ke konci dosti strmé (rozuměj: ve směru dolů, nikoliv vzhůru) kariéry se už hodně mluvil o JQuery [www.jquery.com] - a na platformu JQuery kolem sebe slyším chválu i v posledních měsících - takže když přede mnou vyvstala naléhavá nutnost co nejrychleji znovunaprogramovat funkci, kterou jsem kdysi pro Stream.cz programoval (celé měsíce) jako směsici Pythoního kódu, Tengových šablon a Javascriptu využívajícího knihovnu Prototype, tak jsem sáhl právě po tomto toolkitu. A abych udržel celou problematiku v hlavě déle než cca 1 hodinu a tím pádem moje stárnoucí dlouhodobá paměť dostala šanci si tuto syntaxi zapamatovat a já si příště nemusel znovu číst celou dokumentaci od začátku, tak vás nyní budu obtěžovat tímto pro někoho určitě redundantním, pro jiného zase nezajímavým článkem.

Co se Ajaxu týče, tak zapomeňte na to slovo XML v názvu: parsovat na straně klienta XML je pro naprostou většinu aplikací zbytečně pracné a zdlouhavé. Navíc zákaz cross-site scriptingu (který má určitě své bezpečnostní odůvodnění jako výchozí nastavení nově načtené stránky - ovšem na rozdíl od např. nedůvěryhodného certifikátu ho nelze ani nijak obejít nějakým snadným potvrzením vyjímky v nějakém vyskakovacím okně, či tak něco) značně omezuje možnosti toho, odkud by vlastně klient mohl to XML načítat: může ho načíst pouze ze stejné domény, ze které pochází samotný javascriptový kód, a je vymalováno.

Nejčastějším využitím metody Ajax v browserech tedy zůstává jednoduše načtení a/nebo nahrazení určitého fragmentu HTML kódu webové stránky jiným fragmentem: moderní browsery takovouto změnu dokáží okamžitě zobrazit - a to je přesně to, co Web 2.0 sajty jako Facebook nebo YouTube (a nebo třeba i ten videosajt, pro který jsem pracoval a nebo složitější aplikace jako Gmail.com) dokáží velice efektně využít pro různé rozbalování a sbalování jednotlivých odstavců na stránce a dynamickou náhradu jednotlivých fragmentů kódu na základě okamžitě odezvy serveru. A vy to na svém blogu, e-zinu, e-shopu či prostě webu rozhodně chcete mít možnost uplatit taky - a co je důležité - NESMÍTE se přitom nechat odradit výhrůžným zastrašovacími bojovými barvami, kterou byla celá technologie pomalována, aby to vypadalo, že jí dokážou (na rozdíl od prostého HTML) ovládnout pouze profesionálové.

V podstatě vše, co jsem na TečceCZ pro implementaci hodnocení článků a komentářů použil, byla jediná metoda load() [api.jquery.com] - přičemž způsob, kterým jsem jí použil, byste mohli snadno vyčíst ze zdrojáků jednotlivých stránek TečkyCZ, ale ten HTML kód, který zdejší prastaré PHP skritpy blejou, je příšerný - v podstatě jde o plynulou směsici všeho možného od nejstarších HTML/1.0 "quirks" až po nejnovější HTML/50.0 vychytávky a opožděnou snahu dodržovat soudobé konvence kódování... ten kód by samozřejmě nedokázal validovat nikdo a nic podle žádné existující specifikace, a tak mi nezbývá, než plánovat do budoucna kompletní přepsání všeho... a tak vám raději nejzajímavější fragmenty přepíšu sem. V podstatě jde všude jen o toto:

<span id="clanekXXXX"><span class="plus" onClick="$('#clanekXXXX').load('/rate.php?plus=1&clanek=XXXX')">+</span>
H/P <span class="minus" onClick="$('#clanekXXXX').load('/rate.php?plus=0&clanek=XXXX')">-</span></span>

H je celkové hodnocení (kladné nebo záporné), P je počet hodnocení­, a za XXXX si samozřejmě dosaďte číslo článku (případně komentáře, kde je použit naporosto stejný princip). Je asi jasné, že celý tento fragment HTML generuji pomocí dalšího ohavného a nesrozumitelného fragmentu PHP kódu - mimochodem ano, dnešní práce mě opět utvrdila v tom, že PHP je zlo, a že žádný svůj další web už nikdy nechci programovat v PHP (na druhou stranu - je také pravda, že to, co by v robustním, ale složitém systému několika různých vrstev frameworků používaných např. u mého někdejšího bulvárního zaměstnavatele trvalo naprogramovat a otestovat možná i několik dní - to jsme dnes měl hotové za dvě hodiny).

Ale samozřejmě - řešil jsem ještě jeden problém: pokud bych pro to plus a minus a použil klasický HTML/1.0 tag <a href=...>, tak i v případě, že bych JavaScript na tag pověsil pomocí atributu onClick a nezadal ho jako URL, tak se mi stejně stránka po každém prokliku celá znovu načte. Což samozřejmě nechci. Jenže soudobé HTML je skládanka, v rámci které je možné lepit myší události na naprosto jakékoliv elementy: zbývalo tedy vyřešit jediný problém - který mimochodem některé z webů, které navštěvuji, dodnes vyřešený nemají: a sice změnu tvaru kurzoru myši, pokud se nachází nad + a nebo -. A hle: on v CSS existuje styl cursor:pointer ! Jako pro člověka, který jako webmaster pracoval již v roce 1995 a později sám naprogramoval HTML parser (a popravdě i celý jednoduchý browser) je pro mě rozhodně zajímavé sledovat, kam se vývoj celé platformy ubírá - a i když je to dnes daleko více než v 90. letech celé zahalené kouřovými clonami pro skrytí jádra věci

A teď je ten pravý čas vysvětlit, proč pokládám právě Javascriptové toolkity jako je JQuery za příklad toho, jak si programátoři skrze open source přístup vynucují multiplatformní kompatibilitu. Zdůvodnění má několik částí, které spolu souvisí jen volně:

1. Javascript (stejně jako jakýkoliv jiný interpretovaný = skriptovací jayzk) je z principu open source - čtení zdrojového kódu lze sice uživatelům skriptů znepříjemnit různými metodami obfuskace (mlžení), ale nelze jim ho znemožnit. Pozor - toto nic nevypovídá o licenci, pod kterou je daný fragment kódu zveřejněn ! - autor může jistě javascriptový fragment opatřit copyrightem a vyslovit přání, aby nebyl kopírován. Nemůže ale z principu zabránit tomu, aby tento fragment byl (kromě strojového zpracování interpreterem, např. webovým browserem) pochopen každým, kdo v dostatečné míře ovládá syntaxi daného jazyka. (V podstatě tedy u skriptu nelze skrýt sémantiku sdělení - pokud jsem se toto spíše humanitně-vědní slovo naučil používat ve správném kontextu).
2. Platformami podporujícími JavaScript jsou již téměř 15 let webové browsery: jenže prvních téměř 10 let existence byly nekompatibility (ať už záměrné, nebo náhodné/lajdácké) mezi Internet Explorerem a Netscape Navigatorem (později Mozilla Firefoxem) tak velké, že žádný programátor cenící si své pověsti by se do skriptování v JavaScriptu nepustil (nebo rozhodně ne zadarmo, jako já dnes). Navíc v podstatě dlouho ani neexistovala dokumentace nekompatibilit, takže JavaScript se dlouho bastlil spíš jakýmsi kopírování mini-fragmentů kódu odjinud - a v jiných browserech, než pro které byla stránka původně navržena, byl většinou úmyslně blokován. Tato nekompatibilita nebyla zcela nepodobná zbytečným nekompatibilitám mezi jednotlivými dialekty jazyka Basic na jednotlivých typech domácích 8.bitových počítačů 80. let 20. století - jenže tehdy většinou mezi jednotlivými platformami ani nešlo přenášet jakákoliv data, vzhledem k nekompatibilitě datových nosičů (to se zdá dnes už jen stěží uvěřitelné - ale bylo tomu skutečně tak).
3. Pokračováním v tomto trendu více či méně úmyslných nekompatibilit byla i původní implementace Ajaxu ve Firefoxu a v MSIE - bez ohledu na to, kam vývoj dospěl dnes (já to nestíhám sledovat) byl původně Ajax v MSIE implementován jakožto ActiveX objekt, zatímco ve Firefoxu šlo o nativní objekt celého prostředí. Od programátorů se tedy zřejmě očekávalo, že pokud vůbec Ajax implementují, tak pouze pro jednu platformu - a každý složitější web tedy bude od začátku "zavirován" výstražnou hláškou "optimalizováno pro browser XYZ", jak to bývalo běžné třeba před deseti lety.
4. Programátoři se ovšem tentokrát naštvali a domluvili mezi sebou a využili nových zajímavých vlastností, které se mezitím v JavaScriptu objevily, a které čirou náhodou už fungují multiplatformně: vznikly tak multiplatformní toolkity, jako je třeba JQuery. Tyto toolkity obalují dílčí části kódu, které jsou závislé na platformě, univerzálními metodami a funkcemi, které programátorům usnadňují práci.
5. A co je nejlepší: než stihl Microsoft jakkoliv zareagovat, tak vzniklo takové množství multiplatformně přenositelného kódu, že nyní je už návrat ke špinavým praktikám z 90. let 20. století téměř nemožný. Prakticky poprvé tak vznikla skutečně globální platforma - na které není šíření programů a dat bržděno ani nekompatibilitami např. mezi různými formáty disket a filesystémů, ani nekompatibilitami mezi prohlížeči.
6. Pokud dnes vaše oblíbená aplikace funguje jak na prohlížeči Chrome (např. v mobilech s OS Android ?), tak i v Opeře - o Firefoxu nebo MSIE už ani nemluvím - tak je to právě zásluha multiplatformních hacků typu JQuery.
7. Zpětnou kompatibilitu si v budoucnu budou moci jak programátoři, tak i uživatelé stále častěji vynutit podobnými postupy kolektivního nátlaku - a velké korporace tak postupně, krok za krokem, ztratí kontrolu nad tím, zda jejich platforma je nebo není kompatibilní s jinou platformou.

A na závěr bych měl jednu zvláštní prosbu: poprosil bych, aby ti z vás, kteří si dokáží "reverzním inženýrstvím" zjistit, jak jsem zamezil opakovanému hodnocení článků i komentářů z webového browseru, aby se třeba v komentářích pochlubili tím, že to vědí - ale aby samotný postup neprozrazovali :-) Ano, není to zabezpečené v podstatě nijak - přesto uvítám každý den, během kterého bude stačit toto základní primitivní zabezpečení, a já nebudu muset sahat k dalším trapným, pracným a v podstatě nefunkčním omezením. Pomozte mi prosím udržet možnost anonymního komentování i hodnocení příspěvků na TečceCZ alespoň tak, že nebudete obcházet moje laxní zabezpečovací mechanismy, které tuto anonymitu umožňují... v podstatě tedy už dnes vymýšlím nějaké další úrovně zabezpečení, aby k hodnocení nešlo zneužívat např. primitivní web-boty, apod. (snad potrvá alespoň den nebo dva, než se k tomuto odhodlá někdo alespoň trochu technicky zdatnější z těch, kdo mé články nemají rádi...)

Jinak samozřejmě uvítám, pokud si někdo zpětně projde i dřívější diskuze na mém e-zine, a dá si tu práci poctivě "zmoderovat" i již ukončenou debatu. Časem si ještě rozmyslím, jak zvýrazním (nebo naopak skryji) extrémně kladně (nebo naopak extrémně záporně) hodnocené komentáře (ale o tom se více rozepíšu v příštím plánovaném článku).

Interaktivnímu webu zdar !