1 AJAX Marek Hołówko Maciej Wojciechowski
2 AJAX – Plan PrezentacjiCo oznacza AJAX? Geneza technologii Zasady działania AJAX Technologie używane przez AJAX Zastosowania Wady i zalety
3 Co oznacza AJAX? 2005 artykuł Jessego Jamesa Garretta pt. „Ajax:A New Approach to Web Applications” AJAX – Asynchronous JavaScript and XML Ogromny wkład Google w rozwój technologii AJAX – Google Labs
4 Geneza AJAX (1) 1990 r. Tim Berners-Lee i propozycja World Wide Webprosty HTML sposobem na upowszechnienie informacji tekstowej i ilustracyjnej model statyczny brak interaktywnych aplikacji sieciowych
5 Geneza AJAX (2) 1995 r. Netscape Navigator obsługa ramekRamka reprezentuje niezależne żądanie wysłane do serwera obsługa JavaScript interakcja pomiędzy użytkownikiem a stroną WWW realizacja prostych zadań w samej przeglądarce (np. sprawdzanie poprawności danych) minimalizacja czasu oczekiwania – istotna w czasach modemów z przesyłem 28,8 kb/s
6 Geneza AJAX (3) Technika ukrytej ramkiramka o szerokości lub wysokości 0 formularz HTML dynamicznie wypełniany przez JavaScript inicjowanie komunikacji z serwerem po otrzymaniu odpowiedzi wywołanie funkcji JavaScript sygnalizującej oryginalnej ramce otrzymanie danych pierwszy asynchroniczny model w trybie żądanie-odpowiedź
7 Geneza AJAX (4) 1996 r. – IE 4.0 DHTML (Dynamic HTML)umożliwia zmianę dowolnej części strony już po jej załadowaniu w połączeniu z techniką ukrytej ramki daje możliwość odświeżania strony za pomocą nowych informacji z serwera w każdym czasie DOM (Document Object Model) tworzenie struktury strony WWW CSS (Cascading Style Sheets)
8 Geneza AJAX (5) 2001 r. XMLHttpwysyłanie asynchronicznych żądań ad hoc z poziomu JavaScript dostęp do kodów statusu HTTP zastąpił technikę ukrytych ramek oraz iframe (dynamicznie tworzonych ramek) XMLHttpRequest – odpowiednik w Mozilli, Operze i Safari
9 XMLHttp - przykład if (window.XMLHTTP) {var req = new ActiveXOjbect("Microsoft.XMLHTTP"); req.onreadystatechange = requestStateHandler; req.open("GET", "/somefile.xml", true); req.send(null); } function requestStateHandler() { if (req.readyState == 4) { //response ready document.getElementById(‘result’).innerHTML=req.responseText;
10 Zasady działania AJAX AJAX – technika tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa się bez przeładowania całego dokumentu Zastosowanie warstwy pośredniej – silnik AJAX
11 Zasady działania AJAX Model tradycyjny a model aplikacja AJAX
12 Zasady działania AJAX
13 Technologie używane przez AJAXwymagane w Ajaksie HTML/XHTML DOM JavaScript CSS XML XSLT XMLHttp Prezentacja podstawowych treści XHTML – wersja HTML zgodna ze specyfikacją XML Dynamiczna aktualizacja załadowanej strony Format wymiany danych Przekształcenia XML na XHTML Podstawowy broker informacji
14 XSLT (eXtensible Stylesheet Language Transformations) Persons
15 Zastosowania Gmail
16 Zastosowania Google Suggest Google Maps
17 Zastosowania A9 Yahoo! News
18 Zalet ciąg dalszy… Nie wymaga pluginów Darmowe narzędzia do tworzenia
19 Nie taki AJAX piękny… Problemy z przyciskami ‘Wstecz’ i ‘Dalej’Widoczny kod – hakerzy i plagiaty Problemy z dostosowaniem do różnych przeglądarek Brak dostępu do domen zewnętrznych w stosunku do domeny wywołującej Obsługa może być wyłączona lub niedostępna w niektórych przeglądarkach Trudne debugowanie
20 Podsumowanie – czym jest AJAX?oparta na standardach prezentacja przy użyciu XHTML oraz CSS dynamiczne wyświetlanie i interakcja z wykorzystaniem Document Object Model wymiana danych i manipulacja nimi przy pomocy XML i XSLT asynchroniczny odczyt danych dzięki XMLHttp JavaScript łącząca wszystko razem w silnik Ajaksowy
21 Bibliografia Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett „Ajax. Zaawansowane programowanie”, Wyd. Helion, 2007 Christian Gross, „Ajax. Wzorce i najlepsze rozwiązania”, Wyd. Helion, 2007
22 Bibliografia http://www.kcjava.org/media/Ajax.pdf