Ajax Asynchronous JavaScript and XML Lukáš Klíž, Jan Richter.

Prezentace na téma: "Ajax Asynchronous JavaScript and XML Lukáš Klíž, Jan Richter."— Transkript prezentace:

1 Ajax Asynchronous JavaScript and XML Lukáš Klíž, Jan Richter

2 Obsah Co to je? XmlHttpRequest –vlastnosti a metody –stavy Ajax a javascript Ajax a jQuery Ajax a developer tools Využití Omezení –JSON-P –CORS Ošetření Alternativa

3 Co to je? Asynchronous JavaScript and XML Asynchronní výměna dat (klient server) Není třeba načítat znovu celou stránku AJAx –AJAJ: json –AJAH: html Může vrátit libovolný formát Nutnost zapnutého javascriptu Podpora v JS knihovnách (jQuery, MooTools)

4 Popis AJAXU

5 XmlHttpRequest #1 Vestavěná podpora od IE7+ IE5 a IE6 (ActiveX Object) Zkráceně XHR JS objekt (instance, vlastnosti, metody) Odeslání XML v těle žádosti Asynchronní – nečeká se na odpověď, nutno pak odpověď zachytit Synchronní – čeká se na odpověď, není třeba nijak zachytávat, ztrácí se jedna z výhod XmlHttpRequest

6 XmlHttpRequest #2.open().setRequestHeader().send().onreadystatechange – spustí uloženou funkci při změně readySate (pouze pro async).readyState.status (200 - OK).responseText/.responseXML XmlHttpRequest vlastnosti a metody

7 XmlHttpRequest #3 STAV: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready XmlHttpRequest - stavy

8 Ajax a javascript #1 Zaslání požadavku: var xhr = new XMLHttpRequest(); xhr.open("post", "/cilovyScript.php", true); xhr.setRequestHeader("hlavička", "hodnota"); xhr.send("parametr1=hodnota1&parametr2=ho dnota2"); Ajax a javascript #1

9 Ajax a javascript #2 Přijetí odpovědi ze strany serveru Odchycení odpovědi: xhr.onreadystatechange=function() { if (xhr.readyState==4 && xhr.status==200) { console.log(xhr.responseText); } } xhr.open("GET","ajax/info.txt",true); xhr.send(); Pro JSON: JSON.parse(xhr.responseText) xhr.responseType = "JSON“ Ajax a javascript #2

10 Ajax a jQuery #1 $.ajax({ type: "POST", url: "some.php", data: { parametr1: „hodnota1", parametr2: „hodnota2" } }).done(function(data) { Console.log(data); }); Ajax a jQuery #1

11 Ajax a jQuery #2 Handlers: –.done() –.fail() –.always() Shorthands: –.get() –.post() –.getJSON() Ajax a jQuery #2

12 Ajax a developer tools

13 Příklad #1 http://watcher.czechbattlefield.info/ Zobrazení hráčů na serveru a dohledání informací o nich 32 hráčů, 1 hráč (1 dotaz) = 0,5 – 2 sekundy Řešení: Ajax Dotazy jeden po jednom Jakmile získá odpověď, zobrazí výsledek Jednoduché API Příklad

14 Využití #1 Pohodlí pro uživatele (příklad, +/- hlasování, našeptávače, komentáře)příklad Chat (příklad)příklad Iluze rychlejšího načítání (mobilní samoobsluhy) Single page app (jako desktopová aplikace) Lazy loading (sociální tlačítka, obrázky, příklad)příklad Infinite scroll (FB, Twitter, příklad)příklad API (JSON), vnitřní, veřejné Využití

15 Omezení Maximum otevřených spojení (na jednu doménu/celkově) –Srovnání prohlížečůSrovnání prohlížečů Same-origin policy – data jsou přijímány ze stejného zdroje, odkud směřovala žádost (stejný protokol, port a host – ani subdomény), lze obejítobejít návrh W3C -> CORS (Cross-origin resource sharing) Omezení

16 JSON-P JSON with padding Je třeba podpory na straně serveru Posíláme žádost na jinou doménu skrze s callback funkcí <script src =„http://nic.cz/api?jsonp=zabaleno“ Server odpověď (data v JSON) obalí do podoby funkce, např: zabaleno({data1:hodnota1}) Stejnojmenná funkce je definována na straně klienta - zobrazí obsah – nutno ošetřit! JSON-P

17 CORS XMLHttpRequests na jiné domény Funkční GET i POST (JSONP pouze GET) Musí být povoleno na straně serveru Podpora v prohlížečích (IE8-9,IE10+): –Posílá v hlavičce origin: stránka –Server odpovídá Access-Control-Allow-Origin: které stránky mají povoleno takto přistupovat –Povolení přístupu ze všech stránek (vhodné pro veřejná API apod.): Access-Control-Allow-Origin: * CORS

18 Ošetření Především pro data z cizích zdrojů Nevkládat obsah odpovědi přímo do stránky, ale využít innerHTML či parse() – znemožní XSS útok Ošetření vstupů Ověření uživatele (API klíč, autentizace…) Omezení počtu dotazů (veřejná API) Ověřit datový typ Ošetření

19 Nevýhody Špatně použitelné URL (bookmark apod.) SEO (indexovací roboti) Screen reader – odečítač, pro nevidomé apod. Chování aplikace při refresh a použití historie Nutnost JS Nevýhody

20 Alternativa Web Sockets –obousměrné spojení klient-server – komunikace v reálném čase (TCP spojení) –Cross origin –Malá datová náročnost –Lze využít pro push notifikace firebase (noSQL databáze, příklad)firebasepříklad Podpora v prohlížečích: IE10+, Android 4.4 Comet –klasický HTTP dotaz, server nechá spojení otevřené Alternativa

21 Zdroje http://www.w3schools.com/Ajax/default.asp http://www.zdrojak.cz/clanky/cross-site- xmlhttprequest/ http://www.zdrojak.cz/clanky/cross-site- xmlhttprequest/ http://ondras.zarovi.cz/slides/ajax http://www.w3schools.com/dom/dom_http.asp https://api.jquery.com/jQuery.ajax/ https://developer.mozilla.org/en- US/docs/Web/API/XMLHttpRequest https://developer.mozilla.org/en- US/docs/Web/API/XMLHttpRequest http://enable-cors.org/ Zdroje

22 Závěr Děkujeme za pozornost