Wielowarstwowe aplikacje internetowe AJAX. Autor wykładu: Marek Wojciechowski AJAX

Transkrypt

1 AJAX Autor wykładu: Marek Wojciechowski AJAX

2 Plan wykładu Czym jest AJAX? Technologie składowe AJAX XMLHttpRequest: Asynchroniczna komunikacja z serwerem Przykład prostej aplikacji AJAX Przykładowe ogólnodostępne aplikacje AJAX Zalety i wady AJAX Toolkity i biblioteki komponentów AJAX Podsumowanie AJAX (2)

3 Czym jest AJAX? AJAX = Asynchronous JavaScript And XML Również zapisywany jako Ajax AJAX nie jest nową samodzielną technologią AJAX jest nową techniką tworzenia aplikacji internetowych w oparciu o (X)HTML, CSS, JavaScript, DOM, XML Nowe wcielenie techniki Remote Scripting Nowy sposób myślenia o tworzeniu aplikacji internetowych Oferuje poziom interaktywności aplikacji zbliżony do aplikacji desktopowych Rich Internet Applications (RIA), Web 2.0 AJAX (3)

4 Klasyczny model aplikacji internetowej Praca w trybie żądanie-odpowiedź Logika biznesowa w całości po stronie serwera Interakcja z serwerem tylko w wyniku wybrania linku lub zatwierdzenia formularza żądanie HTTP Interfejs użytkownika HTML + CSS serwer HTTP serwer bazy danych AJAX (4)

5 Wady modelu klasycznego Model będący konsekwencją pierwotnego zastosowania WWW, jakim było udostępnianie dokumentów Model niezorientowany na udostępnianie aplikacji niski poziom interaktywności aplikacji ponowne ładowanie strony po akcji użytkownika marnowanie czasu serwera i przepustowości sieci konieczność oczekiwania na całkowite załadowanie strony długi czas ładowania złożonych stron AJAX (5)

6 AJAX (6) Wielowarstwowe aplikacje internetowe Model aplikacji internetowej AJAX Asynchroniczna komunikacja z serwerem z poziomu kodu JavaScript w przeglądarce Serwer wysyła dane, fragmenty kodu, a nie całe strony Dokument w przeglądarce modyfikowany programowo poprzez interfejs DOM żądanie HTTP serwer HTTP Interfejs użytkownika JavaScript AJAX Engine XML HTML + CSS serwer bazy danych

7 Technologie składowe AJAX HTML (lub XHTML) + CSS do prezentacji danych JavaScript do implementacji części logiki aplikacji po stronie klienta Document Object Model (DOM) do programowej modyfikacji dokumentu w przeglądarce XML jako podstawowy format przesyłanych danych alternatywą jest czysty tekst lub format JSON (JavaScript Object Notation) Obiekt XMLHttpRequest do asynchronicznej komunikacji z serwerem alternatywą są zagnieżdżone ramki IFRAME AJAX (7)

8 AJAX (8) Wielowarstwowe aplikacje internetowe Format przesyłanych danych: XML <book> <isbn> </isbn> <title>ajax</title> <authors> <author> <first_name>john</first_name> <last_name>smith</last_name> </author> <author> <first_name>james</first_name> <last_name>white</last_name> </author> </authors> </book>

9 AJAX (9) Wielowarstwowe aplikacje internetowe Format przesyłanych danych: JSON {"book": { "isbn": " ", "title": "AJAX", "authors": { "author": [ {"first_name": "John", "last_name": "Smith"}, {"first_name": "James", "last_name": "White"} ] } }}

10 Wybór formatu przesyłanych danych Zalety XML: powszechnie znany format ogólnego przeznaczenia bogactwo narzędzi po stronie serwera (np. parsery) możliwość przetwarzania odebranych z serwera danych za pomocą transformacji XSLT silne wsparcie ze strony biznesu Zalety JSON: łatwość i szybkość parsowania w języku JavaScript eval(), ale problemy bezpieczeństwa JSON.parse() AJAX (10)

11 Obiekt XMLHttpRequest (1/2) JavaScript, CSS i DOM były już wcześniej wykorzystywane łącznie do zwiększenia atrakcyjności stron WWW (jako DHTML) Nową jakość w AJAX stanowią żądania HTTP asynchronicznie wysyłane do serwera przez kod JavaScript w przeglądarce Podstawowym sposobem realizacji asynchronicznych żądań HTTP z przeglądarki jest obiekt XMLHttpRequest AJAX (11)

12 Obiekt XMLHttpRequest (2/2) Standard de facto Pierwotnie udostępniony w MS Internet Explorer 5.0 Obecnie dostępny we wszystkich popularnych przeglądarkach (różny sposób implementacji np. w IE - ActiveX) Spójny interfejs, różnice tylko w sposobie tworzenia obiektu Umożliwia przesyłanie również innej zawartości niż XML AJAX (12)

