WebDev.wiki > Návody pro webmastery a vývojáře > Získávání dat (AJAX)

Získávání dat (AJAX) - JQuery

vydáno: 26.12.2016, seriál: JQuery

Toto je 5. díl seriálu JQuery, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

V předchozích dílech už jsme si řekli, jak vybírat elementy s jQuery, jak používat vizuální efekty a jak pracovat s událostmi ve webové stránce.

Další už téměř standardní součástí dnešních webových aplikací je způsob, jakým získávají data z centrálních úložišť - serverů.

Nová éra

Dříve se veškeré HTML včetně dat generovalo na straně serveru a odesílalo k zobrazení do webového prohlížeče pomocí serverového jazyka (především PHP, ale i Ruby, Python, Java, .NET). Spousta webových stránek tak samozřejmě stále funguje a stále se hojně používají řešení generující HTML na straně serveru (například Wordpress nebo Nette) pro velmi standardní situace, jakou je třeba normální firemní stránka.

Pokud ale chcete dnes vytvořit něco, o čem si ostatní řeknou "WoW", tj. webovou aplikaci, která se bude rychle načítat, rychle reagovat, bude mít vizuální efekt na téměř každém kliku a bude se chovat jako opravdová (desktopová) aplikace, u které nebudete muset pár sekund čekat, než zareaguje na interakci (než se znovu celá vygeneruje a načte ze serveru a zobrazí) - budete chtít použít JavaScript.

V době psaní toho článku už je velmi populární programovat webové aplikace, která mění stavy čistě pomocí JavaScriptu a z centrálních úložišť načítat jen data, která opravdu musí být někde centrálně uložena (např. přihlašovací údaje uživatele).

Místo toho, aby se na serveru generovalo celé HTML webu znovu a znovu nyní serverový skriptovací jazyk generuje jen čistě vyžadovaná data a odesílá je obvykle v některém populárním formátu dat.

Načtení jen části HTML ze serveru

Nejjednodušší způsob, jak můžeme z webové stránky načítat pouze tu část HTML, která se má změnit, je metoda load(). Představme si, že na našem serveru používáme PHP a máme tudíž skript /index.php, který nám při prvním načtení vygeneruje celé HTML stránky (včetně CSS a našich JavaSkriptů). Naše stránka bude obsahovat podstránky Welcome a Contact. Když na jednu z těchto podstránek budeme chtít přejít, náš JavaScript se připojí na PHP skript /page.php?page=podstránka a stáhne si z něj HTML, které bude odlišné pro danou podstránku. Skript page.php bude samozřejmě přizpůsoben naší aplikaci tak, aby negeneroval žádné HTML navíc.

Ukázka:

Javascript

function menuItemClick()
{
    event.preventDefault();

    // get just the portion of link after the last slash
    var page = event.target.href.split('/');
    page = page[page.length - 1];

    window.goTo(page);
}

function goTo(page)
{
    $('#content').load('/page.php?page='+page);
}

$(document).ready(function()
{
    $('nav a').click(window.menuItemClick);

    window.goTo('welcome');
});

HTML

<nav>
    <a href="/welcome">Welcome</a>
    <a href="/contact">Contact</a>
</nav>
<div id="content"></div>

Použité tagy: <nav>, <a>, <div>

Načtení jen čistě potřebných dat ze serveru

Skript na straně serveru nemusí ani generovat HTML. Stačí, když nám vygeneruje čistě titulek a obsah stránky, protože víme, že titulek bude vždy v <h1> a obsah vždy v <p>. Odpověď od serverového skriptu by tedy mohla být například ve formátu:

titulek|text

Přičemž my bychom si tuto odpověď pak pomocí JavaScriptové funkce split('|') rozdělili na dva řetězce - titulek a text - které bychom pak obalili náležitými elementy a vložili do elementu #content pomocí jQuery funkce html(). Vytvořili bychom si tak vlastní formát, v jakém si ze serveru posíláme data.

Formátů, v jakých jsou data odesílána ze serverů je spousta. Existuje několik standardů, z nichž pravděpodobně nejpoulárnější je JSON. Pokud jste o JSON formátu ještě neslyšeli, zapisujeme v něm zjednodušeně data v párech název:hodnota a tyto páry oddělujeme čárkou. Například:

{ titulek: 'Welcome!', text: 'This is the welcome page of this app!' }

JSON je populární, protože je velmi jednoduché ho pak v JavaScriptu převést na objekt. Když si představíme, že by nám náš serverový skript odeslal odpověď - řetězec (String) ve výše zmíněném formátu - v JavaScriptu bychom ho pak mohli jednoduše převést na objekt pomocí:

var response = JSON.parse(odpověďZeServeru)

A k datům bychom pak mohli přistupovat pomocí response.titulek a response.text.

jQuery get() a post()

Funkce get a post(), které nám jQuery nabízí pro načítání dat ze serveru, už automaticky počítají s tím, že data budou ve formátu JSON. Rozdíl mezi nimi je jen v HTTP metodě, jakou jsou serverovému skriptu odeslány parametry, tedy GET nebo POST.

$.get('adresa', callback)

$.post('adresa', callback)

Callback funkce se spustí při kompletním stažení dat.

Pojďme si ukázat, jak bychom načítali titulek a text stránek pomocí formátu JSON a funkce get().

Ukázka:

Javascript

function menuItemClick()
{
    event.preventDefault();

    // get just the portion of link after the last slash
    var page = event.target.href.split('/');
    page = page[page.length - 1];

    window.goTo(page);
}

function goTo(page)
{
    $.get('/page.php?page='+page, function(response)
    {
        var response = JSON.parse(response);

        var content = response.title;
        $('#content').html('<h1>' + response.title + '</h1><p>' + response.text + '</p>');
    });
}

$(document).ready(function()
{
    $('nav a').click(window.menuItemClick);

    window.goTo('welcome');
});

HTML

<nav>
    <a href="/welcome">Welcome</a>
    <a href="/contact">Contact</a>
</nav>
<div id="content"></div>

Použité tagy: <nav>, <a>, <div>

Ještě jednou pro představu: ve skriptu page.php bychom odesílali data ve formátu JSON například takto:

print json_encode(array('title' => 'Welcome!', 'text' => 'This is the welcome page of this app!'));

což by vygenerovalo výstup:

{ "title": "Welcome!", "text": "This is the welcome page of this app!" }

Komplexní funkce ajax() pro každé použití

Funkce load(), get() a post() jsou částečně konfigurovatelné, ale jsou spíše přizpůsobené konkrétnímu způsobu použití, zatímco funkce ajax() nám umožňují vytvořit request na server v různých formátech a konfiguracích.

Více informací o ajax() naleznete v referenci jQuery.

Tímto dílem máme za sebou ty nejdůležitější aspekty jQuery. V příštím díle se to všechno pokusíme prakticky použít na komplexním příkladu webové aplikace.

JavaScript: návody a průvodce

jQuery: návody a průvodce

Témata

Seriály