AJAX. Dynamické změny obsahu stránek

Rozměr: px

Začít zobrazení ze stránky:

Download "AJAX. Dynamické změny obsahu stránek"

Dana Soukupová
před 6 lety
Počet zobrazení:

1 AJAX Dynamické změny obsahu stránek

2 Co je AJAX

3 Co je AJAX

4 Co je AJAX

5 Co je AJAX

6 Co je AJAX AJAX = Asynchronous JavaScript And XML XHR = XMLHttpRequest Ajax je sada technik a nástrojů, které umožňují dynamické změny obsahu stránky, interakci s webem a načítání částí obsahu se serveru bez znovunačtení stránek.

7 Stručná historie Pokusy o přenos dat bez reloadu: "Remote scripting" Skriptovatelné Javovské applety Předávání dat přes cookies Předávání dat skrytým rámcem (iframe) (používá se dodnes "AJAX pro chudé")

8 Stručná historie "Pravý AJAX": přišel ve chvíli, kdy všechny (velké) prohlížeče implementovaly metodu XMLHttpRequest (XHR) (MSIE již v roce 1998) rozšířil se, když dostal "cool" jméno a když ho začal používat Google.

9 Princip AJAXu "V zásadě velmi jednoduchý..."

10 V Zásadě jednoduchý

11 Princip AJAXu Uživatel nějak interaguje se stránkou (klikne,...) a webová stránka by v tu chvíli měla změnit zobrazená data. Jak? 1. Data má připravená a schovaná, jen je zobrazí 2. Odešle na server požadavek, a ten vrátí novou stránku s novými daty 3. Odešle na server požadavek, a server vrátí jen požadovaná data. Stránka je musí pak zpracovat a zobrazit. AJAX!

12 Princip AJAXu Pro poslání požadavku na server se používá XHR XMLHttpRequest(). Nenechte se mást XML s XML to nemá (skoro) nic společného. XHR umí poslat asynchronní požadavek na určitou adresu Asynchronní: program pracuje normálně dál, a když se něco zajímavého stane, systém zavolá určenou funkci.

13 Princip AJAXu var xhr = createxhr(); xhr.onreadystatechange = oncomplete; xhr.open('get', '/helloworld.txt', true); xhr.send(null);

14 Princip AJAXu var xhr = createxhr(); xhr.onreadystatechange = oncomplete; xhr.open('get', '/helloworld.txt', true); xhr.send(null); function oncomplete() { if (xhr.readystate == 4) { if (xhr.status == 200) { alert(xhr.responsetext); } else { alert('error code ' + xhr.status); } } }

15 Princip AJAXu var xhr = createxhr(); xhr.onreadystatechange = function() { if (xhr.readystate == 4) { if (xhr.status == 200) { alert(xhr.responsetext); } else { alert('error code ' + xhr.status); } } }; xhr.open('get', '/helloworld.txt', true); xhr.send(null);

16 Princip AJAXu (...) xhr.open('get', '/helloworld.txt', true); xhr.send(null); server prohlížeč

17 XHR function createxhr() { var xhr = null; if (window.xmlhttprequest) { xhr = new XMLHttpRequest(); } else if (window.activexobject) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } return xhr; }

18 Princip AJAXu (...) xhr.open('post', '/helloworld.txt', true); xhr.setrequestheader( 'Content-Type','application/x-www-formurlencoded' ); xhr.send('name=pepa&age=18');

19 Princip AJAXu xhr.open('get', '/helloworld.txt', true); true říká, že má být požadavek asynchronní, tedy že prohlížeč pokračuje v práci a teprve až přijdou ze serveru data, tak se zavolá obslužná funkce. false by znamenalo požadavek synchronní, tj. prohlížeč by čekal, až se vrátí data ze serveru, a celé by to zamrzlo. Nepoužívejte synchronní požadavky!

20 Princip AJAXu Příliš mnoho věcí k zapamatování? Nepamatujte si to! Použijte rozumnou knihovnu! jquery: $.get("/helloworld.txt", null, function(){});

21 Použití AJAXu Požadavek může obsahovat jakákoli data: HTML, XML, JSON, binární data,... Můžete přistupovat k REST rozhraní máte k dispozici GET, POST, PUT,... Formát dat je zcela na vaší libovůli.

22 Použití AJAXu Odpověď od serveru může být: HTML CSS Text vykonatelný JavaScript JSON (místo AJAX se používá zkratka AJAJ) XML...

23 Prostý text Server pošle jen prostý text zpracujete pomocí xhr.responsetext(); Výhoda: extrémně jednoduchý Nevýhoda: nepřenese složitější data, jen prostý řetězec

24 HTML Server pošle část HTML, kterou si vložíte do stránky pomocí innerhtml zpracujete pomocí xhr.responsetext(); function onsuccess(xhr) { var div = document.getelementbyid('response'); div.innerhtml = xhr.responsetext; } <div id="response"> </div>

25 HTML Výhody: jednoduchá práce lze využít existující serverové nástroje (šablony atd.) Nevýhody: při změně designu musíte měnit i tyto fragmenty AJAXové rozhraní je jednoúčelové

26 vykonatelný JavaScript Odpověď od serveru je JS kód, který se na klientu spustí. function onsuccess(o) { eval(o.responsetext); }

27 vykonatelný JavaScript Výhody: jednoduché zpracování server může poslat doslova "cokoli" a vyvolat jakoukoli reakci prohlížeče, není omezen designem aplikace Nevýhody: ladění je opravdový horror

28 XML Server může poslat strukturovaná data jako XML; prohlížeče mají zabudované XML parsery, takže zpracování není složité: <person> <name>pepa</name> <age>18</age> </person> function onsuccess(xhr) { var dom = xhr.responsexml; showperson( dom.getelementsbytagname('name')[0].data, parseint(dom.getelementsbytagname('age')[0].data, 10) }); }

29 XML Výhody: Oprášíte si znalosti DOMu ;) xhr.responsexml() parsuje za nás Mnohé služby jsou založené na XML Nevýhody: Složitá práce s DOMem

30 JSON Mnohem jednodušší, stručnější formát. Dokáže popsat běžné datové struktury (seznam, pole) a je nativní součástí Javascriptu. K vyhodnocení stačí prosté eval(). POZOR!!!! eval() is evil()! Nepoužívejte přímo eval(), protože tím spustíte kód! Pokud pracujete s JSON, použijte raději specializované parsery na data.

31 CORS Pro AJAX plně platí "same-origin policy", tedy bezpečnostní politika "stejného původu". Stránka z domény a.com nemůže pomocí XHR načítat obsah z domény b.com! Nové prohlížeče přichází s podporou CORS: Cross-Origin Resource Sharing

32 CORS Stačí poslat v AJAX odpovědi hlavičku Access- Control-Allow-Origin a zadat domény, z nichž je povolen přístup pomocí XHR (nebo hvězdičku) <?php header('access-control-allow-origin: *');?>... nějaká AJAX data...

33 XHR2 podpora CORS lepší podpora pro upload (progress)

34 Takže AJAX: Zlepšuje UX (User Experience): - zrychluje práci s webovou aplikací - zjednodušuje workflow - umožňuje vytvářet "jednostránkové aplikace" Zato: - zhoršuje ladění - znesnadňuje práci s URL (nelze snadno "poslat odkaz na určitý stav") lze obejít! - bez JS je taková aplikace nepoužitelná.

Podobné dokumenty

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové aplikace

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 18.4.2016 Webové aplikace JSON, AJAX/AJAJ, zpracování na straně JS, JSONP, proxy, REST strana 2 JSON objekt JavaScript Object Notation { "nazev": hodnota, "cislo":