AJAX nejmodernější webová technologie… seminář pro učitele ZŠ a SŠ Mgr. Marek Osuchowski Ostravská univerzita © 2011.

Prezentace na téma: "AJAX nejmodernější webová technologie… seminář pro učitele ZŠ a SŠ Mgr. Marek Osuchowski Ostravská univerzita © 2011."— Transkript prezentace:

1 AJAX nejmodernější webová technologie… seminář pro učitele ZŠ a SŠ Mgr. Marek Osuchowski Ostravská univerzita © 2011

2 AJAX Asynchronous JavaScript and XML historie  element iframe v MS Internet Explorer 3.0 (1996)  element layer v Netscape Navigator 4.0 (1997)  oficiálně v roce 2005 podpora v současných prohlížečích

3 Použité technologie (X)HTML a CSS  určuje samotný obsah a vzhled webové stránky JavaScript  dynamické skriptování na straně klienta pro vytváření událostí XMLHttpRequest  rozhraní pro komunikaci mezi serverem a klientem pomocí protokolu HTTP

4 Požadavky na provoz webový server  lokálně například XAMPP nejnovější verze internetových prohlížečů  Mozilla Firefox 6  Internet Explorer 9  Google Chrome 14  Opera 11 povolen v prohlížeči JavaScript  někdy ho uživatelé vypínají z důvodu bezpečnosti…

5 Výhody AJAXu rychlost datový přenos interaktivita tvorba moderních aplikací  online hry typu Travian, Divoké kmeny apod.  našeptávače  dynamická menu

6 Nevýhody AJAXu nemožnost použití tlačítka Zpět nedochází ke změně adresy URL zátěž na server zpoždění a ztráta pocitu interaktivity nutnost znát základy programování JS

7 Princip uživatel vyvolá na www stránce událost pomocí JS proběhne spojení se serverem protokolem HTTP odpověď se zobrazí v předem definovaném bloku

8 HTML značky nadpis až  Vítejte na mých stránkách odstavec  Ukáži vám, jak funguje AJAX obrázek  odkaz  Seznam blok 

9 JavaScript - umístění u dané značky: Nějaký text v hlavičce souboru: function zmena() { příkazy v jazyce JS } v samostatném souboru:

10 JavaScript - ukázka <!-- function zmena() { document.getElementById('odstavec').innerHTML='BAF!'; } //--> Tady je nějaký text, který se po kliknutí změní...

11 XMLHttpRequest - metody open("metoda", "url", [parametry])  metoda - použije pro přenos danou metodu GET nebo POST  url – adresa požadovaného souboru  parametry – další nepovinné parametry (příznak, jméno, heslo) send()  odešle požadavek

12 XMLHttpRequest - vlastnosti readyState  aktuální stav objektu: 0 = neinicializovaný, 1 = nahrává se, 2 = nahraný, 3 = interaktivní, 4 = dokončený responseText  požadovaný text, který nám server poslal status  návratový kód odpovědi, např.  404 pro nenalezenou stránku  200 v případě úspěchu statusText  text, který doplňuje návratový kód odpovědi

13 XMLHttpRequest - událost onreadystatechange  funkce pro obsluhu události změny stavu objektu

14 Další zdroje informací http://www.osuchowski.cz/wwwstranky/ajax http://msdn.microsoft.com/en- us/library/ms535874%28VS.85%29.aspx

15 Děkuji za pozornost… Konec teorie… Praktické ukázky