13 AJAX (13) Wielowarstwowe aplikacje internetowe Korzystanie z XMLHttpRequest (1/3) Utworzenie obiektu if (window.xmlhttprequest) { // Mozilla, Safari, Opera... requester = new XMLHttpRequest(); } else if (window.activexobject) { // Internet Explorer requester = new ActiveXObject("Microsoft.XMLHTTP"); } Asynchroniczne wysłanie żądania requester.open("get", "/skrypt.php"); requester.send(null);

14 AJAX (14) Wielowarstwowe aplikacje internetowe Korzystanie z XMLHttpRequest (2/3) Utworzenie funkcji nasłuchującej zmian stanu obiektu XMLHttpRequest function myhandler() { if (requester.readystate == 4) { // Completed if (requester.status == 200) { // OK // przetwarzanie przesłanych danych } } return true; } Rejestracja funkcji nasłuchującej requester.onreadystatechange = myhandler;

15 Korzystanie z XMLHttpRequest (3/3) Dostęp do danych pobranych z serwera: poprzez właściwości obiektu XMLHttpRequest po zakończeniu pobierania danych typowo z poziomu funkcji nasłuchującej Właściwość responsexml: zawiera drzewo DOM zawartości XML przesłanej przez serwer Właściwość responsetext: zawiera dane w postaci jednego łańcucha znaków jedyna postać dla danych nie-xml alternatywna reprezentacja dla danych XML AJAX (15)

16 AJAX (16) IFRAME jako alternatywa dla XMLHttpRequest Pobieranie danych z serwera bez konieczności przeładowywania całej strony można zrealizować również w oparciu o zagnieżdżone ramki IFRAME (niewidoczne o wymiarach 0 x 0) <iframe id="data" name="data" style="width:0px; height:0px; border: 0px" src="blank.html"></iframe> <a href="url_on_server" target="data"> Call the server!</a>

17 XMLHttpRequest czy IFRAME? XMLHttpRequest jest rozwiązaniem nowszym i opracowanym specjalnie do realizowania asynchronicznych odwołań do serwera szybszy niż IFRAME wbudowana obsługa XML Wykorzystanie do tego celu IFRAME ma charakter sztuczki wspierane również przez starsze przeglądarki nie wymaga włączenia obsługi ActiveX w Internet Explorer AJAX (17)

18 AJAX (18) Wielowarstwowe aplikacje internetowe Przykład prostej aplikacji (1/10) Aplikacja Hello World <HTML> <HEAD> <TITLE>AJAX Hello World</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <SCRIPT type='text/javascript'> function getdata() {...} function myhandler() {...} </SCRIPT> </HEAD> <BODY> <DIV><A href="javascript:getdata()">powitanie</a></div> <DIV id="hello"></div> </BODY> </HTML>

19 AJAX (19) Wielowarstwowe aplikacje internetowe Przykład prostej aplikacji (2/10) hello.txt Aplikacja Hello World : funkcja getdata() Witaj świecie! function getdata() { if (window.xmlhttprequest) { requester = new XMLHttpRequest(); } else if (window.activexobject) { requester = new ActiveXObject("Microsoft.XMLHTTP"); } requester.onreadystatechange = myhandler; } requester.open("get", "hello.txt"); requester.send(null);

20 AJAX (20) Wielowarstwowe aplikacje internetowe Przykład prostej aplikacji (3/10) Aplikacja Hello World : funkcja myhandler() function myhandler() { if (requester.readystate == 4) { if (requester.status == 200) { el = document.getelementbyid("hello"); txt = document.createtextnode(requester.responsetext); el.appendchild(txt) } } return true; }

21 Przykład prostej aplikacji (4/10) Rozwiązanie alternatywne (właściwość innerhtml) umieszczenie dowolnie złożonej zawartości HTML w elemencie niezalecane w dokumentach XHTML, niestandardowe function myhandler() { if (requester.readystate == 4) { if (requester.status == 200) { el = document.getelementbyid("hello"); } el.innerhtml += requester.responsetext; } } return true; AJAX (21)

22 Przykład prostej aplikacji (5/10) Rozbudowa aplikacji - zmiana formatu danych na XML plik z danymi hello.xml <?xml version="1.0" encoding="windows-1250"?> <powitanie>witaj świecie!</powitanie> zmiana żądania function getdata() {... requester.open("get", "hello.xml"); requester.send(null); } AJAX (22)

23 Przykład prostej aplikacji (6/10) Rozbudowa aplikacji - zmiana formatu danych na XML parsowanie odebranych danych XML function myhandler() {... greeting = requester.responsexml.getelementsbytagname("powitanie")[0].firstchild.nodevalue; el = document.getelementbyid("hello"); txt = document.createtextnode(greeting); el.appendchild(txt);... } AJAX (23)

24 Przykład prostej aplikacji (7/10) Rozbudowa aplikacji programowa zmiana stylu elementu Sposoby zmiany stylu elementu poprzez interfejs DOM: ustawienie wartości właściwości classname węzła bezpośrednie modyfikowanie właściwości style, mającej postać tablicy właściwości CSS el.style.color = "red"; el.style.fontweight = "bold"; AJAX (24)

25 Przykład prostej aplikacji (8/10) Rozbudowa aplikacji programowa generacja dokumentu po stronie serwera formularz wprowadzania danych, od wartości których będzie zależała treść generowanego dokumentu <FORM> <INPUT type="text" id="who"> <INPUT type="button" value="pozdrów" onclick="getdata()" > </FORM> AJAX (25)

26 Przykład prostej aplikacji (9/10) Rozbudowa aplikacji programowa generacja dokumentu po stronie serwera przekazanie w żądaniu danych z formularza function getdata() {... requester = new XMLHttpRequest();... requester.onreadystatechange = myhandler; requester.open("get", "hello.php?who=" + document.getelementbyid("who").value); requester.send(null); } AJAX (26)

27 Przykład prostej aplikacji (10/10) Rozbudowa aplikacji programowa generacja dokumentu po stronie serwera skrypt po stronie serwera hello.php <?php header("content-type: text/xml");?> <?xml version="1.0" encoding="windows-1250"?> <powitanie>witaj <?php echo $_GET['who'];?>! </powitanie> AJAX (27)

28 AJAX (28) Wielowarstwowe aplikacje internetowe Przykład aplikacji AJAX: Google Suggest

29 AJAX (29) Wielowarstwowe aplikacje internetowe Przykład aplikacji AJAX: Google Maps

30 Zalety AJAX Zalety AJAX: interaktywne, szybkie i przyjazne aplikacje oparty o znane i dojrzałe już dziś technologie nie wymaga instalacji wtyczek w przeglądarce redukuje ruch w sieci i zmniejsza obciążenie serwera daje możliwość skrócenia czasu ładowania strony poprzez inkrementalne pobieranie kodu JavaScript i stylów z serwera wspierany przez coraz więcej narzędzi i bibliotek AJAX (30)

31 Wady AJAX Wady AJAX: język JavaScript nieodpowiedni dla dużych aplikacji brak kontroli typów, język interpretowany obiektowość oparta o prototypowanie, a nie klasy konieczność włączenia obsługi JavaScript (w IE również ActiveX) wrażliwy na opóźnienia w komunikacji sieciowej trudna implementacja, testowanie i debugowanie aplikacji niedojrzałe biblioteki i narzędzia programistyczne problem przycisku Back (rozwiązany w toolkitach) AJAX (31)

32 JavaScript/AJAX toolkits (libraries) Dojo Jeden z pierwszych toolkitów DHTML/Ajax wspartych przez duże korporacje (np. IBM) Google Web Toolkit (GWT) Aplikacje Ajax tworzone w języku Java Prototype Podstawowa biblioteka wspierająca Ajax w Ruby on Rails Yahoo! User Interface Library Opracowana przez Yahoo! na potrzeby własnych serwisów, następnie udostępniona publicznie jquery Najpopularniejsza obecnie biblioteka JavaScript Używana m.in. przez Microsoft i Nokię AJAX (32)

33 Google Web Toolkit (GWT) Framework dla języka Java umożliwiający tworzenie aplikacji AJAX Aplikacje implementowane i testowane w języku Java, tłumaczone na JavaScript i HTML... can be used to create products like GMail and Google Maps. Kluczowe cechy: dynamiczne komponenty UI (Widgets) łatwa obsługa komunikacji z serwerem obsługa historii przeglądarki (przycisk Back) debugowanie w Javie, integracja z JUnit AJAX (33)

34 AJAX (34) Wielowarstwowe aplikacje internetowe Architektura GWT * schemat z

35 Tryby pracy GWT Hosted mode aplikacja uruchomiona jako bajtkod Java na JVM wykorzystywany w trakcie implementacji i debugowania aplikacji Web mode aplikacja uruchomiona w formie czystego kodu JavaScript + HTML aplikacja po kompilacja kompilatorem Java-to-JavaScript aplikacja uruchamiana w wersji dla użytkowników końcowych AJAX (35)

36 AJAX (36) Wielowarstwowe aplikacje internetowe GWT prosta aplikacja (1/3) Wrapper HTML <html> <head> <title>wrapper HTML for My first GWT App</title> <script language='javascript' src='mygwt.mygwtapp.nocache.js'></script> </head> <body> <!-- OPTIONAL: history support --> <iframe src="javascript:''" id=" gwt_historyframe" style="width:0;height:0;border:0"></iframe> <h2>my first GWT Application</h2> <div id="slot1"> </body> </html>

37 AJAX (37) Wielowarstwowe aplikacje internetowe GWT prosta aplikacja (2/3) Entry point class public class MyGWTApp implements EntryPoint { public void onmoduleload() { final Button button = new Button("Click me"); button.addclicklistener(new ClickListener() { public void onclick(widget sender) { Window.alert("No real AJAX but works!"); } }); } RootPanel.get("slot1").add(button); }

38 AJAX (38) Wielowarstwowe aplikacje internetowe GWT prosta aplikacja (3/3)

39 jquery New kind of JavaScript Library Fast and concise JavaScript Library that simplifies HTML document traversing event handling Animating Ajax interactions Designed to change the way that you write JavaScript Write less do more Hasła z AJAX (39)

40 AJAX (40) Wielowarstwowe aplikacje internetowe jquery prosta aplikacja <!DOCTYPE html> <html lang="en"> Podstawowa funkcja to $ (alias dla jquery) <head> <meta charset="utf-8"> <title>jquery test</title> <script src=" </script> <!--<script type="text/javascript" src="jquery min.js"></script> --> <script> $(document).ready(function(){ $("a").css('color', 'red').click(function(event){ alert("about to visit jquery.com"); }); }); </script> </head> <body> <a href=" </body> </html>

41 AJAX (41) Wielowarstwowe aplikacje internetowe Ajax w jquery przykład dla XML $.ajax({ type: "GET", data: { "imie" : imie }, datatype: "xml", url: "WelcomeServlet", success: function (xml) { var p = $(xml).find("greeting"); $("#message").html(p.text()); } }); <greeting>witaj Marek!</greeting>

42 AJAX (42) Wielowarstwowe aplikacje internetowe Ajax w jquery przykład dla JSON $.ajax({ type: "GET", data: { "imie" : imie }, datatype: "json", url: "WelcomeServlet", success: function (json) { $("#message").html(json.greeting); } }); {"greeting" : "Witaj Marek"}

43 AJAX w komponentowych frameworkach Komponentowy framework taki jak JSF czy ASP.NET Web Forms może ułatwić tworzenie aplikacji wykorzystujących AJAX Twórca aplikacji nie koduje w JavaScript JavaScript realizujący żądania AJAX opakowany komponentem interfejsu i automatycznie generowany podczas renderowania strony Przykład biblioteki komponentów wykorzystujących AJAX: Oracle ADF Faces Rich Client / Apache Trinidad AJAX (43)

44 Ajax w JSF 2.x JSF 2.x obsługuje Ajax poprzez wbudowaną bibliotekę JavaScript Biblioteka na może być używana na 2 sposoby: Poprzez znacznik <f:ajax> W połączeniu z innym standardowym komponentem Dodanie funkcjonalności Ajax bez kodowania w języku JavaScript Poprzez bezpośrednie wywołanie metody JavaScript API jsf.ajax.request() AJAX (44)

45 AJAX (45) Wielowarstwowe aplikacje internetowe <f:ajax> przykład (1/2) <h:head></h:head> <! do dołączenia biblioteki js --> <h:body> <h:form> <h:outputtext id="date" value="#{welcomebean.currentdatetime}" /> <h:inputtext id="name" value="#{welcomebean.name}"></h:inputtext> <h:commandbutton value="powitaj"> <f:ajax execute="name" render="greeting" /> </h:commandbutton> <h:outputtext id="greeting" value="#{welcomebean.greeting}" /> </h:form> </h:body>

46 AJAX (46) Wielowarstwowe aplikacje internetowe <f:ajax> przykład = public class WelcomeBean { private String name;... // public getname(), setname(...) public String getgreeting(){ return "Witaj " + name + "!"; } } public String getcurrentdatetime(){ return new java.util.date().tostring(); }

47 Podsumowanie AJAX = nowa technika tworzenia aplikacji internetowych Oparty głównie o: HTML, CSS, JavaScript, DOM, XMLHttpRequest Wykorzystuje mechanizm Remote Scripting Pozwala na tworzenie interaktywnych aplikacji na wzór aplikacji desktopowych Trudna implementacja i testowanie aplikacji Wsparcie dla programistów: JavaScript/Ajax toolkits biblioteki komponentów dla JSF i ASP.NET AJAX (47)

48 Materiały dodatkowe J. J. Garrett, Ajax: A New Approach to Web Applications, February 2005 R. Asleson, N. T. Schutta, Foundations of Ajax, Apress, 2005 D. Crane, E. Pascarello, D. James, Ajax in Action, Manning Publications, 2005 Ajax Patterns, The AJAX Revolution. Join in, JSON (JavaScript Object Notation), AJAX (48)