AJAX Marek Hołówko Maciej Wojciechowski
AJAX – Plan Prezentacji Co oznacza AJAX? Geneza technologii Zasady działania AJAX Technologie używane przez AJAX Zastosowania Wady i zalety
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
Geneza AJAX (1) 1990 r. Tim Berners-Lee i propozycja World Wide Web prosty HTML sposobem na upowszechnienie informacji tekstowej i ilustracyjnej model statyczny brak interaktywnych aplikacji sieciowych
Geneza AJAX (2) 1995 r. Netscape Navigator obsługa ramek Ramka 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
Geneza AJAX (3) Technika ukrytej ramki ramka 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ź
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)
Geneza AJAX (5) 2001 r. XMLHttp wysył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
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;
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
Zasady działania AJAX Model tradycyjny a model aplikacja AJAX
Zasady działania AJAX
Technologie używane przez AJAX wymagane 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
XSLT (eXtensible Stylesheet Language Transformations) <?xml version="1.0" ?> <persons> <person username="JS1"> <name>John</name> <family-name>Smith</family-name> </person> <person username="MI1"> <name>Morka</name> <family-name>Ismincius</family-name> </persons> <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing XML Example</title> </head> <body> <h1>Persons</h1> <ul> <li>Ismincius, Morka</li> <li>Smith, John</li> </ul> </body> </html>
Zastosowania Gmail
Zastosowania Google Suggest Google Maps
Zastosowania A9 Yahoo! News
Zalet ciąg dalszy… Nie wymaga pluginów Darmowe narzędzia do tworzenia
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
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
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 http://pl.wikipedia.org/wiki/AJAX http://www.adaptivepath.com/ideas/essays/archives/000385.php
Bibliografia http://www.kcjava.org/media/Ajax.pdf http://www.ociweb.com/mark/JavaUserGroup/Ajax.pdf http://faculty.washington.edu/rfish/msis531/lectnote/3up/ajax.pdf