Web12InteractiuneWeb Ajax Mashups

7/29/2019 Web12InteractiuneWeb Ajax Mashups

1/84

Dr.Sabin

Buraga

www.purl.org/net/busa

co

Interactiune Web

Suita de tehnologii Ajax

Aplicatii de tip RIA si hibride (mash-ups)

detalii in[NW, 1-28]

[PW2, 133-141, 183-242] [TX, 299-327]


2/84

Dr.Sabin

Buraga

www.purl.org/net/busa

co

Modul in care dam face mai mult

dect ceea ce dam.

Pierre Corneille


3/84

Dr.Sabin

Buraga

www.purl.org/net/busaco

Care e modalitatea de a transfera asincron

date intre client(i) si server(e) Web?


4/84

Dr.Sabin

Buraga


interactiune web: ajax

Asynchronous JavaScript And XML

(Jeese James Garrett)


5/84

Dr.Sabin

Buraga

www.

purl.org/net/busaco


Asynchronous JavaScript And XML

(Jeese James Garrett)

ofera premisele asigurarii unei interactiuni bogate

cu utilizatorul (RIA Rich Internet Application)

in cadrul unei aplicatii Web


6/84

Dr.Sabin

Buraga

www.

purl.org/net/busaco


O suita de tehnologii deschise:

limbaje standardizate de structurare e.g., (X)HTML si de prezentare a datelor: CSS


7/84

Dr.Sabin

Buraga

www.

purl.org/net/busaco



redare + interactiune la nivel de client (navigator) Webvia standardul DOM


8/84

Dr.Sabin

Buraga

www.

purl.org/net/busaco



interschimb + manipulare de date reprezentate prindiverse dialecte XML,

JSON (JavaScript Object Notation)

sau HTML


9/84

Dr.Sabin

Buraga

www.

purl.org/net/busaco



transfer (a)sincron de datefacilitat de obiectul XMLHttpRequest


10/84

Dr.Sabin

Buraga

www.

purl.org/net/busaco



transfer (a)sincron de datefacilitat de obiectul XMLHttpRequest

disponibil la nivelulnavigatorului Web


11/84

Dr.Sabin

Buraga




procesare folosind limbajul JavaScript(ECMAScript)


12/84

Dr.Sabin

Buraga



Componenta de baza: obiectul XMLHttpRequest

disponibil la nivel de navigator Web via JavaScript

in curs de standardizare la Consortiul Web


13/84

Dr.Sabin

Buraga




nivelul 1 (implementat in premiera de MSIE 5.5)http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html

nivelul 2 (W3C working draft, 2012)

http://www.w3.org/TR/XMLHttpRequest/


14/84

Dr.Sabin

Buraga




permite realizarea de cereri HTTP e.g., GET, POST, dintr-un program ruland la nivel de client (browser)

spre o aplicatie/un serviciu Web existent(a) pe server,

in mod asincronsausincron


15/84

Dr.Sabin

Buraga




datele vehiculate intre programele client si serverpot avea orice format

uzual, modelate in XML (e.g., Atom, RSS, KML,),

HTML si/sau JSON


16/84

Dr.Sabin

Buraga




paginile Web nu mai trebuie reincarcate complet,continutul lor XHTML fiind manipulat prin DOM

in cadrul browser-ului

in conformitate cu datele receptionate de la server


17/84

Dr.Sabin

Buraga


Client

(browser)Server

Web

XMLHttpRequest Server de aplicatii

open ("GET")

open ("POST")send (...)

DOM

fereastra navigatorului datele XML (pe server)

interactiune web: ajaxexemplu

verificarea existentei unui cont pe server

i t f XMLHtt R t XMLHtt R tE tT t {


18/84

Dr.SabinBuraga


interface XMLHttpRequest: XMLHttpRequestEventTarget {attribute Function? onreadystatechange;

// functia de tratare a evenimentului de schimbare a starii transferuluireadonly attribute unsigned short readyState;// starea transferului

// realizarea unei cereri HTTPvoid open (DOMString metoda, DOMString url, optional boolean asinc = true,

optional DOMString? cont, optional DOMString? parola);// deschide conex.void setRequestHeader(DOMString campAntet, DOMString valoare);

// stabileste antetul HTTP

void send (optional data = null);// trimite date spre serverul Webvoid abort (); // abandoneaza transferul

// receptarea raspunsului de la serverul Webreadonly attribute unsigned short status;// codul de stare HTTP: 200, 303, 400,

readonly attribute DOMString statusText;// textul asociat codului de stareDOMString? getResponseHeader(DOMString antet);// preia antetul HTTPDOMString getAllResponseHeaders ();// preia toate campurile raspunsuluireadonly attribute any response; // contine raspunsul propriu-zisreadonly attribute DOMString responseText; // contine raspunsul: format textreadonly attribute Document? responseXML;// contine raspunsul: date XML

};

