AJAX Asynchronous JavaScript and XML Lukáš Masopust 2010

Kde se vzal tu se vzal AJAX – 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 ům na Microsoft Exchange Server (první AJAXová aplikace) – Článek Ajax: A New Approach to Web Applications (Ajax: Nový přístup k webovým, Jesse James Garretta.

Avšak začátky… – IFRAME ve Microsoft Internet Explorer – 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 – Rozšíření obecného povědomí způsobily až aplikace od googlu (GMAIL).

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)

Vzpomínáte ?

Jak to vše souvisí? DB

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

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.

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.

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ěď

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.

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.

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ě.

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

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 :58:38 GMT Server: Apache/ (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 :58:38 GMT Server: Apache/ (Unix) Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/plain; charset=utf-8

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).

A půjdeme na XML

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í“

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

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ě Suplování Obsah elementu

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;‘ "“

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 a značka <![CDATA[" for (i=0; i < 10; $++) { document.writeln(" Ah oj "); } "]]> <![CDATA[" for (i=0; i < 10; $++) { document.writeln(" Ah oj "); } "]]>

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

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

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

Zdroje zacatecniky.html zacatecniky.html dil---xmlhttprequest/sc-3-a /default.aspx 14dil---xmlhttprequest/sc-3-a /default.aspx vznik vznik