AJAX - wdw1

Technologia AJAX Podstawy technologii AJAX

Michał KuciapskiMichał Kuciapski

Katedra Informatyki EkonomicznejKatedra Informatyki Ekonomicznej

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

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

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

Korzyści stosowania technologii AJAX(2)

Strona bez AJAX AJAX

Klient: przesłanie żądania -> oczekiwanie

Serwer: przesłanie dużej strony

Klient: przesłanie żądania -> oczekiwanie


Klient: [interakcja] przesłanie żądania -> oczekiwanie


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

Historia powstania technologii AJAX

Lata 90-te - techniki programowania asynchronicznego: aplety Java, IFrame

1998 – Aplikacja Microsoft Outlook Web Access1999 - 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ę

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.

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.

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

Architektura AJAX - frameworki

Poszczególne języki skryptów dynamicznych serwisów internetowych w wykorzystaniu

technologii AJAX opierają się dedykowane frameworki

Nazwa Język skryptów

Echo Java

Google Web Toolkit Java

IT Mill Toolkit Java

ItsNat Java

OpenXava Java

ZK Framework Java

Ajax.NET Professional ASP.NET

ASP.NET AJAX ASP.NET

Sajax PHP

Symfony PHP

Tigermouse PHP

Xajax PHP

Pyjamas Python

Architektura AJAX – wykonanie (1)

1. Załadowanie strony – analogicznie jak w przypadku ładowania bez AJAX.

2. Silnik JavaScript reaguje na interakcje użytkownika i za pomocą obiektu

XMLHTTPRequest wysyła żądania HTTP do serwera.

3. Skrypty na serwerze przetwarzają żądania HTTP i wysyłają odpowiedź

jako dane w formacie XML, JSON a nawet zwykły tekst.

4. Silnik JavaScript w odpowiedzi na dane uzyskane od serwera przetwarza

je i modyfikuje zawartość wyświetlanej strony.


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("Microsoft.XMLHTTP"); //IE5, IE6

3. Zdefniowanie metody otrzymania odpowiedzi

ajaxT.onreadystatechange=metoda()

{

//Kod

}


3.1 Sprawdzenie stanu wykonania zadania

ajaxT.onreadystatechange=function()

{

if(ajaxT.readyState == 4)

{

document.myForm.time.value=ajaxT.responseText;

}

}Stan Opis

0 Żądanie nie zostało zainicjowane

1 Żądanie zostało przygotowane

2 Żądanie zostało wysłane

3 Żądanie jest realizowane

4 Żądanie zostało zakończone


4. Wysłanie żądania

ajaxT.open("GET", "stronaDlaAjax.aspx", true); //przygotowanie żądania

ajaxT.send(null); // wysłanie żądania

~ Przypisanie metody zdarzeniu

<form name="formatka">Name: <input type="text" name="kod" onkeyup="funkcjaAjax();" /> </form>

Typ wysłania żądania POST/GET Strona wysłania żądania Asynchroniczność


<html><body><script type="text/javascript">function funkcjaAjax(){var ajaxT;if (window.XMLHttpRequest) // IE7+, Firefox, Chrome, Opera, Safari { ajaxT=new XMLHttpRequest(); }else if (window.ActiveXObject) // IE6, IE5 { ajaxT=new ActiveXObject("Microsoft.XMLHTTP"); }else { alert("Brak wsparcia dla XMLHTTP!"); }ajaxT.onreadystatechange=function(){if( ajaxT.readyState==4 ) { document.myForm.wynik.value=ajaxT.responseText; }}ajaxT.open("GET","produkt.aspx",true);ajaxT.send(null);}</script><form name="myForm">Kod: <input type="text" name="kod" onkeyup="ajaxFunction();" />Produkt: <input type="text" name="wynik" /></form></body></html>

Architektura AJAX – format danych

MIME dla JSON - application/json

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

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.

Ograniczenia technologii AJAX (2)

Brak funkcjonowania tradycyjnego schematu 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 "Wstecz" 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.

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

Przykład wdrożenia technologii AJAX – wersja bez AJAX-u

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<script runat="server">

void policz(object sender, EventArgs args)

{

int znaki = tekst.Value.Length;

dlugosc.Value = znaki.ToString();

}

</script>

</head>

<body>

<form id="znaki" runat="server">

<div>

<input id="tekst" type="text" runat="server" />

<input id="dlugosc" type="text" readonly="readonly" runat="server" />

<asp:Button ID="Wylicz" runat="server" Text="Button" OnClick="policz" />

</div>

</form>

</body>

</html>

Deklaracja strony ASP .NETDeklaracja strony ASP .NET

Definicja metody obsługi zdarzeniaDefinicja metody obsługi zdarzenia

Kontrolki aspKontrolki asp

Wywołanie metody jako postbackWywołanie metody jako postback

Przykład wdrożenia technologii AJAX – kod html

<html>

<body>

<form name="znaki">

Tekst: <input type="text" name= "tekst" />

Długość: <input id="dlugosc" readonly="readonly" type="text" />

</form>

</body>

</html>


<%@ Page Language="C#" %>

<script runat="server"> void Page_Load(object sender, EventArgs e) { string tekst = Page.Request.QueryString[0]; int dlugosc = tekst.Length; Response.Write(dlugosc); }</script>

AJAX - wdw1

Technology

Transcript of AJAX - wdw1