AJAX - wdw1
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

AJAX - wdw1

on

  • 2,036 views

Podstawy

Podstawy

Statistics

Views

Total Views
2,036
Views on SlideShare
2,015
Embed Views
21

Actions

Likes
0
Downloads
9
Comments
0

2 Embeds 21

http://www.slideshare.net 17
http://testmk2.blogspot.com 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AJAX - wdw1 Presentation Transcript

  • 1. Technologia AJAX Podstawy technologii AJAX Michał Kuciapski Katedra Informatyki Ekonomicznej
  • 2. Tematyka wykładu
    • Definicja technologii AJAX
    • Korzyści stosowania technologii AJAX
    • Historia powstania technologii AJAX
    • Architektura technologii AJAX
    • Wady i ograniczenia technologii AJAX
    • Trendy technologii AJAX
    • Przykład wdrożenia technologii AJAX
  • 3. Definicja technologii AJAX
    • AJAX ( ang. Asynchronous JavaScript and XML, Asynchroniczny JavaScript i XML) – technologia tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Ma to umożliwiać bardziej dynamiczną interakcję z użytkownikiem niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony HTML.
    Definicja wg Wikipedii
  • 4. Korzyści stosowania technologii AJAX(1)
    • Zmniejszenie ilości pełnych przeładowań stron pozwala na:
    • Szybsze działanie serwisów internetowych – krótszy czas oczekiwania na wyniki interakcji
    • Większa interaktywność portali
    • Rozszerzenie interfejsu użytkownika o nowe funkcjonalności kontrolki
    • Zmniejszenie obciążenia sieci? – w przypadku zoptymalizowanego działania kodu – w innym przypadku (wiele krótkich zapytań) efekt odwrotny
    • Wytworzenie się technologii Web 2.0 – dynamicznych serwisów społecznościowych
  • 5. Korzyści stosowania technologii AJAX(2) Klient: [interakcja] przesłanie żądania -> dalsze równoczesnej inne interakcje w trakcie oczekiwania <interakcje JavaScript; żądania HTTP> Serwer: przetworzenie żądania HTTP i przesłanie porcji danych dla odświeżenia zawartości wyłącznie fragmentu strony Klient: [interakcja] przesłanie żądania -> oczekiwanie Serwer: przesłanie dużej strony Klient: przesłanie żądania -> oczekiwanie Serwer: przesłanie dużej strony Klient: przesłanie żądania -> oczekiwanie Serwer: przesłanie dużej strony AJAX Strona bez AJAX
  • 6. Historia powstania technologii AJAX
    • Lata 90-te - techniki programowania asynchronicznego: aplety Java, IFrame
    • 199 8 – Aplikacja Microsoft Outlook Web Access
    • 1999 - Microsoft stworzył kontrolkę ActiveX XMLHTTP w przeglądarce Internet Explorer 5 – aktualnie implementowany jako obiekt XMLHttpRequest przez wiele przeglądarek .
    • 2004 - AJAX jako metodologia stał się popularny w 2005 (źródło: http://www.w3schools.com/Ajax/ajax_httprequest.asp ) roku dzięki Google ( Google Suggest ) – wykorzystanie do np. Gmail-a (2004) i Google Maps (2005)
    • 2005 - AJAX jako pojęcie przede wszystkim marketingowe wprowadził Jesse James Garrett
    • 05.05.2006 – Konsorcjum W3C opublikowało pierwszą roboczą specyfikację
  • 7. Architektura AJAX – składniki (1)
    • Podstawowe składniki technologii:
    • XHTML i CSS – prezentacja stron.
    • Document Object Model (DOM) – jest standardem organizacji danych stron internetowych implementowanym przez przeglądarki internetowej. Pozwala na dynamiczną zmianę wyświetlanej zawartości dynamicznej.
    • XML - język znaczników, poprzez który miałyby być opisane odbierane informacje. W praktyce jednak dane często przekazywane są w innym formacie, przy czym odbierane są wtedy jako tekst. Mogą to być zarówno gotowe fragmenty HTML, jak i fragmenty kodu JavaScript (JSON), może to być też format specyficzny dla danego zastosowania.
  • 8. Architektura AJAX – składniki (2)
    • Podstawowe składniki technologii:
    • XMLHTTP – obiekt ( XMLHttpRequest ) umożliwiający asynchroniczne przesyłanie danych przez sieć; dzięki asynchroniczności, w trakcie pobierania danych, użytkownik może wykonywać inne czynności, można także pobierać dane jednocześnie z wielu miejsc. Wymyślony przez Microsoft w (1998) 2000 roku jako Outlook Web Access 2000 .
    • JavaScript - mimo użycia w nazwie, może to być de facto dowolny język skryptowy funkcjonujący po stronie użytkownika (np. JScript czy VBScript), który powinien jednak obsługiwać obiektowy model dokumentu (DOM); przetwarzanie danych po stronie użytkownika jest kluczowe, ponieważ odebrane dane muszą zostać wstawione na stronę.
    • HTTP – pozwala na komunikację klient-serwer i przeglądanie stron WWW.
    • Technologie server-side – skrypty po stronie serwera wspierające generowanie dynamicznych stron WWW.
  • 9. Architektura AJAX - biblioteki
    • Poszczególne języki programowania dynamicznych serwisów internetowych wykorzystują biblioteki JavaScript implementacji technologii AJAX:
    • Prototype - biblioteka ułatwiająca korzystanie z możliwości oferowanych przez AJAX
    • jQuery - biblioteka ułatwiająca korzystanie z możliwości oferowanych przez AJAX
    • Ext - dawniej rozszerzenie Prototype, Jquery oraz YUI obecnie samodzielna biblioteka
    • Script.aculo.us - rozszerza Prototype ułatwiając tworzenie animacji i interfejsów
    • MooTools - modułowa biblioteka AJAX zawierająca również ułatwienia do tworzenia efektów wizualnych
    • Yahoo! UI Library - biblioteka narzędziowa ogólnie dla DHTML
    • Dojo Toolkit - biblioteka narzędziowa ogólnie dla DHTML
    Źródło: Wikipedia
  • 10. Architektura AJAX - frameworki
    • Poszczególne języki skryptów dynamicznych serwisów internetowych w wykorzystaniu technologii AJAX opierają się dedykowane frameworki
    Python Pyjamas PHP Xajax PHP Tigermouse PHP Symfony PHP Sajax ASP.NET ASP.NET AJAX ASP.NET Ajax.NET Professional Java ZK Framework Java OpenXava Java ItsNat Java IT Mill Toolkit Java Google Web Toolkit Java Echo Język skryptów Nazwa
  • 11. Architektura AJAX – wykonanie (1)
    • Załadowanie strony – analogicznie jak w przypadku ładowania bez AJAX.
    • Silnik JavaScript reaguje na interakcje użytkownika i za pomocą obiektu XMLHTTPRequest wysyła żądania HTTP do serwera.
    • Skrypty na serwerze przetwarzają żądania HTTP i wysyłają odpowiedź jako dane w formacie XML, JSON a nawet zwykły tekst.
    • Silnik JavaScript w odpowiedzi na dane uzyskane od serwera przetwarza je i modyfikuje zawartość wyświetlanej strony.
  • 12. Architektura AJAX – wykonanie (2)
    • 1. Sprawdzenie czy przeglądarka wspiera AJAX
      • if (window.XMLHttpRequest)
    • 2. Utworzenie obiektu komunikacji AJAX
      • ajaxT =new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
      • ajaxT =new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); //IE5, IE6
    • 3. Zdefniowanie metody otrzymania odpowiedzi
      • ajaxT .onreadystatechange= metoda ()
      • {
      • //Kod
      • }
  • 13. Architektura AJAX – wykonanie (3)
      • 3.1 Sprawdzenie stanu wykonania zadania
      • ajaxT .onreadystatechange=function()
      • { if( ajaxT .readyState == 4) {   document.myForm.time.value= ajaxT .responseText; }
      • }
    Żądanie zostało zakończone 4 Żądanie jest realizowane 3 Żądanie zostało wysłane 2 Żądanie zostało przygotowane 1 Żądanie nie zostało zainicjowane 0 Opis Stan
  • 14. Architektura AJAX – wykonanie (4)
    • 4. Wysłanie żądania
      • ajaxT .open(&quot;GET&quot;, &quot; stronaDlaAjax .asp x &quot;, true); //przygotowanie żądania
      • ajaxT. send(null); // wysłanie żądania
    • ~ Przypisanie metody zdarzeniu
    • <form name= &quot;formatka &quot;> Name: <input type=&quot;text&quot; name=&quot; kod &quot; onkeyup=&quot; funkcjaA jax();&quot; /> </form>
    Typ wysłania żądania POST/GET Strona wysłania żądania Asynchroniczność
  • 15. Architektura AJAX – wykonanie (5) <html><body> <script type=&quot;text/javascript&quot;> function funkcjaAjax() { var ajaxT; if ( window.XMLHttpRequest )   // IE7+, Firefox, Chrome, Opera, Safari   {   ajaxT=new XMLHttpRequest();   } else if (window.ActiveXObject) // IE6, IE5   {    ajaxT=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);   } else   {   alert(&quot;Brak wsparcia dla XMLHTTP!&quot;);   } ajaxT.onreadystatechange=function() { if( ajaxT.readyState==4 )   {   document.myForm.wynik.value=ajaxT.responseText;   } } ajaxT.open(&quot;GET&quot;,&quot;produkt.aspx&quot;,true); ajaxT.send(null); } </script> <form name=&quot;myForm&quot;> Kod: <input type=&quot;text&quot; name=&quot;kod&quot; onkeyup=&quot;ajaxFunction();&quot; /> Produkt: <input type=&quot;text&quot; name=&quot;wynik&quot; /> </form> </body></html>
  • 16. Architektura AJAX – format danych XML JSON MIME dla JSON - application/json
  • 17. Architektura AJAX - przeglądarki
    • Zgodnie z w3schools.com:
    • AJAX (czyt. XMLHttpRequest) jest wspierany przez:
    • Internet Explorer 5.0+
    • Safari 1.2
    • Mozilla / Firefox
    • Opera 8+
    • Netscape 7
    • , czyli przeglądarki obsługujące DOM i posiadające zaimplementowany obiekt XMLHttpRequest
  • 18. Ograniczenia technologii AJAX (1)
    • Ograniczenie dostępu do strony dla części użytkowników: starsze przeglądarki, korzystających ze specjalnych aplikacji (np. osoby niepełnosprawne).
    • Utrudnianie automatycznego pobieranie stron , ze względu na interpretowanie języków skryptowych.
    • Problemy z indeksowaniem przez serwisy wyszukujące – możliwe do obejścia poprzez dostarczanie linków wyświetlających całą treść strony lub stworzyć mapę witryny.
    • Problemy z analiz ą ruchu na stronie – może być oparta jest o klasyczny model udostępniania całych stron (konieczność odświeżenia całości). Nowsze skrypty potrafią jednak uwzględnić właściwy pomiar oglądalności stron. Można również analizować logi żądań wysyłanych do serwera WWW.
  • 19. Ograniczenia technologii AJAX (2)
    • Brak funkcjonowa nia tradycyjn ego schemat u przeglądania stron umożliwiający swobodne poruszanie się w przód i w tył - jeśli wciśnięcie linka powoduje wywołanie skryptu zmieniającego wnętrze strony (menu pozostaje bez zmian), to użytkownik nie będzie mógł się cofnąć korzystając z przycisku &quot;Wstecz&quot; przeglądarki. Konieczne wbudowanie odpowiednich mechanizmów dla samej strony.
    • Przygotowanie serwisów z zastosowaniem technologii AJAX wymaga większych nakładów czasowych .
    • Problemy z dodawaniem stron do zakładek – wskazanie określonego stanu strony.
    • Zwiększenie ilości żądań użytkownika – brak postbacku powoduje, że użytkownicy mogą generować większą ilość zapytań do serwera.
  • 20. Trendy technologii AJAX
    • Standardy i fragmentacja – nowe kontrolki
    • Dopasowanie przeglądarek - do wersji AJAX
    • Akceptacja użytkowników – analogia do wyskakujących okienek, ciasteczek
    • Pulpit -
    • Flash – czy wyeliminuje AJAX?
    • Bogactwo graficzne – VML (Vector Markup Landuage) i SVG ( Scalable Vector Graphics )
    • Dwustronna sieć – serwer inicjuje połączenie
    • Przechowywanie lokalne – przechowywanie danych
  • 21. Przykład wdrożenia technologii AJAX – wersja bez AJAX-u
    • <%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeFile=&quot;Default.aspx.cs&quot; Inherits=&quot;_Default&quot; %>
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
    • <head id=&quot;Head1&quot; runat=&quot;server&quot;>
    • <title></title>
      • <script runat=&quot;server&quot;>
      • void policz(object sender, EventArgs args)
      • {
      • int znaki = tekst.Value.Length;
      • dlugosc.Value = znaki.ToString();
      • }
      • </script>
    • </head>
    • <body>
    • <form id=&quot;znaki&quot; runat=&quot;server&quot;>
    • <div>
    • <input id=&quot;tekst&quot; type=&quot;text&quot; runat=&quot;server&quot; />
    • <input id=&quot;dlugosc&quot; type=&quot;text&quot; readonly=&quot;readonly&quot; runat=&quot;server&quot; />
    • &nbsp;&nbsp;
    • <asp:Button ID=&quot;Wylicz&quot; runat=&quot;server&quot; Text=&quot;Button&quot; OnClick=&quot;policz&quot; />
    • </div>
    • </form>
    • </body>
    • </html>
    Deklaracja strony ASP .NET Definicja metody obsługi zdarzenia Kontrolki asp Wywołanie metody jako postback
  • 22. Przykład wdrożenia technologii AJAX – kod html
    • <html> <body> <form name=&quot; znaki &quot;> Tekst : <input type=&quot;text&quot; name= &quot; tekst &quot; /> Długość : <input id=&quot; dlugosc &quot; readonly=&quot;readonly&quot; type=&quot;text&quot; /> </form> </body>
    • </html>
  • 23. Przykład wdrożenia technologii AJAX – kod html <script type=&quot;text/javascript&quot;> function wyliczDlugosc() { var ajaxT=new XMLHttpRequest(); ajaxT.onreadystatechange = function() { if (ajaxT.readyState == 4) { document.znaki.dlugosc.value = ajaxT.responseText; } } var url = &quot;wylicz.aspx?tekst=&quot; + document.getElementById(&quot;tekst&quot;).value; ajaxT.open(&quot;GET&quot;,url,true); ajaxT.send(); } </script> </head> <body> <form id=&quot;znaki&quot; runat=&quot;server&quot;> <div> <input id=&quot;tekst&quot; type=&quot;text&quot; onkeyup=&quot;wyliczDlugosc();&quot; runat=&quot;server&quot; /> <input id=&quot;dlugosc&quot; type=&quot;text&quot; readonly=&quot;readonly&quot; runat=&quot;server&quot; /> </div> </form> Klient Utworzenie obiektu komunikacji AJAX Zdefniowanie metody otrzymania odpowiedzi Sprawdzenie stanu wykonania zadania Przygotowanie żądania Wysłanie żądania Przypisanie metody zdarzeniu Zwrócenie odpowiedzi
  • 24. Przykład wdrożenia technologii AJAX – kod html <%@ Page Language=&quot;C#&quot; %> <script runat=&quot;server&quot;> void Page_Load(object sender, EventArgs e) { string tekst = Page.Request.QueryString[0]; int dlugosc = tekst.Length; Response.Write(dlugosc); } </script> Server