Web 2016 (12/13) Interacțiune Web cu Ajax. Aplicații Web hibride (mash-up-uri)

Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
Tehnologii Web
interacțiune Web
↹suita de tehnologii Ajax
aplicații Web hibride (mash-ups)

„Modul în care dăm
face mai mult decât ceea ce dăm.”
Pierre Corneille

Care e modalitatea de a transfera asincron
date între client(i) și server(e) Web?

interacțiune web: ajax
Asynchronous JavaScript And XML
(Jeese James Garrett)

permite transferul asincron de date
între un document HTML redat de client (browser)
și o aplicație rulând pe un server Web

oferă premisele asigurării unei interacțiuni complexe
cu utilizatorul (RIA – Rich Internet Application)
în cadrul unei aplicații Web

O suită de tehnologii deschise:
limbaje standardizate de structurare – e.g., HTML –
și de prezentare a datelor: CSS

redare + interacțiune la nivel de client (navigator) Web
via standardul DOM

interschimb și manipulare de date reprezentate prin:
diverse dialecte XML,
JSON (JavaScript Object Notation),
HTML,
alte formate

transfer (a)sincron de date via HTTP
facilitat de obiectul XMLHttpRequest

procesare folosind limbajul ECMAScript (JavaScript)

Componenta de bază: obiectul XMLHttpRequest
disponibil la nivelul navigatorului Web via JavaScript

specificația inițială bazată pe implementarea MSIE
oferită în prezent de aproape orice browser
www.w3.org/TR/XMLHttpRequest1/

specificația actuală oferită de navigatoarele Web moderne
(Living Standard, 26 aprilie 2016)
https://xhr.spec.whatwg.org/

permite realizarea de cereri HTTP – e.g., GET, POST,… –
dintr-un program rulând la nivel de client (browser)
spre o aplicație / un serviciu Web existent(ă) pe server,
în mod asincron ori sincron

datele vehiculate între programele client și server
pot avea orice format
uzual, modelate în XML (e.g., Atom, RSS, KML,…),
HTML și/sau JSON

paginile Web nu mai trebuie reîncărcate complet,
conținutul lor – structurat via HTML –
fiind manipulat prin DOM în cadrul browser-ului,
în conformitate cu datele recepționate de la server

Metode importante oferite de XMLHttpRequest
open ( )
inițiază – deschide – o conexiune HTTP cu serverul,
emițând o cerere: GET, POST,…

send ( )
transmite (asincron) date – e.g., XML, JSON etc. –,
spre aplicația/serviciul ce rulează pe server

send ( )
transmite (asincron) date – e.g., XML, JSON etc. –,
spre aplicația/serviciul ce rulează pe server
orice listener (asociat evenimentelor onload, ontimeout,
onabort,…) trebuie stabilit înainte de a trimite date

abort ( )
abandonează transferul de date curent

setRequestHeader ( )
specifică anumite câmpuri de antet HTTP
exemple: Cookie, Keep-Alive, User-Agent,…

getResponseHeader ( )
furnizează un anumit câmp prezent
în antetul mesajului de răspuns HTTP trimis de server

getAllResponseHeaders ( )
oferă toate câmpurile HTTP trimise de server,
exceptând Set-Cookie

Proprietăți de bază ale XMLHttpRequest
readyState
furnizează codul de stare a transferului:
0 – UNSENT, 1 – OPENED,
2 – HEADERS_RECEIVED, 3 – LOADING, 4 – DONE

status
oferă codul de stare HTTP întors de serverul Web:
200 (Ok)
404 (Not Found)
500 (Internal Server Error)
…

statusText
conține mesajul corespunzător codului de stare HTTP

responseText
responseXML
stochează răspunsul (datele) obținut(e) de la server

onreadystatechange
specifică funcția ce va fi invocată la modificările de stare
ale transferului de date dintre server și client
handler de tratare a
evenimentelor de transfer

Excepții ce pot fi emise
AbortError
InvalidAccessError
InvalidStateError
NetworkError
SecurityError
TimeoutError
…
conform DOM 4 Core

Noutăți:
stabilirea unui timeout privind realizarea unei cereri
(la nivel de milisecunde)
o valoare nenulă cauzează realizarea unei preîncărcări
(fetching) a resursei – https://fetch.spec.whatwg.org/
avansat

Noutăți:
datele vehiculate pot fi de mai multe tipuri
(ArrayBuffer, Blob, Document, DOMString, FormData)
detalii la https://xhr.spec.whatwg.org/#interface-formdata
avansat

