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

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

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

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…

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

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

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

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 

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:

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

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

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

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

Další zdroje informací us/library/ms535874%28VS.85%29.aspx

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