1 / 7

4IT445 – UI

Ing. Jan Mittner. 4IT445 – UI. Osnova. AJAX JSON jQuery. AJAX. A synchronous J avaScript a nd X ML AJAX je technika kombinace Javascriptu a XML umožňující asynchronní dotazování Javascriptu na server bez nutnosti přenačtení celé HTML stránky

binta
Download Presentation

4IT445 – UI

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ing. Jan Mittner 4IT445 – UI

  2. Osnova • AJAX • JSON • jQuery

  3. AJAX • Asynchronous JavaScript and XML • AJAX je technika kombinace Javascriptu a XML umožňující asynchronní dotazování Javascriptu na server bez nutnosti přenačtení celé HTML stránky • AJAX využívá objekt XMLHttpRequest, který asynchronní komunikaci umožňuje • AJAX pomohl přiblížit webové aplikace možnostem a způsobu ovládání desktopových aplikací

  4. XMLHttpRequest • XMLHttpRequest představuje API DOM struktury stránky • Internet Explorer implementuje XMLHttpRequest jako zvláštní ActiveX objekt, ostatní prohlížeče ho implementují jako standardní javascriptový objekt • základní funkce a atributy: • open() – nastavení požadavku (URL, metoda odeslání atd.) • send() – odeslání požadavku • readyState – stav požadavku (hodnota 4 = hotovo) • onreadystatechange – nastavitelná funkce (listener) vyvolaná změnou hodnoty atributu readyState • status – stav odpovědi (hodnota 200 = úspěch) • responseText – vrácený text odpovědi

  5. JSON • JavaScriptObjectNotation • jednoduchý, ale hojně využívaný standard pro sdílení dat napříč různými programovými prostředími • http://json.org/ • JSON definuje jednoduchý, univerzální, stromový formát dat se základní unifikovanou sadou datových typů • každé programové prostředí následně implementuje vlastní převodník dat z / do JSON formátu • JSON se nejčastěji využívá v rámci AJAX aplikací pro sdílení čistých dat mezi klientem (zpravidla interpretovaných Javascriptem) a serverem

  6. jQuery • jeden z nejpoužívanějších javascriptových frameworků • http://jquery.com/ • jQuery je dostatečně funkční a flexibilní, ale zároveň velmi snadné na použití a naučení • nabízí balíček jQuery UI se základní sadou standardních vizuálních komponent • http://jqueryui.com/ • nabízí velkou škálu rozšíření od početné komunity • http://plugins.jquery.com/

  7. Úkoly • vytvořte odkaz, který po kliknutí načte detail produktu pomocí AJAXu • zobrazte tento detail produktu v dialogovém okně jQuery UI • nachystejte odkaz, který po kliknutí zobrazí počet produktů v jednotlivých rubrikách • domácí úkol: transformujte administraci produktů do interaktivní podoby • mazání produktů realizujte AJAXem • za bonusový bod: formulář pro přidání / úpravu produktu realizujte dialog oknem jQuery UI a data posílejte / načítejte AJAXem

More Related