Noutăți:
procesul de transmitere a datelor spre server (upload)
poate avea asociat un handler specific
via proprietatea upload
avansat

Noutăți:
progresul încărcării poate fi urmărit pe baza
funcționalităților specificate de interfața ProgressEvent
https://xhr.spec.whatwg.org/#interface-progressevent
avansat

interface XMLHttpRequest : XMLHttpRequestEventTarget {
// funcția de tratare a evenimentului de schimbare a stării transferului
attribute Function? onreadystatechange;
readonly attribute unsigned short readyState; // starea transferului
// realizarea unei cereri HTTP
// deschide o conexiune cu serverul Web
void open (ByteString metoda, [EnsureUTF16] DOMString url);
void open (ByteString metoda, [EnsureUTF16] DOMString url,
boolean asinc, optional ByteString? numecont = null,
optional DOMString? parola = null);
// stabilește antetul HTTP
void setRequestHeader (ByteString campAntet, ByteString valoare);
// stochează valoarea în milisecunde a timpului maxim de așteptare
attribute unsigned long timeout;
void send (optional data = null); // trimite date spre serverul Web
void abort (); // abandonează transferul
avansat

// receptarea răspunsului de la serverul Web
// codul de stare HTTP emis de server: 200, 303, 400,…
readonly attribute unsigned short status;
// textul asociat codului de stare
readonly attribute ByteString statusText;
// preia valoarea câmpului-antet din mesajul HTTP transmis de server
ByteString? getResponseHeader (ByteString antet);
// furnizează toate câmpurile răspunsului
ByteString getAllResponseHeaders ();
// specifică tipul MIME al răspunsului: blob, document, json, text,…
attribute XMLHttpRequestResponseType responseType;
// conține răspunsul propriu-zis
readonly attribute any response;
// furnizează răspunsul în format text
readonly attribute DOMString responseText;
// stochează răspunsul ca document XML
readonly attribute Document? responseXML;
};
avansat

interface XMLHttpRequestEventTarget : EventTarget {
// funcții de tratare a evenimentelor asociate transferului asincron
attribute Function? onloadstart; // transferul a început
attribute Function? onprogress; // se realizează transferul datelor…
attribute Function? onabort; // s-a abandonat transferul de date
attribute Function? onerror; // a apărut o eroare de transmisie
attribute Function? onload; // datele au fost recepționate de client
attribute Function? ontimeout; // a apărut o întârziere de transfer
attribute Function? onloadend; // transferul s-a terminat
};
// constante ce specifică starea transferului (vezi proprietatea readyState)
const unsigned short UNSENT = 0; // încă n-au fost efectuate transferuri
const unsigned short OPENED = 1; // s-a deschis conexiunea cu serverul
const unsigned short HEADERS_RECEIVED = 2; // primire câmpuri-antet HTTP
const unsigned short LOADING = 3; // datele propriu-zise se încarcă
const unsigned short DONE = 4; // gata! (transfer efectuat complet)
specificație WebIDL
avansat

http://caniuse.com/
suportul oferit de browser

Ce alte aspecte trebuie considerate
atunci când se recurge la Ajax?

interacțiune web: ajax – utilizări
Reîmprospătarea periodică a conținutului
e.g., știri recepționate în formate ca Atom sau RSS,
mesaje în cadrul aplicațiilor sociale, notificări,…

Anticiparea download-urilor
pre-încărcarea datelor (e.g., imagini) ce vor fi solicitate

Auto-completarea datelor
auto-completion
sugestii de căutare – exemplu: Google Suggest

Validarea în timp-real a datelor introduse
în formulare de către utilizator
exemplificare:
verificarea existenței unui cont sau a unei localități

Creare de componente de interfață Web (widgets)
sau de aplicații Web rulând pe platforme mobile
interacționează cu utilizatorul
pe baza evenimentelor survenite

interacțiune web: ajax – aspecte
Evitarea încărcării întregului document Web
avantaj:
se pot modifica doar fragmente de document
dezavantaj:
bookmarking-ul poate fi compromis
(nu există un URL unic desemnând
reprezentarea resursei curente)
avansat

Oferirea de alternative la Ajax,
atunci când suportul pentru acesta
nu este implementat/activat
graceful degradation
progressive enhancement
www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
avansat

Minimizarea traficului dintre browser și server
avansat

Transferul de date poate fi monitorizat (+interceptat)
via instrumente dedicate
la nivel de desktop:
instrumentul WireShark
avansat

direct în navigator (eventual, ca extensii)
Firebug, Fiddler, TamperData, Live HTTP Headers
avansat