interface XMLHttpReq estE entTarget E entTarget {


19/84

Dr.SabinBuraga


interface XMLHttpRequestEventTarget : EventTarget {// functii de tratare a evenimentelor asociate transferului asincronattribute Function? onloadstart;// transferul a inceputattribute Function? onprogress;// se realizeaza transferul datelorattribute Function? onabort; // s-a abandonat transferul de date

attribute Function? onerror; // a aparut o eroare de transmisieattribute Function? onload; // datele au fost receptionate de clientattribute Function? ontimeout; // a aparut o intarziere de transferattribute Function? onloadend; // transferul s-a terminat

};

// constante ce specifica starea transferului (vezi proprietatea readyState)const unsigned short UNSENT = 0; // inca n-au fost efectuate transferuriconst unsigned short OPENED = 1; // s-a deschis conexiunea cu serverulconst unsigned short HEADERS_RECEIVED = 2; // primire campuri-antet HTTP

const unsigned short LOADING = 3; // datele se incarcaconst unsigned short DONE = 4; // gata! (transfer efectuat complet)

specificatie WebIDLvezi cursul

despre DOM


20/84

Dr.SabinBuraga



Metode importante oferite de XMLHttpRequest

open ( )

initiaza deschide o conexiune HTTP cu serverul,

emitand o cerere GET ori POST


21/84

Dr.SabinBuraga




send ( )

transmite (asincron) date e.g., XML, JSON etc. ,

spre aplicatia/serviciul ce ruleaza pe server

orice listener(asociat evenimentelor onload, ontimeout,

onabort,) trebuie stabilit inainte de a trimite date


22/84

Dr.SabinBuraga




abort ( )

abandoneaza transferul curent


23/84

Dr.SabinBuraga




setRequestHeader ( )

specifica anumite campuri de antet HTTP

exemple: Cookie, Keep-Alive, User-Agent,


24/84

Dr.SabinBuraga




getResponseHeader ( )

furnizeaza un anumit camp prezent

in antetul mesajului de raspuns HTTP trimis de server


25/84

Dr.SabinBuraga



Proprietati de baza ale XMLHttpRequest

readyState

furnizeaza codul de stare a transferului:

0 UNSENT, 1 OPENED,

2 HEADERS_RECEIVED, 3 LOADING, 4 DONE


26/84

Dr.SabinBuraga

www.purl.org/net/bus

aco



status

desemneaza codul de stare HTTP intors de serverul Web

200 (Ok)

404 (Not Found)500 (Server Internal Error)

etc.


27/84

Dr.SabinBuraga


aco



statusText

contine mesajul corespunzator codului de stare HTTP


28/84

Dr.SabinBuraga


aco



responseTextresponseXML

includ raspunsul (datele) obtinut(e) de la server


29/84

Dr.SabinBuraga


aco



onreadystatechange

specifica functia ce va fi invocata la modificarile de stare

privind transferul de date intre server si client

handlerde tratare a

evenimentelor de transfer


30/84

Dr.SabinBuraga


aco


Exceptii specifice care pot fi emise

SECURITY_ERRNETWORK_ERRABORT_ERR

conform DOM 3


31/84

Dr.SabinBuraga


aco

interactiune web: ajax utilizari

Indicarea virstei (modificarii) informatiei afisate

Yellow Fade Technique, FAT (Fade Anything Technique)

Reimprospatarea periodica a continutului

e.g., stiri receptionate in formate ca Atom sau RSS

Anticiparea download-urilor(pre-incarcarea datelor ce vor fi solicitate)


32/84

Dr.SabinBuraga


aco

interactiune web: ajax utilizari

Auto-completarea datelor (completion, suggest)

Validarea in timp-real a datelor introduse de utilizator

Dezvoltarea de componente de interfata Web (widgets),

interactionand pe baza evenimentelor survenite

si multe altele

avansat


33/84

Dr.SabinBuraga


aco

interactiune web: ajax aspecte

Evitarea incarcarii intregului document Web

avantaj:se pot modifica doar fragmente de document

dezavantaj:

bookmarking-ul poate fi compromis(nu exista un URL unic

desemnand reprezentarea resursei curente)

avansat

avansat


34/84

Dr.SabinBuraga

www

.purl.org/net/bus

aco


Oferirea de alternative la Ajax,

atunci cand suportul pentru acesta

nu este implementat/activat

graceful degradation

progressive enhancement

avansat

avansat


35/84

Dr.SabinBuraga

www

.purl.org/net/bus

aco


Minimizarea traficului dintre browsersi server

transferul de date poate fi monitorizat (+interceptat)

via instrumente dedicate

WireShark

Firebug, Fiddler, TamperData, Live HTTP Headers

avansat

avansat


36/84

Dr.SabinBuraga

www

.purl.org/net/bus

aco


Adoptarea Ajax pentru cresterea utilizabilitatii,

nu doar de dragul tehnologiei

exemple negative:

distragerea utilizatorului,supradimensionarea arborelui DOM

avansat


37/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco

interactiune web: ajax programare

La nivel de client(biblioteci JavaScript)

Dojo: dojotoolkit.orgjQuery:jquery.com

Prototype: prototypejs.orgRico:openrico.org

Script.aculo.us: script.aculo.usYUI: developer.yahoo.net/yui/


38/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco


La nivel de client(biblioteci JavaScript)

Dojo: dojotoolkit.orgjQuery:jquery.com

Prototype: prototypejs.orgRico:openrico.org

Script.aculo.us: script.aculo.usYUI: developer.yahoo.net/yui/

alte detalii in cadrul cursului optional

Dezvoltarea aplicatiilor Web la nivel de client (anul 3, semestrul I)


39/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco


La nivel de server

AJAXASP.NET (C#), CPAINT, DWR (Java),

HTML::AJAX (PHP),jMaki(Java), Mason (Perl),

Ruby on Rails (Ruby), Sajax, Symphony (PHP),

SWATO (Java), Taconite(Java),


40/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco


API-uri specializate

exemplificari:Bing Maps AJAX Control

http://msdn.microsoft.com/en-us/library/ee692181.aspxGoogle Libraries API

https://code.google.com/apis/libraries/Yahoo! Maps Web Services via AJAX

http://developer.yahoo.com/maps/ajax/


41/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco


Ajax ofera premisele invocarii asincrone

de servicii Web in stilul REST

folosind ca reprezentari ale datelor transferate:

POX (Plain Old XML)

JSON (JavaScript Object Notation)AHAH (Asynchronous HTML and HTTP)

text neformatat


42/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco

interactiune web: ajax studiu de caz

Verificarea existentei unui nume de utilizator

in vederea crearii unui cont de autentificarein cadrul unei aplicatii Web


43/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco




tratand evenimentul onblur, putem verifica

interogand asincron un serviciu Web daca numelede cont introdus de utilizator intr-un formular Web

deja a fost folosit de altcineva


44/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco




serviciul Web dezvoltat in stilul REST va oferi

un document XML modeland raspunsul la interogareaexista deja un utilizator avand un nume dat?

var cerere;// incapsuleaza cererea HTTP catre serverul Web


45/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco

; p

function incarcaXML (url) {// incarca un document XML desemnat de 'url'// verificam existenta obiectului XMLHttpRequestif (window.XMLHttpRequest) {

// exista suport nativ (Gecko: Firefox; WebKit: Safari, Chrome)cerere = new XMLHttpRequest ();} else

if (window.ActiveXObject) {// se poate folosi obiectul ActiveX din MSIEcerere = new ActiveXObject ("Microsoft.XMLHTTP");

}if (cerere) {

// stabilim functia de tratare a starii incarcariicerere.onreadystatechange = trateazaRaspunsCerere;// preluam documentul prin metoda GET

cerere.open ("GET", url, true);cerere.send (null); // nu trimitem nimic serviciului Web} else {

// nu exista suport pentru Ajax :(}

}

// functia de tratare a schimbarii de stare a cereriif ti t t R C () {


46/84

Dr.Sabi

nBuraga

www

.purl.org/net/bus

aco

function trateazaRaspunsCerere () {// verificam daca incarcarea s-a terminat cu succesif (cerere.readyState == 4) {

// verificam daca am obtinut codul de stare '200 Ok'

if (cerere.status == 200) {// procesam datele receptionate prin DOM// (preluam elementul radacina al documentului XML)var raspuns = cerere.responseXML.documentElement;var rezultat = raspuns.getElementsByTagName

('rezultat')[0].firstChild.data;// apelam o functie ce va modifica arborele DOM al paginii Web// conform raspunsului transmis de serviciul invocat

}// eventual, se pot trata si alte coduri de stare (404, 500 etc.)

else {alert ("A aparut o problema la transferul datelor XML:\n" +cerere.statusText);

}} vezi exemplul

din arhiva


47/84

Dr.SabinBuraga

www

.purl.org/net/bus

aco

utilizatorul introduce un nume de cont; via Ajax, i se va semnala ca

deja exista, conform raspunsului XML trimis de catre serviciul Web

cerere HTTP via URL-ul http://adresa.info/verifica.php?nume=martaraspuns XML de forma 1

0 = nu exista


48/84

Dr.SabinBuraga

www

.purl.org/net/bus

aco


Obtinerea fotografiilor publice stocate pe situl

Flickr pe baza serviciului Web REST oferit


49/84

Dr.SabinBuraga

www

.purl.org/net/busaco


Obtinerea fotografiilor publice stocate pe situl

Flickr pe baza serviciului Web REST oferit

utilizam URL-ul

http://api.flickr.com/services/feeds/photos_public.gne

pentru a obtine informatii despre imagini(formate disponibile: Atom, CSV, JSON, XML,)

vezi http://www.flickr.com/services/feeds/docs/photos_public/

Forma generala a raspunsului JSON transmis de Flickr:


50/84

Dr.SabinBuraga

www



g p J{

"title" : "Recent Uploads","link" : "http://www.flickr.com/photos/",

"modified" : "2012-05-26T13:49:08Z","generator" : "http://www.flickr.com/","items" : [ {

"title" : "...",

"link" : "http://www.flickr.com/photos/.../4204222/","media" : { "m": "https://farm.staticflickr.com/...jpg" },"date_taken" : "2012-05-20T17:23:43-08:00","description": "...","published" : "2012-05-26T13:49:08Z",

"author" : "...","author_id" : "...","tags" : "iasi romania informatica FII ..."

} ]

}

tip de data

XML Schema

//


51/84

Dr.SabinBuraga

www


interactiune web: ajax studiu de caz// preluam asincron imagini disponibile pe FlickrjQuery.getJSON

("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",{ // datele de intrare transmise serviciului Web

tags: "iasi, romania, informatica", format: "json"},// functia anonima ce va procesa datele JSON trimise asincron de Flickrfunction (data) {

// iteram fiecare informatie obtinuta de la serviciul Web$.each(data.items, function (numar, foto) {// cream un element avand ca valoare a atributului "src"// adresa Web inclusa in datele JSON obtinute;// acest va fi adaugat la elementul cu id="imagini" din pagina

$ ("").attr ("src", foto.media.m).attr ("title", foto.title).appendTo ("#imagini");});

});

