Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


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¶metr2=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 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í

Reklamy Google