2. diel - Metódy GET a POST v AJAXu
V minulom dieli sme si vysvetlili na čo nám AJAX slúžia a ako zjednodušene funguje. Z hľadiska teórie je to dostatok pre kvalitné štart a prvotné prehľad, preto sa dnes môžeme rovno pustiť do nejakých konkrétnych príkladov.
Začneme veľmi jednoducho. Iste poznáte metódu GET. Ide o štandardnú http metódu, slúžiace poväčšinou na získavanie dát zo servera. Samozrejme to neznamená, že táto metóda nemôže odovzdávať servera dáta formou query, to bez problémov môže a tiež sa toho často využíva pre špecifikáciu požadovaných dát. Poďme teda trochu kodiÈ:
HTML súbor:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script> function magic(str) { if (str.length == 0) { document.getElementById("magician").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // tento kód se provede v okamžiku navrácení hodnoty ze serveru document.getElementById("magician").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "kouzelnik.php?param1="+str, true); xmlhttp.send(); } } </script> </head> <body> <p><b>Do inputu níže vložte volitelné číslo a nechte kouzelníka hádat!</b></p> <form> <input type="text" onkeyup="magic(this.value)"> </form> <p>Kouzelník říká: <span id="magician"></span></p> </body> </html>
Moc sa neobracajte na sémantiku alebo validnosti HTML, zabudnite pre tentoraz na neobtruzivní kódovanie a len využite tento kód ako pomerne zreteľný príklad. Než si prejdeme čo sa vlastne v tomto kóde deje, dodám ešte PHP zobraz zdroj.
PHP súbor:
<?php $attr = $_GET["param1"]; echo "Myslím, že číslo, které si myslíš je: ".$attr; ?>
Zápis HTML netreba vysvetľovať, na stránke sa objaví riadok textu,
ktoré nás vyzve na zadanie čísla, input prvok, ktoré na zadanie poslúži a
opäť riadok textu, ktoré hovorí: "Kúzelník hovorí:". Čo sa však stane,
keď do inputu vložíme / napíšeme akékoľvek číslo či znak? V zásade sa
tým spustí udalosť, ktorá očakávame za pomocou atribútu
onkeyup - v okamihu keď stlačíte klávesu sa ešte nič nedeje,
ale v momente keď ju pustíte zavolá sa funkcia magic a ako parameter prijme
súčasnú hodnotu inputu.
A teraz k AJAXu a metóde GET:
Z minula si iste pamätáte, že sa zvyčajne dodržiava určité poradie
volanie príkazov, veľa to napomáha prehľadnosti, ale aj funkčnosti kódu *.
Odporúčam dodržiavať! Nás ale teraz vlastne zaujímajú len posledné dva
riadky kódu - prvá je volanie metódy open () na objekt typu
XMLHttpRequest, táto metóda uskutočňuje, ako je zrejmé z jej
názvu niečo ako otvorenie spojenia, nie však samotné odoslanie hodnôt
(doslova ide o inicializáciu). Odoslanie obstaráva metóda send
() na poslednom riadku scriptu.
Metóda send () však nepotrebuje žiadny parameter (aspoň pokiaľ ide o GET), čo nás privádza opäť k metóde open (), ktorá prijíma tri parametre (a niekoľko voliteľných). Naposledy som vám sľúbil, že sa im budem viac venovať. Nuž teda: prvým parametrom je typ metódy, to je dôležité hlavne z hľadiska serverového API, nie vždy je totiž API napísané tak, aby podporovalo 'prehadzovania' metód GET a POST, preto je nutné používať vždy metódu, ktorá je vyžadovaná serverom. Druhým parametrom je adresa - tu sa na moment zastavíme a trochu špecifikujeme, vďaka SOP (Same Origin Policy) sme odkázaní na rovnaký server / rovnakú adresu domény ako má samotný index, teda nemôžeme na stránke www.itnetwork.cz požadovať ajax request na adresu www .mojeip.cz. Prečo tomu tak je a ako to obísť, (keď by sa tak dalo krásne spolupracovať s externými API) si vysvetlíme v inom článku tejto sekcie.
Zatiaľ teda ak chcete spolupracovať s nejakým API na spracovanie dát,
musíte celý systém na spracovanie dát pre server implementovať na svojom
serveri (alebo komunikovať s externým API pomocou serverového jazyka - JAVA,
PHP, ...). Iste ste si všimli, že posielam parameter / argument v adrese
volané metódou GET nazvaný param1, obsahujúce string z inputu,
pomocou adresy, ktorú volám - to je štandardná správanie metódy GET. Tá
posiela svoje parametre pomocou tzv. Queries - reťazca v tele adresy, ktorú
volá, má to svoje výhody, ale aj nevýhody. Tie nechám mimo tento článok,
snáď len poviem, že nespornú výhodu je, že s GET sa väčšinou nemusí
implicitne špecifikovať nič navyše ohľadom dát, ktorá posielame (viac v
POSTe - nižšie). Ak nepoznáte PHP, alebo ste nikdy nepracovali s metódou
GET, zaujíma vás iste, koľko parametrov sa takto dá poslať. Teoreticky nie
ste obmedzení konkrétnym počtom parametrov, ste ale obmedzeni konkrétnym
počtom znakov (veľmi dobre popísaná je táto problematika tu,
alebo hľadajte v slovenčine heslá ako url maximálny počet znakov). Pre
zjednodušenie pracujte s faktom, že ak budete mať celú
adresu dlhú do 2048 znakov, nemal by nastať problém v žiadnej
variácii servera, či klienta.
Ako teda spomenúť všetky parametre hromadne? Veľmi jednoducho. Kým pred
prvou parameter musíte umiestniť znak '?' otázniku, medzi každý ďalší
umiestnite znak & a potom zase napíšete názov parametra, aby
sa dal na serveri identifikovať a jeho hodnotu za znakom rovnosti, takto
opakujte dokiaľ nezmeníte všetky argumenty. Tretím a posledným parametrom
metódy open () je boolovská hodnota, táto hodnota je veľmi
dôležitá! Pokiaľ ju neuvediete, defaultne sa nastaví na
true. Pokiaľ ju uvediete ako false, dostanete
v niektorých prehliadačoch na konzolu varovanie - áno reč je o
asynchronicitě. Táto premenná určuje, či ak sa na tento AJAX požiadavka
vykonávaný asynchrónne, alebo nie. Môže sa to zdať trochu
zvláštne, veď slovo asynchrónne je hneď prvé slovo v
skratke AJAX, avšak je to tak a občas sa to aj hodí. Podčiarknuté
sčítané - pokiaľ bude hodnota uvedená ako true, bude sa
request vykonávať nezávisle na hlavnom vlákne, nebude teda blokovať priebeh
hlavného scriptu a nespôsobí "zamrznutiu" vášho kódu až do príchodu
odpovede. Pokiaľ ale bude hodnota uvedená ako false, stane sa
presný opak toho, čo som popísal o vetu skôr. Znamená to, že vlastne
rozširujete kód hlavného vlákna a úloha je tzv. Blokujúce. Na to
si dajte pozor!
Teraz AJAX a metóda POST:
Nechajte si svoj pôvodný zobraz zdroj odo mňa a vykonajte na ňom presne tieto zmeny:
- na predposlednom riadku scriptu s metódou open () prepíšte prvý parameter z 'GET' na 'POST', vyberte všetky vaše aj moje pôvodné atribúty z adresy / z druhého parametra - v adrese musí zostať skutočne len relatívna, alebo absolútna adresa na PHP script, zmažte preto aj znak '?' na konci adresy
- medzi posledný a predposledný riadok scriptu, teda medzi volanie metódy open (), ktoré sme práve upravili a volanie metódy send (), ktoré je na konci scriptu, vložte tento riadok kódu:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- na poslednom riadku scriptu, vo volanie metódy send (), ktorá predtým nepoužívala žiadne parametre, pripíšte tejto metóde parameter typu string, vlastne to bude string obsahujúce parametre, ktoré sme odobrali z riadku s open () metódou z jej druhého parametra (adresy) ( jediné čím sa líšia, je absencia znaku '?' otáznika na začiatku)
- Ak tápate, pozrite sa nižšie na ukážku.
Výborne, práve ste prepísali váš AJAX zobraz zdroj tak, aby používal metódu POST, vykonajte preto aj nutnou úpravu vo zdrojáky pre server (z $ _GET [ 'param1'] urobte $ _POST [ 'param1']). Pre názvy parametrov / atribútov môžete vymyslieť svoje vlastné označenie podľa ľubovôle - len dodržte rovnaké pomenovanie v javascriptu aj na serveri, napríklad v PHP).
Pre skontrolovanie, posledné tri riadky v JS:
xmlhttp.open("POST", "kouzelnik.php", true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("param1="+str);
a pár riadkov kódu v PHP:
<?php $attr = $_POST["param1"]; echo "Myslím, že číslo, které si myslíš je: ".$attr; ?>
Teraz si prejdeme rozdiely oproti GETu - prvým veľkým rozdielom je tvar adresy, pri použití POSTe nikdy nepíšeme atribúty / parametre do adresy (nepoužívame query), vychádza to samozrejme z návrhu a konštrukcie týchto dvoch metód. Kým GET odovzdáva informáciu / parametre v adresnom riadku (ak vám to príde čudné, odporúčam naštudovať v PHP sekcii) a nehodí sa tak napríklad pre posielanie hesiel. POST adresný riadok nepoužíva a je tiež trochu viac zabezpečený, pre soukromější informácie / dáta sa preto hodí o poznanie viac. Väčšinu z vás asi teraz zaujíma, čo tam robí ten úplne nový riadok.
Tento riadok sa používa na definovanie formátu dát, takéto nastavovanie header môže nielen u POSTe vyzerať naozaj rozlične a komplikovane, ideálne ho preto zatiaľ berte ako niečo čo tam je a byť tam musí, ak používate POST. Poslednou zmenou je pridanie parametra metóde send (), tento parameter je string so všetkými atribútmi / parametre pre metódu POST, vďaka tejto forme odosielanie máme možnosť aj pre POST povedať servera čo chceme a nepoužiť pri tom adresný riadok.
To je v rámci Javasciptu všetko, zmeny v PHP kódu a kód samotný popisovať nebudem, na to sú na sieti oveľa fundovanejšie osoby.
Odskúšanie
Teraz môžeme prejsť k tomu nejzábavnějšímu - vyskúšanie si príklade, predpokladám, že ste si nejaká testovanie prevádzali už pri mojom výklade, zhrniem to teda len veľmi rýchlo - obe metódy, ako GET tak POST sú schopné odovzdať informáciu servera. Vďaka AJAXu, resp. jeho ďalšie schopnosti môžeme tiež dostať odpoveď na otázku, však tiež nemusíme žiadnu odpoveď očakávať. Pre tieto prípady by sa hodila metóda POST, pretože tá obvykle slúži na odoslanie dát na server (ale niekedy taky k vyžiadanie dát späť), ak chceme len získať nejaké dáta, ktoré nepodliehajú bezpečnostným opatreniam, môžeme pokojne použiť GET.
Samozrejme je dnešný príklad iba ilustračné - táto funkcionalita nevyžaduje PHP na serveri, nevyžaduje dokonca ani AJAX, dalo by sa to docieliť pomocou ANGULAR, rovnako tak by sa to ale dalo napísať v "čistom" Javascriptu. Skúste si však predstaviť, že PHP komunikuje s nejakou databázou na serveri a podľa toho, akú metódu použijete a aké argumenty / parametre pošlite, je z databázy vybraná nejaká informácie a odovzdaná klientovi. Zaujímavé nie? Tomu už sa skutočne dá hovoriť komunikačné API. Skúste si sami niečo také "spichnúť", jazyk pre API a typ databázy nechávam na vás.
- Podľa dokumentácie na MDN - ak chceme aby kód fungoval, musíme o odchytávanie udalosti požiadať skôr, než odošleme požiadavka servera.
Záver:
V článku som spomenul niekoľko dôležitých vecí, jedným z nich je SOP
- teraz už poznáte význam tejto skratky a pre tie, ktoré túto tému viac
zaujíma, pripravujem článok o pravidlách k dodržiavaniu a podrobnostiach,
ktoré sú pre začínajúceho AJAXáře kľúčové. Ďalej tiež pripravujem
článok o možnosti obísť túto reštrikciu a volať za pomocou JavaScriptu
aj externej API na cudzie doméne, dokonca na voliteľnom portu, ak vás táto
problematika zaujala, zostaňte naladení 
