AJAX

1. AJAX AsynchronousJavaScriptand XML Lukáš Masopust 2010

2. Kde se vzal tu se vzal AJAX • 1998 • Microsoft představil novou technologii nazvanou Remote Scripting, ve které v klientském prohlížeči běžel Java applet komunikující se serverem, přičemž tento aplet poskytoval služby JavaScriptovým funkcím. • Tato technika komunikace fungovala v MSIE od verze 4 i v Netscape Navigatoru od verze 4. • V páté verzi IE zavedl Microsoft objekt XMLHttpRequest, který v roce 2000 využil v novém programu Outlook Web Access (OWA), který poskytuje webové rozhraní pro přístup k e-mailům na Microsoft Exchange Server (první AJAXová aplikace). • 2004 • Článek Ajax: A New Approach to Web Applications(Ajax: Nový přístup k webovým, Jesse James Garretta.

3. Avšak začátky… • 1996 • IFRAME ve Microsoft Internet Explorer 3.0 • 1997 • Element LAYER v Netscape Navigator 4.0 • Tento koncept byl opuštěn na počátku vývoje Mozilly. • Také Macromedia Flash od verze 4 umožňoval komunikaci se serverem na pozadí, bez překreslení stránky. • 2005 • Rozšíření obecného povědomí způsobily až aplikace od googlu (GMAIL).

4. Výhody a nevýhody • Načítají se jen potřebná data – snižuje zátěž serverů. • Stránka se nepohybuje jako při opětovném načtení – chová se jako aplikace. • Změna URL se musí provádět pomocí kotev (#) • Síťová latence může způsobit nečekané zaseknutí aplikace. • Nepoužitelné na mobilních zařízeních. • Neprůchodné roboty vyhledávačů. • Velké knihovny funkcí (frameworks)

5. Jak to pracuje? JavaScript DOM XML

6. Vzpomínáte ?

7. Jak to vše souvisí? DB

8. AJAXová aplikace OnLoad() HttpRequest Odpověď v XML Když jsem šel z Hradišťá… .OnClick() HTTP GET/POST data DB

9. XmlHttpRequest • XMLHttpRequest (XHR) je rozhraní umožňující webovým aplikacím komunikaci mezi serverem a klientem prostřednictvím protokolu HTTP. • Spojení může probíhat na pozadí - bez přímého řízení prohlížečem – odtud název Asychnonní či na popředí, kdy adresu, na kterou posíláme požadavek vidíme v adresném řádku.

10. XmlHttpRequest – Logická Struktura • OnReadyStateChange • ReadyState • Popisuje změny stavů HTTP spojení, resp. odeslání požadavku. • Status • HTTP stav (např. 200). • Request • Sestavení požadavku. • Response • Získání odpovědi.

11. Jak probíhá komunikace Otevřeme spojení • Sledujeme jeho stav: • Readystate • State Čekáme na změnu stavu (odpověď) Zpracujeme odpověď

12. XmlHttpRequest – Sestavování požadavku • Metodaopen(method, url, async, user, password) • metoda HTTP požadavku (GET, POST, …), • kam to pošlem, • na pozadí/popředí (false/true), • ostatní může být využito pro autentifikaci. • MetodasetRequestHeader() • nastavení HTTP hlavičky (např. Accept-Charset, content-type) • Metodasend(<post data>) • Odešle požadavek. • Metodaabort() • Ukončí probíhající požadavek.

13. Stav sestavení spojení - ReadyState Prostřednictvím vlastnosti readyState můžeme zjišťovat, v jaké fázi se nachází náš HTTP požadavek. Vlastnost vrací jednu z následujících hodnot, podle stavu HTTP požadavku. • UNSENT(čísleně 0) • Objekt byl vytvořen. • OPENED(čísleně1) • Zavolání metodyopen() bylo úspěšné. • HEADERS_RECEIVED(číselně 2) • Všechny HTTP hlavičky byly odeslány. • LOADING(numeric value 3) • Odpověď od serveru je právě odeslána. • DONE(numeric value 4) • Přenos dat byl dokončen nebo došlo k nějaké chybě během přenosu.

14. XmlHttpRequest – ReadyStateChange Při asynchronním volání nečeká prohlížeč na odpověď – nemá nad tím kontrolu. Musíme si to obsloužit samostatně. • UNINITIALIZED(čísleně 0) - objekt XmlHttpRequest byl vytvořen, ale ještě nebyla volána metoda open() . • LOADING(čísleně 1) - před odesláním HTTP požadavku (metoda open() již byla zavolána, nikoliv však metoda send()) . • LOADED(čísleně 2) - metoda send() již byla volána, stavový řádek a HTTP hlavičky jsou k dispozici, nikoliv však tělo odpovědi . • INTERACTIVE(čísleně 3) - část dat již byla přijata, vlastnost responseText obsahuje získaná nekompletní data. • COMPLETED(čísleně 4) - všechna data odpovědi byla přijata, všechny operace byly dokončeny.

15. XmlHttpRequest-získání odpovědi I. • MetodagetResponseHeaders() Slouží k vynucení si konkrétní HTTP hlavičky. var client = newXMLHttpRequest(); client.open("GET", "test.txt", true); client.send(); client.onreadystatechange = function() { if(this.readyState == 2) { print(client.getResponseHeader("Content-Type")); } } // ...Odpověď bude vypadat přibližně takto: Content-Type: text/plain; charset=utf-8

16. XmlHttpRequest-získání odpovědi II. • Medota getAllResponseHeader() Slouží k vynucení si všek HTTP hlaviček. print(this.getAllResponseHeaders()); // ...Odpověď bude vypadat přibližně takto: Date: Sun, 24 Oct 2004 04:58:38 GMT Server: Apache/1.3.31 (Unix) Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/plain; charset=utf-8

17. XmlHttpRequest-získání odpovědi III. • Response Entity Body • Objekt typu DOMString obsahující odpověď. • Jeho obsah je vysílán, když je stav spojení (readystate =3 | 4) je ve stavu LOADING či DONE. • Vlastnosti • responseText • textová podoba odpovědi (plain/text) • responseXML • xml podoba odpovědi.(text/xml).

19. A půjdeme na XML

20. XML (eXtensible Markup Language) • Technologie se dnes využívá zejména k integraci aplikací a ve sféře B2B (výměna informací). • Sjednocení formátu pro výměnu dat • XML je jen struktura – nemá vizuální podobu. • Můžeme použít i vlastní značky – vlastní DTD. • „XML je softwarově a hardwarově závislý nástroj pro přenos informací“

21. Historie • 1986 • SGML (Standard Generalized Markup Language) • Obecný značkovací jazyk, který není závislý na používaném programu. • Vyvinula IBM jako řešení pro ukládání velkého množství právních dokumentů. • HTML je aplikací SGML, které vytvářeli spíše tvůrci prohlížečů <- vznik W3c. • 1998 • Vznik XML jako prostředku pro jednotnou výměnu dat.

22. Elementy a struktura <?xmlversion="1.0" encoding="windows-1250"?> Deklarace XML – určuje použité kódování <feedxmlns="http://www.w3.org/2005/Atom" xml:lang="cs-CZ"> … </feed> Kořenová značka Parametr a atribut Odkaz na XML schéma <author> <name>SPŠE V Úžlabině 320 - Suplování</name> <email>info@uzlabina.cz</email> </author> Obsah elementu

23. Datový model I. • Deklarace (názvy) • Každá aplikace musí být schopná zpracovat xml soubor v kódování UTF-16, častěji se používá UTF-8 kvůli kompatibilitě se staršími aplikacemi. • <značky> se píší malými písmeny. • <jméno></jméno>, <Прагa></Прагa> • Vyhrazené znaky • Jen pět. • Ostatní lze dodeklarovat pomocí <!ENTITY nbsp “&#160“>

24. Datový model II. • CDATA • <![CDATA[" andendswith "]]> • Instrukce pro zpracování • Řídicí informace, které jsou určeny pro jiné apikace. • Parser je ignoruje – nehlásí chybu. • Jmenné prostory • Definuje k čemu, které značka. • Např.: HTML 4.01. a značka <p> • <script> • <![CDATA[" • for (i=0; i < 10; $++) • { document.writeln("<p>Ahoj</p>"); • } • "]]> • <script>

25. Datový model III. • Syntax • Dobře strukturovaný – syntakticky správně • Kontrola je prováděna automaticky  • Bílé znaky • Neviditelné znaky – tabulátor, mezera, odřádkování • Projeví se jako textové uzly jen s těmito znaky

26. Datový model III. • Bílé znaky • <!ATTLIST výpis-kódu xml:space (default|preserve) `preserve`> • default - tato hodnota značí, že aplikace může pro zpracování bílých znaků v textu, který je obsahem příslušného elementu, použít své výchozí nastavení • preserve - tato hodnota aplikaci říká, že všechny bílé znaky je potřeba zachovat v nezměněné podobě. • Dědí se na všechny značky

27. Berners-Lee said that in the context ofthe Semantic Web, the word "semantic" meant "machine processable." December 06, 2000 XML 2000

28. Zdroje • http://cs.wikipedia.org/wiki/XMLHttpRequest • http://www.w3schools.com/ajax/default.asp • http://php.vrana.cz/ajax.php • http://citron.blueboard.cz/clanek-239-ajax-navod-pro-zacatecniky.html • http://www.w3.org/TR/XMLHttpRequest/#notcovered • http://www.w3schools.com/XML/xml_dom.asp • http://www.zive.cz/clanky/xml-pro-web-aneb-od-teorie-k-praxi-14dil---xmlhttprequest/sc-3-a-110710/default.aspx • http://www.anaesthetist.com/mnm/javascript/netlay.htm • http://www.abax.cz/img/xmlfeed.gif • http://www.webfaq.cz/clanek/XML-a-znackovaci-jazyky-historie-a-vznik • http://www.w3schools.com/xml/xml_whatis.asp