Stabilirea unui mod clar de interacțiune
interacțiune HTML clasică
versus
interacțiune „bogată” cu Ajax
versus
interacțiune la nivelul unei aplicații convenționale
avansat

Adoptarea Ajax pentru creșterea utilizabilității,
nu doar de dragul tehnologiei
exemple negative:
distragerea utilizatorului
abuz de resurse (supradimensionarea arborelui DOM)
avansat

Ajax oferă premisele invocării asincrone
de servicii Web în stilul REST
folosind ca reprezentări ale datelor transferate:
POX (Plain Old XML)
JSON (JavaScript Object Notation)
AHAH (Asynchronous HTML and HTTP)
text neformatat

(în loc de) pauză

Care e suportul vizând implementarea?

interacțiune web: ajax – programare
La nivel de client
(biblioteci + framework-uri JavaScript)
Dojo: dojotoolkit.org
jQuery: jquery.com
Prototype: prototypejs.org
Rico: openrico.org
Script.aculo.us: script.aculo.us
altele: http://www.javascripting.com/search?q=ajax

La nivel de server
biblioteci, module, framework-uri
Apache Wicket, DWR, Vaadin etc. (Java)
Ajax Control Toolkit, MagicAjax.NET (.NET)
Express, nCombo, socket.io, Tower etc. (Node.js)
Cjax, Sajax, Symfony, Yii,… (PHP)
CGI::Ajax, Catalyst, Mason (Perl)
Ruby on Rails (Ruby)
…

API-uri specializate
exemplificări:
Bing Maps AJAX Control
http://msdn.microsoft.com/en-us/library/gg427610.aspx
Nokia HERE
https://developer.here.com/javascript-apis
Ajax în contextul extensiilor WordPress
http://codex.wordpress.org/AJAX_in_Plugins
avansat

interacțiune web: ajax – studiu de caz
Verificarea existenței unui nume de utilizator
în vederea creării unui cont de autentificare

Client
(browser)
Server
Web
XMLHttpRequest Server de aplicatii
open ("GET")
open ("POST")
send (...)
DOM
fereastra navigatorului datele XML (pe server)
interacțiune web: ajax – exemplu
verificarea existenței unui cont pe server

tratând prin DOM evenimentul onblur, putem detecta
– interogând asincron aplicația Web de pe server –
faptul că numele de cont introdus de utilizator
într-un formular Web deja a fost folosit de altcineva

aplicația Web de pe server – adoptând stilul REST –
va oferi un document XML modelând răspunsul la
interogarea „există deja un utilizator având un nume dat?”

var cerere; // încapsulează cererea HTTP către serverul Web
function incarcaXML (url) { // încarcă un document XML desemnat de 'url'
// verificăm existența obiectului XMLHttpRequest
if (window.XMLHttpRequest) {
cerere = new XMLHttpRequest (); // există suport nativ
} else
if (window.ActiveXObject) { // se poate folosi obiectul ActiveX din MSIE
cerere = new ActiveXObject ("Microsoft.XMLHTTP");
}
if (cerere) { // există suport pentru Ajax
// stabilim funcția de tratare a stării transferului de date
cerere.onreadystatechange = trateazaRaspunsCerere;
// preluăm documentul prin metoda GET
cerere.open ("GET", url, true);
cerere.send (null); // nu trimitem nimic serviciului Web
}
}

// funcția de tratare a schimbării de stare a cererii
function trateazaRaspunsCerere () {
// verificăm dacă încărcarea s-a terminat cu succes
if (cerere.readyState == 4) {
// am obținut codul de stare '200 Ok'?
if (cerere.status == 200) {
// procesăm datele recepționate prin DOM
// (preluăm elementul rădăcină al documentului XML)
var raspuns = cerere.responseXML.documentElement;
var rezultat = raspuns.getElementsByTagName
('rezultat')[0].firstChild.data;
// apelăm o funcție ce va modifica arborele DOM al paginii Web
// conform răspunsului transmis de serviciul invocat
…
}
// eventual, se pot trata și alte coduri HTTP (404, 500 etc.)
else {
alert ("Problemă la transferul datelor XML:n" + cerere.statusText);
}
}
vezi
exemplul
din arhivă

utilizatorul introduce un nume de cont; via Ajax, i se va semnala că
deja există, conform răspunsului XML trimis de către serviciul Web
cerere HTTP via URL-ul http://adresa.info/verifica.php?nume=marta
răspuns XML de forma <raspuns><rezultat>1</rezultat></raspuns>
0 = nu există

studiu de caz: RandomAjax
preia asincron o secvență
de numere aleatoare
generate de random.org
jsfiddle.net/busaco/2254kdqn/

Obținerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web oferit
codul-sursă recurge la biblioteca jQuery și e disponibil la
http://jsfiddle.net/busaco/4d2tmc6b/
studiu de caz: FlickrPics

Obținerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web oferit
utilizăm URL-ul
http://api.flickr.com/services/feeds/photos_public.gne
pentru a obține informații despre imagini
(formate disponibile: Atom, CSV, JSON, XML,…)
vezi http://www.flickr.com/services/feeds/docs/photos_public/

interactiune web: ajax – studiu de caz
Forma generală a răspunsului JSON transmis de Flickr:
{
"title" : "Recent Uploads",
"link" : "http://www.flickr.com/photos/",
"modified" : "2016-05-19T09:52:07Z",
"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 ..."
} ]
}