cod JavaScript ce recurge la biblioteca jQuery

pentru a transfera asincron datele JSON

obtinute de la serviciul Web REST oferit de Flickr


52/84

Dr.SabinBuraga

www


un posibil rezultat obtinut (inclusiv trasarea pas-cu-pas

a executiei codului JavaScript via extensia Firebug)

avansat


53/84

Dr.SabinBuraga

www


experimentarea API-urilor publice oferite de Google

invocabile asincron via Ajax

https://code.google.com/apis/ajax/playground/



54/84

Dr.SabinBuraga

www


ajax: demo

avansat


55/84

Dr.SabinBuraga

www


interactiune web: comet

Comet

(Alex Russel)

permite ca datele sa fie impinse (push) de catre server

spre aplicatia client, utilizand conexiuni HTTP

persistente (long-lived) in vederea reducerii latentei

avansat


56/84

Dr.SabinBuraga

www



Complementar Ajax

long pollingHTTP server push

Reverse Ajax

http://ajaxpatterns.org/HTTP_Streaming

avansat


57/84

Dr.SabinBuraga

www



Sablon de proiectare a aplicatiilor Web

care necesita realizarea de conexiuni persistente,

in stilulpeer-to-peer

utilizat de aplicatiile Web intensiv interactive,

eventual colaborative

