MS Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 2 - 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:

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

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:

  1. 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
  2. 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");
  1. 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í ;)


 

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
Taskkill
Redaktor
Avatar
Taskkill:4.10.2015 13:10

Výborně, jsem rád, že všechno běhá jak má a dodatečně se omlouvám za tu drobnou mistifikaci. Přeju hodně štěstí v dalším kódění ;-)

 
Odpovědět
4.10.2015 13:10
Avatar
asoft
Člen
Avatar
asoft:4.10.2015 15:08

Takže posledná poznámka. Ide to aj pomocou súboru kouzelnik.aspx

Vďaka za spoluprácu.

 
Odpovědět
4.10.2015 15:08
Avatar
Vít Cigánek:2.1.2016 18:06

Ono je tam ještě jedna chyba. U způsobu přes get by měl vypadat skript takto:

<?php
$attr = $_GET["get"];  //param1 a ne get
echo "Myslím, že číslo, které si myslíš je: ".$attr;
?>
 
Odpovědět
2.1.2016 18:06
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Vít Cigánek
Taskkill:2.1.2016 19:20

Diky moc, okamzite opravim.

 
Odpovědět
2.1.2016 19:20
Avatar
janci#3
Člen
Avatar
janci#3:28.4.2016 19:35

ja mám taký problém že mám AJAX funkciu ktorá mi načíta JSON objekty ale kým sa tá funkcia spraví tak mi už načíta stránku bez toho aby mi to tam zobrazilo.. vedeli by ste mi prosím poradiť ?

function getComment(){
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "getComment?id=" + index);
        xhttp.send(null);
        xhttp.onreadystatechange = function(){
                if(xhttp.readyState == 4){
                        $scope.comments = JSON.parse(xhttp.response);
                        console.log($scope.comments);
                }
        }
        }
<div ng-repeat="x in comments">
{{x.text}}
</div>
 
Odpovědět
28.4.2016 19:35
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na janci#3
Taskkill:28.4.2016 21:43

Muzes specifikovat svuj problem? Nedokazu z tveho popisu pochopit, jestli se tvoje funkce provede a dojde k vypsani dat ve spravne podobe a az nekde dal se po pokazi, nebo vubec ne .. no nevim...

Kazdopadne si oprav tohle:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
                if(xhttp.readyState == 4){
                        $scope.comments = JSON.parse(xhttp.response);
                        console.log($scope.comments);
                }
        }
xhttp.open("GET", "getComment?id=" + index);
xhttp.send(null);

pamatuj si -> nejdriv nastavit handler a pak otevrit spojeni a poslat data...

 
Odpovědět
28.4.2016 21:43
Avatar
janci#3
Člen
Avatar
Odpovídá na Taskkill
janci#3:29.4.2016 22:03

tak mal som problém s tým že tá funkcia mi išla dobre len trvala dlhšie ako načítanie stránky čiže výsledky mi zobrazilo až po reloadnutí stránky ale už som to vyriešil jednou funkciou

function getComment(vypis){
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function(){
                if(xhttp.readyState == 4){
                        vypis(JSON.parse(xhttp.response));
                }
        }
        xhttp.open("GET", "getComment?id=" + index);
        xhttp.send(null);

        }
        getComment(function(data) {
                var i;
                for(i = 0; i<data.length;i++){
                        $("#commentsDiv").append(data[i].text);
                }

a opravil som si aj ten handler ďakujem za radu :)

 
Odpovědět
29.4.2016 22:03
Avatar
Jaromír Jíra:24.8.2017 10:29

ahoj,

zkouším pomocí ajax žádosti dostávat text z txt souborů, je nějaká cesta jak dostat text včetně české diakritiky, aniž bych musel přímo v txt souboru každé písmeno s diakritikou zadávat pomocí kódu?

 
Odpovědět
24.8.2017 10:29
Avatar
Odpovídá na Jaromír Jíra
Michal Šmahel:24.8.2017 13:30

Ahoj, máš nastavené správné kódování v souboru i na výstupu? Běžně by totiž tohle neměl být problém.

Odpovědět
24.8.2017 13:30
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Šmahel
Jaromír Jíra:24.8.2017 18:18

Ahoj,
ano, mel jsem to spatne, ty txt soubory, mely defaultne nejake jine kodovani, uz je to v poradku, dekuju :)

 
Odpovědět
24.8.2017 18:18
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.

Zatím nikdo nevložil komentář - buď první!