// preluăm asincron imagini disponibile pe Flickr
jQuery.getJSON
("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{ // datele de intrare transmise serviciului Web
tags: "Iasi, informatica", format: "json"
},
// funcția anonimă ce va procesa datele JSON trimise asincron de Flickr
function (data) {
// iterăm fiecare informație obținută de la serviciul Web
$.each (data.items, function (numar, foto) {
// creăm un element <img> având ca valoare a atributului "src"
// adresa Web inclusă în datele JSON obținute;
// acest <img> va fi adăugat la elementul cu id="imagini" din pagină
$ ("<img/>").attr ("src", foto.media.m).attr ("title", foto.title)
.appendTo ("#imagini");
});
});

un posibil rezultat – editarea & rularea codului via JSFiddle

Generalizând, putem recurge la metoda ajax ():
jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://undeva.info/ServiciuWeb/Resursa",
data: "{…}", // datele de intrare trimise serviciului
dataType: "json", // așteptăm răspunsul în format JSON
success: function (data) { // funcție apelată la transferul cu succes
$('.rezultat').html (data); // preluăm datele, convertindu-le în HTML
}
});
avansat

ajax: demo

interacțiune web: comet
Comet
termen propus de Alex Russel
permite ca datele să fie „împinse” (push) de către server
spre aplicația client, utilizând conexiuni HTTP
persistente (long-lived) în vederea reducerii latenței
avansat

Șablon de proiectare a aplicațiilor Web
care necesită realizarea de conexiuni persistente,
în stilul peer-to-peer
utilizat de aplicațiile Web intensiv interactive,
eventual colaborative
exemple: Google Docs, Mibbit,…
avansat

Complementar Ajax
long polling
HTTP server push
Reverse Ajax
http://ajaxpatterns.org/HTTP_Streaming
avansat

implementare: HTTP long polling sau HTTP streaming
de studiat M. Carbou, “Reverse Ajax,
Part 1: Introduction to Comet”, IBM developerWorks, 2011
http://www.ibm.com/developerworks/web/library/wa-reverseajax1/

Soluții de implementare
instrumente software – exemplificări:
Atmosphere, DWR, Ice Faces, Jetty, Orbited
în contextul JavaScript, un exemplu notabil este
APE (Ajax Push Engine)
www.ape-project.org
avansat

Soluții alternative:
adoptarea diverselor tehnologii HTML5
server-sent events
WebSocket
S. Buraga, „API-uri JavaScript în contextul HTML5”
http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week11
avansat

mash-ups
Ajax/Comet oferă suport pentru dezvoltarea de
aplicații Web hibride – mash-ups
combinarea – la nivel de client și/sau server –
a conținutului ce provine din surse (situri)
multiple, oferind o funcționalitate/experiență nouă

mash-ups
Exemplificare:
dorim să oferim o aplicație ce pune la dispoziție
informații din domeniul muzical
în funcție de activitățile fizice ale utilizatorului,
pe baza unor servicii Web publice

mash-ups
http://www.last.fm/api/rest
https://wiki.fitbit.com/display/API/Fitbit+API

mash-ups
acces la serviciile REST
despre formații + albume
via o cheie de autentificare

mash-ups
API-ul REST de la FitBit oferă
date în formatele JSON și XML

mash-ups
+ FiLa
aplicație Web hibridă
http://www.last.fm/api/rest
https://dev.fitbit.com/

mash-ups
Se bazează pe fluxuri de știri RSS/Atom,
servicii Web, API-uri publice,…
„curentul” SaaS (Software As A Service)

mash-ups
Caracteristici:
combinare
vizualizare
agregare