exemple: Google Docs, GMail, Meebo

avansat


58/84

Dr.SabinBuraga

www



Solutii de implementare exemplificari:

Atmosphere, DWR, Ice Faces, Jetty, Orbited

pentru detalii, a se vizitacometdaily.com


59/84

Dr.SabinBuraga

www


mash-ups

Ajax/Comet ofera suport pentru dezvoltarea de

aplicatii Web hibridemash-ups

combinarea la nivel de client si/sau server

a coninutului ce provine din surse (situri)

multiple, oferind o funcionalitate/experien nou


60/84

Dr.SabinBuraga

www


mash-ups

http://www.last.fm/api/rest

http://vimeo.com/api


61/84

Dr.SabinBuraga

www


mash-ups

+ LaVio aplicaie Web hibrid

http://www.last.fm/api/rest

http://vimeo.com/apivideoclip-uri & stiri

despre formatii muzicale


62/84

Dr.SabinBuraga

www


mash-ups

Se bazeaza pe fluxuri RSS/Atom,

servicii Web, API-uri publice,

curentul SaaS (Software As A Service)


63/84

Dr.SabinBuraga

www


mash-ups

Caracteristici:

combinare

vizualizare

agregare


64/84

Dr.SabinBuraga

www


mash-ups

Combinare

