Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
AJAX Marek Hołówko Maciej Wojciechowski
2
AJAX – Plan Prezentacji
Co 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 Web
prosty HTML sposobem na upowszechnienie informacji tekstowej i ilustracyjnej model statyczny brak interaktywnych aplikacji sieciowych
5
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
6
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ź
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. 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
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 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
14
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=" <head> <title>Testing XML Example</title> </head> <body> <h1>Persons</h1> <ul> <li>Ismincius, Morka</li> <li>Smith, John</li> </ul> </body> </html>
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
Podobne prezentacje