mash-ups
Combinare
utilizarea de surse de date multiple
poate avea caracter multidimensional
de exemplu,
subiect de interes + locație geografică + moment de timp
Yahoo! music search + Google maps + Eventful

mash-ups
proiectul ubiGuide (Ionuț Dănilă & Mihaela Ghimiciu, 2013—2014)

mash-ups
Vizualizare
pot fi adoptate diverse tehnici de vizualizare
(prezentare) a datelor:
chart-uri, cartografică, tag cloud-uri, tridimensională,…
de consultat S. Buraga, „Vizualizarea datelor”
http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week5

Coinorama: metode diverse de vizualizare în timp-real
a evoluției cursului monedelor virtuale

mash-ups
Agregare
gruparea datelor provenite din mai multe surse și
analizarea lor: statistici, clasificări, predicții,…
e.g., folosind data mining se pot releva
aspecte „ascunse” ale datelor procesate

Zemanta – recomandare „inteligentă” de resurse

mash-ups
Implementate la nivelul:
clientului (browser-ului) Web
și/sau
serverului Web

avansat

mash-ups
Surse de date
(data feeds)
Atom, RSS, geoRSS,
microdate HTML5, RDFa,…
Interfețe de programare
(API-uri)
specifice serviciilor publice
și de procesare JSON/XML/RDF
Biblioteci/framework-uri
pentru dezvoltare
framework-uri Web generice
sau oferite de organizații
Instrumente interactive
(Web tools)
eventual, disponibile în cloud
Platforme
(Platform As A Service)
Heroku, Google Cloud Platform,
Nodejitsu, Windows Azure,…
avansat

mash-ups
Your Life on Earth (BBC)
www.bbc.com/earth/story/20141016-your-life-on-earth

mash-ups
lista mash-up-urilor: www.programmableweb.com/mashups/directory
avansat

mash-ups: aspecte de interes
performanță: scalabilitatea și latența
limite ale API-urilor + existența versiunilor multiple
drepturi de autor asupra datelor și licențiere
securitate: abuz, confidențialitate, încredere etc.
monetizare
lipsa unei interoperabilități reale între platforme
avansat

Nu există o problemă de securitate
privind accesul la resurse via JavaScript?

Same-Origin Security Policy
stipulează că un program JavaScript trebuie să acceseze
doar datele aparținând aceleași origini
– i.e., provenite din același domeniu Internet –
a script-ului JavaScript
mash-ups: securitate
avansat

se permit doar transferuri vizând reprezentări de resurse
referitoare la imagini, fișiere CSS
și alte programe JavaScript aparținând aceleași origini
avansat

Same-Origin Security Policy
previne cazurile în care un document/program încărcat
dintr-o origine să poată accesa/modifica proprietăți
ale unui document aparținând altei origini
pentru detalii, a se consulta
https://developer.mozilla.org/Web/Security/Same-origin_policy
avansat

interactiune web: ajax – studiu de cazvar url = "http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film";
// realizăm o cerere HEAD pentru a obține meta-date despre o resursă
var client = new XMLHttpRequest ();
client.open ("HEAD", url, true);
client.send ();
client.onreadystatechange = function () {
// am recepționat câmpurile-antet?
if (client.readyState == 2) {
// semnalăm tipul MIME și data ultimei actualizări
alert ("Resursa de tip '" +
client.getResponseHeader ("Content-Type") + "' s-a actualizat la " +
client.getResponseHeader ("Last-Modified"));
}
}
preluarea în mod asincron
via HEAD a unor meta-date
avansat

URL al altui domeniueludăm Same Origin Policy
avansat

CORS (Cross-Origin Resource Sharing)
recomandare W3C – ianuarie 2014
http://www.w3.org/TR/cors/
mecanism ce permite partajarea la nivel de client
a resurselor provenind din domenii Internet diferite
astfel, se pot emite cereri via XMLHttpRequest între domenii
avansat

rezumat
interacțiune Web
↹transferul asincron al datelor
de la Ajax la mash-up-uri Web

„ultimul” episod: securitatea aplicațiilor Web

Web 2016 (12/13) Interacțiune Web cu Ajax. Aplicații Web hibride (mash-up-uri)

More Related Content

What's hot (10)

Similar to Web 2016 (12/13) Interacțiune Web cu Ajax. Aplicații Web hibride (mash-up-uri) (20)

More from Sabin Buraga (20)

Web 2016 (12/13) Interacțiune Web cu Ajax. Aplicații Web hibride (mash-up-uri)