utilizarea de surse de date multiple

poate avea caracter multidimensional:

subiect de interes + locatie geografica + moment de timp

Yahoo! music search + Google Maps + Eventful


65/84

Dr.SabinBuraga

www



66/84

Dr.Sab

inBuraga

www


mash-ups

Vizualizare

pot fi adoptate diverse tehnici de vizualizare (prezentare)

a datelor:

cartografica,

tag cloud-uri,

tridimensionala,


67/84

Dr.Sab

inBuraga

www


Twitter + Google EarthTwittEarth

avansat


68/84

Dr.Sab

inBuraga

www


mash-ups

Agregare

gruparea datelor provenite din mai multe surse si

analizarea lor: statistici, clasificari, predictii,

e.g., folosind data mining se pot releva

aspecte ascunse ale datelor procesate


69/84

Dr.Sab

inBuraga

www


recomandare inteligent de resurse via Zemanta

avansat


70/84

Dr.Sab

inBuraga

www


instrumente

(GUI tools)biblioteci de dezvoltare

(libraries)

interfete de programare

(API-uri)

surse de date (data feeds)

platforme

avansat


71/84

Dr.Sab

inBuraga

www


instrumente


(libraries)


(API-uri)


platforme

RSS, geoRSS,

microformate,RDFa,

avansat


72/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

instrumente


(libraries)


(API-uri)


platforme

privind

fluxurile

RSS/Atom

specifice

serviciilor

publice

avansat


73/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

instrumente


(libraries)


(API-uri)


platforme

framework-uri

Web oferite deorganizatii

avansat


74/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

instrumente


(libraries)


(API-uri)


platformemedii de

dezvoltare

Web

avansat


75/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

instrumente


(libraries)


(API-uri)


platforme

Facebook,

Google App Engine,

avansat


76/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

mash-ups: aspecte de interes

performan: scalabilitatea & latena

limite ale API-urilor + existena versiunilor multipledrepturi de autor asupra datelor & liceniere

securitate: abuz, confidenialitate, ncredere etc.

monetizare

lipsa unei interoperabiliti realentre platforme

avansat


77/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

mash-ups: probleme

Same-Origin Security Policy

restrictioneaza ca un program JavaScript sa acceseze

doar datele provenite din acelasi domeniu Internet

cu cel al script-ului JavaScript

avansat


78/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

mash-ups: probleme


restrictioneaza ca un program JavaScript sa acceseze

doar datele provenite din acelasi domeniu Internet

cu cel al script-ului JavaScript

se permit transferuri vizand reprezentari de resurse

referitoare la imagini, fisiere CSS

si alte programe JavaScript

avansat


79/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

mash-ups: probleme


initiativa CORS (Cross-Origin Resource Sharing)

mecanism ce permite partajarea la nivel de client

a resurselor provenind din domenii Internet diferite

specificatie in lucru la Consortiul Web (aprilie 2012)

http://www.w3.org/TR/cors/

avansat


80/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

mash-ups: probleme

Alternativ, mash-up-urile pot fi implementate

la nivelul serverului Web

avansat


81/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

avansat


82/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

mash-ups

Pentru dezvoltare,

a se vizita ProgrammableWeb.com

detalii in [PW2, 183-242]


83/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

sacorezumat

Transfer asincron al datelorRIA, Ajax si mash-up-uri Web


84/84

Dr.Sab

inBuraga

www

.purl.org/net/bu

saco

?

Web12InteractiuneWeb Ajax Mashups

Documents

Transcript of Web12InteractiuneWeb Ajax Mashups