AJAX Asynchronous JavaScript and XML Lukáš Masopust 2010.

Prezentace na téma: "AJAX Asynchronous JavaScript and XML Lukáš Masopust 2010."— Transkript prezentace:

1 AJAX Asynchronous JavaScript and XML Lukáš Masopust 2010

2 Kde se vzal tu se vzal AJAX 1998 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 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 1996 – IFRAME ve Microsoft Internet Explorer 3.0 1997 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 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

6 Vzpomínáte ?

7 Jak to vše souvisí? DB

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

9 X ML H TTP R EQUEST 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 X ML H TTP R EQUEST – L OGICKÁ S TRUKTURA 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 Open('GET',URL,false); Send()Onreadystatechange()responseXML Otevřeme spojení Sledujeme jeho stav: Readystate State Čekáme na změnu stavu (odpověď) Zpracujeme odpověď

12 X ML H TTP R EQUEST – S ESTAVOVÁNÍ POŽADAVKU Metoda open( 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. Metoda setRequestHeader() – nastavení HTTP hlavičky (např. Accept-Charset, content-type) Metoda send( ) – Odešle požadavek. Metoda abort() – Ukončí probíhající požadavek.

13 S TAV SESTAVENÍ SPOJENÍ - R EADY S TATE UNSENT (čísleně 0) – Objekt byl vytvořen. OPENED (čísleně 1) – Zavolání metody open() 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. 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.

14 X ML H TTP R EQUEST – ReadyStateChange 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. Při asynchronním volání nečeká prohlížeč na odpověď – nemá nad tím kontrolu. Musíme si to obsloužit samostatně.

15 X ML H TTP R EQUEST - ZÍSKÁNÍ ODPOVĚDI I. Metoda getResponseHeaders() Metoda getResponseHeaders() Slouží k vynucení si konkrétní HTTP hlavičky. var client = new XMLHttpRequest(); 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 var client = new XMLHttpRequest(); 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 X ML H TTP R EQUEST - ZÍSKÁNÍ ODPOVĚDI II. Medota getAllResponseHeader() 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 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 X ML H TTP R EQUEST - ZÍSKÁNÍ ODPOVĚDI III. Response Entity Body 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).

18

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 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 1998 – Vznik XML jako prostředku pro jednotnou výměnu dat.

22 Elementy a struktura Deklarace XML – určuje použité kódování … … Kořenová značka Parametr a atribut Odkaz na XML schéma SPŠE V Úžlabině 320 - Suplování info@uzlabina.cz 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. – se píší malými písmeny., Vyhrazené znaky – Jen pět. – Ostatní lze dodeklarovat pomocí EntitaZnak << && >> &apos;‘ "“

24 Datový model II. CDATA – 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 <![CDATA[" for (i=0; i < 10; $++) { document.writeln(" Ah oj "); } "]]> <![CDATA[" for (i=0; i < 10; $++) { document.writeln(" Ah oj "); } "]]>

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 – – 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 of the 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://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.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.webfaq.cz/clanek/XML-a-znackovaci-jazyky-historie-a- vznik http://www.w3schools.com/xml/xml_whatis.asp http://www.w3schools.com/xml/xml_whatis.asp

29