Post on 27-Dec-2016
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/Tehnologii Web
micro-servicii & interacțiune Web
↹suita de tehnologii Ajax
aplicații Web hibride (mash-ups)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
„Modul în care dăm face mai mult decât ceea ce dăm.”
Pierre Corneille
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Există alternative la servicii Web?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Implementează o funcționalitate specifică, oferită la nivel de unic proces
self-contained system
componentă la nivel de backend dezvoltată cu scopul de a fi înlocuită, nu de a fi reutilizată
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
modularitate, descentralizare și evoluție permanentă
exemple de bună practică: http://microservices.io/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Funcționale (functional services)
implementează funcționalităti specifice (business operations)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Funcționale (functional services)
implementează funcționalităti specifice (business operations)
expuse consumatorului de servicii
independente (fără efecte colaterale – side effects)
nu sunt partajabile uzual
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Control – infrastructură (infrastructure services)
implementează activități non-funcționale: autentificare, autorizare, jurnalizare, monitorizare,…
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Control – infrastructură (infrastructure services)
implementează activități non-funcționale: autentificare, autorizare, jurnalizare, monitorizare,…
nu sunt expuse în exterior – private
pot fi partajate la nivel de aplicație ori servicii interne
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
brow-ser
controlproce-
sare
client „puternic”și/sau „isteț”
micro-servicii în context serverless – aplicația depinde semnificativ de componente externe, disponibile în „nori”
BaaS
Mike Roberts (2016) – http://martinfowler.com/articles/serverless.html
func-ționa-litate1
☁
func-ționa-litate2
☁
☁
auten-tificare
☁
BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service
☁
FaaS
căutare
procesarecomenzi
BaaS
comenzi
produse
acces la API
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Aspect de interes:
partajarea funcționalităților
share-as-much-as possible (SOA clasic)versus
share-as-little-as possible (micro-servicii)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Aspect de interes:
comunicarea – uzual, asincronă – între (micro-)servicii
abordări:point-to-point
sau publish-subscribe
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
implementare
intern, (micro-)serviciile pot comunica recurgând la publish-subscribe – www.w3.org/TR/pubsub/
simplificarea accesului clientului
via API
Jonas Bonér (2016)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Uzual, arhitecturile ce recurg la micro-serviciinu includ componente middleware
și nu oferă suport pentru abstractizarea interacțiunii dintre producătorii și consumatorii de servicii
(contract decoupling)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
arhitectură bazată pe servicii Web
arhitectură recurgând la micro-servicii
cazuri concrete: Amazon, Groupon, Netflix,…
de studiat prezentările lui Stefan Tilkov: https://speakerdeck.com/stilkov
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Care e modalitatea de a transfera asincrondate între client(i) și server(e) Web?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
limbaje standardizate de structurare – e.g., HTML –și de prezentare a datelor: CSS
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
redare + interacțiune la nivel de client (navigator) Webvia standardul DOM
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
interschimb și manipulare de date reprezentate prin:diverse dialecte XML,
JSON,HTML,
alte formate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
transfer (a)sincron de date via HTTPfacilitat de obiectul XMLHttpRequest
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
procesare folosind limbajul ECMAScript (JavaScript)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
disponibil la nivelul navigatorului Web via JavaScript
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
specificația inițială bazată pe implementarea MSIE
oferită în prezent de (aproape) orice browser
www.w3.org/TR/XMLHttpRequest1/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
specificația actuală (HTML5 Living Standard, 9 mai 2017)
implementată de navigatoarele Web curente
https://xhr.spec.whatwg.org/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
datele vehiculate între programele client și serverpot avea orice format
uzual, modelate în XML (e.g., Atom, RSS, KML,…),HTML și/sau JSON
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
open ( )
inițiază – deschide – o conexiune HTTP cu serverul,emițând o cerere: GET, POST,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
send ( )
transmite (asincron) date – e.g., XML, JSON etc. –,spre aplicația/serviciul ce rulează pe server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
abort ( )
abandonează transferul de date curent
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
setRequestHeader ( )
specifică anumite câmpuri de antet HTTP
exemple: Cookie, Keep-Alive, User-Agent,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
getResponseHeader ( )
furnizează valoarea unui anumit câmp prezentîn antetul mesajului de răspuns HTTP trimis de server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
getAllResponseHeaders ( )
oferă toate câmpurile HTTP trimise de server,exceptând Set-Cookie
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
readyState
furnizează starea transferului:0 – UNSENT
1 – OPENED
2 – HEADERS_RECEIVED
3 – LOADING
4 – DONE
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
status
oferă codul de stare HTTP întors de serverul Web:200 (Ok)
404 (Not Found)500 (Internal Server Error)
…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
statusText
conține mesajul corespunzător codului de stare HTTP
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
responseText
responseXML
stochează răspunsul (datele) obținut(e) de la server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
onreadystatechange
specifică funcția ce va fi invocată la modificările de stareale transferului de date dintre server și client
handler de tratare a evenimentelor de transfer
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Excepții ce pot fi emise
AbortError
InvalidAccessError
InvalidStateError
NetworkError
SecurityError
TimeoutError
…
conform DOM 4 Core
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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
a se studia și Fetch (HTML5 Living Standard, 24 mai 2017)https://fetch.spec.whatwg.org/
developers.google.com/web/updates/2015/03/introduction-to-fetch
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Noutăți:procesul de transmitere a datelor spre server (upload)
poate avea asociat un handler specific via proprietatea upload
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Ce alte aspecte trebuie considerate
atunci când se recurge la Ajax?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Anticiparea download-urilor
pre-încărcarea datelor (e.g., imagini) ce vor fi solicitate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Auto-completarea datelor
auto-completionsugestii de căutare – exemplu: Google Suggest
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Validarea în timp-real a datelor introduseîn formulare de către utilizator
exemplificare: verificarea existenței unui cont sau a unei localități
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Creare de componente de interfață Web (widgets) sau de aplicații Web rulând pe platforme mobile
interacționează cu utilizatorulpe baza evenimentelor survenite
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
Minimizarea traficului dintre browser și server
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
Transferul de date poate fi monitorizat(+interceptat) via instrumente dedicate
la nivel de desktop: instrumentul WireShark
direct în navigator (eventual, ca extensii)Firebug, Fiddler, TamperData, Live HTTP Headers
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
Adoptarea Ajax pentru creșterea utilizabilității,nu doar de dragul tehnologiei
exemple negative:distragerea utilizatorului
abuz de resurse (supradimensionarea arborelui DOM)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Ajax oferă premisele invocării asincronede (micro-)servicii Web în stilul REST
folosind diverse reprezentări ale datelor transferate: POX (Plain Old XML)
JSON (JavaScript Object Notation)AHAH (Asynchronous HTML and HTTP)
text neformatat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Care e suportul vizând implementarea?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – programare
La nivel de clientbiblioteci + framework-uri JavaScript tradiționale
AngularJS – angularjs.org
Backbone.js – backbonejs.org
Dojo Toolkit – dojotoolkit.org
jQuery (plus jQuery UI) – jquery.com
Prototype – prototypejs.org
MooTools – mootools.net
micro-biblioteci: http://microjs.com/#ajax
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – programare
La nivel de serverbiblioteci, module, framework-uri – exemple:
Java – Apache Wicket, DWR, OpenXava, Vaadin etc..NET – AJAX Control Toolkit: devexpress.com/act
Node.js – nodejsmodules.org/tags/ajax
PHP – Cjax: github.com/ajaxboy/cjax
Perl – CGI::Ajax, Catalyst, Mason etc.Python – wiki.python.org/moin/WebFrameworks
…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – programare
API-uri specializate
exemplificări:Bing Maps V8 Web Control
https://msdn.microsoft.com/en-us/library/mt712542.aspx
HERE JavaScript APIshttps://developer.here.com/javascript-apis
Ajax în contextul extensiilor WordPresshttps://codex.wordpress.org/AJAX_in_Plugins
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – studiu de caz
Verificarea existenței unui nume de utilizatorîn vederea creării unui cont de autentificare
în cadrul unei aplicații Web
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/Client
ServerWeb
XMLHttpRequest
Server de aplicații
open ("GET")
open ("POST")
send (...)
DOM
fereastra navigatorului
verificarea asincronă a existenței unui cont pe server
date XML (pe server)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – studiu de caz
Verificarea existenței unui nume de utilizatorîn vederea creării unui cont de autentificare
în cadrul unei aplicații Web
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – studiu de caz
Verificarea existenței unui nume de utilizatorîn vederea creării unui cont de autentificare
în cadrul unei aplicații Web
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?”
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
<?php // program PHP, cu rol de serviciu Web, rulat la nivel de serverdefine ('DOCXML', './particip.xml'); // locația documentului XML// trimitem tipul conținutului; aici, XMLheader ('Content-type: text/xml');
// funcție care verifică dacă un nume de participant deja există// returnează 1 dacă numele există, 0 în caz contrarfunction checkIfNameExists ($aName) {// încărcăm datele despre participanți via SimpleXMLif (!($xml = simplexml_load_file (DOCXML))) { return 0; }// parcurgem toți participanții găsiți cu XPath...foreach ($xml->xpath('/participants/participant/name') as $name) {
// comparăm numele, ignorând minusculele de majusculeif (!strcasecmp($aName, $name)) { return 1; }
}return 0;
}?><response>
<result><?php echo checkIfNameExists ($_REQUEST['name']); ?></result></response>
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
<!-- Formularul Web preluând date de la utilizator --><form action="add.php" method="post">
<div><label for="name">Account name:</label><input type="text" name="name" id="name"
onblur="javascript:signalNameExists (this.value, '')" /><!-- mesaj inițial ascuns --><span class="hidden" id="errName">
Name already exists, choose another one...</span>
</div>
<div><label for="adr">Address:</label><input type="text" name="adr" id="adr" />
</div>
<input type="submit" value="Apply" /></form>
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
// programul JS executat în cadrul browser-uluivar request; // încapsulează cererea HTTP către serverul Web
function loadXML (url) { // încarcă un document XML desemnat de 'url'// verificăm existența obiectului XMLHttpRequestif (window.XMLHttpRequest) {
request = new XMLHttpRequest (); // există suport nativ} else
if (window.ActiveXObject) { // se poate folosi obiectul ActiveX din MSIErequest = new ActiveXObject ("Microsoft.XMLHTTP");
}if (request) { // există suport pentru Ajax
// stabilim funcția de tratare a stării transferului de daterequest.onreadystatechange = handleResponse; // preluăm documentul prin metoda GET request.open ("GET", url, true); request.send (null); // nu trimitem nimic serviciului Web
}}
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
// funcția de tratare a schimbării de stare a cereriifunction handleResponse () {
// verificăm dacă încărcarea s-a terminat cu succesif (request.readyState == 4) {
// am obținut codul de stare '200 Ok'?if (request.status == 200) {
// procesăm datele recepționate prin DOM// (preluăm elementul rădăcină al documentului XML)var response = request.responseXML.documentElement; var res = response.getElementsByTagName('result')[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 ("A problem occurred:\n" + request.statusText);
}}
veziexempluldin arhivă
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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://undeva.info/verify.php?name=tux
răspuns XML de forma <response><result>1</result></response>
0 = nu există
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
studiu de caz: RandomAjax
preia asincrono secvență de numere aleatoare generate de random.org – trimisă ca
text obișnuitjsfiddle.net/busaco/2254kdqn/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
const URL = 'https://www.random.org/sequences/?min=1&max=33&col=1&format=plain';const TIME = 2000;
var xhr = new XMLHttpRequest();var numbers = document.getElementById('numbers');// eveniment de tratare a expirării timpului de așteptarexhr.ontimeout = function () { numbers.textContent = 'Time-out... :('; };// eveniment de tratare a preluării datelor solicitate unui serviciuxhr.onload = function () {
if (xhr.readyState === 4) { // am primit dateleif (xhr.status === 200) { // răspuns Ok din partea serverului
// înlocuim spațiile albe cu virgulă și plasăm conținutul// în cadrul elementului HTML identificat prin 'numbers'numbers.textContent = xhr.responseText.trim().replace(/\W+/g, ', ');
} else {numbers.textContent = 'An error occurred: ' + xhr.statusText;
}}
};
xhr.open("GET", URL, true); // deschidem conexiuneaxhr.timeout = TIME; // stabilim timpul maxim de așteptare a răspunsuluixhr.send(null); // nu expediem date
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
studiu de caz: RandomAjax (Fetch)
soluție folosind Fetch API
pentru aceeași problemăjsfiddle.net/busaco/a2q9regd/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
function status(response) { // recurgem la promises – github.com/wbinnssmith/awesome-promises –// pentru a realiza procesări în funcție de codul de stare HTTPif (response.status >= 200 && response.status < 300) {return Promise.resolve(response) // cererea poate fi rezolvată
} else {return Promise.reject(new Error(response.statusText)) // cererea a fost rejectată
}}
fetch(URL).then(status) // verificăm dacă datele au fost recepționate cu succes.then((response) => response.text()) // transformăm obiectul răspunsului în șir de caract..then(function(response) { // procesăm secvența de numere
// înlocuim spațiile albe cu virgulă și plasăm conținutul// în cadrul elementului HTML identificat prin 'numbers'var numbers = document.getElementById('numbers');numbers.textContent = response.trim().replace(/\W+/g, ', ');
}).catch(function(error) { // a survenit o eroare :(
numbers.textContent = 'An error occurred: ' + error;});
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Obținerea fotografiilor publice stocate pe situlFlickr pe baza serviciului Web oferit
codul-sursă recurge la biblioteca jQuery și e disponibil la http://jsfiddle.net/busaco/4d2tmc6b/
studiu de caz: FlickrPics
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Obținerea fotografiilor publice stocate pe situlFlickr pe baza serviciului Web oferit
utilizăm URL-ulhttp://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/
studiu de caz: FlickrPics
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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" : "2017-05-23T13:03: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 ..."
} ]}
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/// 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", tagmode: "all", 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 (number, photo) {
// 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="pics" din pagină$ ("<img/>").attr ("src", photo.media.m).attr ("title", photo.title)
.appendTo ("#pics"); });
});
studiu de caz: FlickrPics
JSONP
JSONP (JSON with Padding) – tinyurl.com/n733jtb
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
studiu de caz: FlickrPics
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – studiu de caz
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: comet
Comet
termen propus de Alex Russel
permite ca datele să fie „împinse” (push) de către serverspre aplicația client, utilizând conexiuni HTTP
persistente (long-lived) în vederea reducerii latenței
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: comet
Șablon de proiectare a aplicațiilor Webcare necesită realizarea de conexiuni persistente,
în stilul peer-to-peer
utilizat de aplicațiile Web intensiv interactive,eventual colaborative – e.g., Mibbit
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: comet
Complementar Ajax
long pollingHTTP server push
Reverse Ajax
de studiat M. Carbou, “Reverse Ajax, Part 1.Introduction to Comet”, IBM developerWorks, 2011
www.ibm.com/developerworks/web/library/wa-reverseajax1/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: comet
Soluții alternative, moderne: adoptarea diverselor tehnologii HTML5
server-sent eventsWebSocket
detalii la cursul „Dezvoltarea aplicațiilor Web la nivel de client”https://profs.info.uaic.ro/~busaco/teach/courses/cliw/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
(în loc de) pauză
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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ă
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Exemplificare:
dorim să oferim o aplicație ce pune la dispozițieinformații din domeniul muzical
în funcție de activitățile fizice ale utilizatorului,pe baza unor servicii Web publice
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
http://www.last.fm/api/rest
https://wiki.fitbit.com/display/API/Fitbit+API
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
acces la serviciile RESTdespre formații + albume
via o cheie de autentificare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
API-ul REST de la FitBit oferă date în formatele JSON și XML
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
+ FiLaaplicație Web hibridă
http://www.last.fm/api/rest
https://dev.fitbit.com/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Se bazează pe fluxuri de știri RSS/Atom, servicii Web, API-uri publice,…
„curentul” SaaS (Software As A Service)
implementare la nivelul: clientului (browser-ului) Web și/sau serverului Web
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Caracteristici:combinarevizualizare
agregare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Combinare
utilizarea de surse de date multiplepoate avea caracter multidimensional
de exemplu, subiect de interes + locație geografică + moment de timp
Yahoo! Music Search + Google Maps + Eventful
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
un mash-up Web de studiere a efectelor detonării bombelor nucleare – nuclearsecrecy.com/nukemap/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Vizualizare
pot fi adoptate diverse tehnici de vizualizare(prezentare) a datelor:
chart-uri, cartografică, tag cloud-uri, tridimensională,…
detalii în cadrul materiei „Dezvoltarea aplicațiilor Web la nivel de client” (anul 3, sem. I)
https://profs.info.uaic.ro/~busaco/teach/courses/cliw/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
metode diverse de vizualizare în timp-real a evoluției cursului monedelor virtuale – Coinorama
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Agregare
gruparea datelor provenite din mai multe surse șianalizarea lor: statistici, clasificări, predicții,…
e.g., folosind data mining se pot relevaaspecte „ascunse” ale datelor procesate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
recomandare de parfumuri – ScentSee
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Surse de date(data feeds)
Atom, RSS, geoRSS, micro-date HTML5, RDFa,…
Interfețe de programare(API-uri)
specifice serviciilor publiceși de procesare JSON/XML/RDF
Biblioteci/framework-uripentru dezvoltare
framework-uri Web genericesau 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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Your Life on Earth (BBC)www.bbc.com/earth/story/20141016-your-life-on-earth
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
lista mash-up-urilor: www.programmableweb.com/mashups/directory
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Nu există o problemă de securitateprivind accesul la resurse via JavaScript?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Same-Origin Policy
“restricts how a document or script loaded from one origin can interact with a resource from another origin”
astfel, un program JavaScript trebuie să acceseze doar datele aparținând aceleași origini
– i.e., provenite din același domeniu Internet
mash-ups: securitate
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
se permit doar transferuri vizând reprezentări de resursereferitoare la imagini, fișiere CSS
și alte programe JavaScript aparținând aceleași origini
avansat
clientserver Web
HTTPJSON, XML,…
APIpublic
APIpublic
HTTPJPG
HTTPJPG
Same-Origin Policy
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Same-Origin Policy
previne cazurile în care un document/program încărcatdintr-o origine să poată accesa/modifica proprietăți
ale unui document aparținând altei origini
pentru detalii, a se consultahttps://developer.mozilla.org/Web/Security/Same-origin_policy
avansat
mash-ups: securitate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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ărialert ("Resursa de tip '" +
client.getResponseHeader ("Content-Type") + "' s-a actualizat la " + client.getResponseHeader ("Last-Modified"));
}}
preluarea cu HEAD a unor meta-date, în mod asincron
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URL al altui domeniuse încalcă Same Origin Policy
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
CORS (Cross-Origin Resource Sharing)
recomandare W3C (2014)www.w3.org/TR/cors/
permite partajarea la nivel de client a resurselorprovenind din domenii Internet diferite
astfel, se pot emite cereri între domenii (cross-origin)
avansat
mash-ups: securitate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Poate fi abstractizat accesul la surse de date disponibile pe Web?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: yql
Yahoo! Query Language
abstractizează accesul la surse de date eterogenece pot fi obținute via servicii Web
https://developer.yahoo.com/yql/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: yql
Permite – pe baza unui limbaj similar SQL –interogarea, filtrarea, combinarea datelor la nivel de Web
(suport pentru realizarea de mash-up-uri)
facilitează atașarea la aplicația Web dezvoltatăa surselor de date de interes:
fluxuri de știri, informații cartografice, resurse multimedia etc.
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: yql
Adoptă o sintaxă SQLshow, desc, select, use, insert, update, delete
surse de date publice Yahoo! (built-in tables) sau oferite de terți (community tables) – e.g., Amazon,
Apple, arXiv, Deviant Art, Europarliament, GitHub, Last.fm, PayPal, Spotify, Steam, Tumblr, Yelp,…
răspunsul la o interogare ≡ rânduri (rows) de date
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
avansat
creații muzicaleoferite de iTunes
select * from apple.itunes
where term='Eclipse' and
media='music';
URL-ul corespunzător cererii
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
Graph Query Language
“a query language for APIs and a runtime for fulfilling those queries with your existing data”
declarativ, inspirat de JSON, strict (strong-typed)considerat alternativă la paradigma REST
http://graphql.org/
https://learngraphql.com/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
Graph Query Language
implementare de referință în JavaScript: GraphQL.js
biblioteci disponibile pentru C, Go, Java, .NET, PHP, Python, Scala, Typescript,…
de experimentat și Apollo – www.apollodata.com
detalii în Vince Ling, State of GraphQL 2016https://scaphold.io/blog/2016/10/31/state-of-graphql.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
interogare interactivă cu GraphQLa API-ului vizând „Războiul Stelelor”
graphql.org/swapi-graphql/
exemple de interogări via GraphQL ale unor API-uri publice (e.g., Hacker News, Reddit, Twitter): www.graphqlhub.com
schemarezultateinterogare
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la dateservicii Web
model de calcul
ofertantde servicii mobile
mash-up-uri la nivelde dispozitiv mobil
model de implementaremodel de interacțiune
adaptare după Tom Croucher
model de comunicare
model al fluxului
de date
⚙⚙
⚙⚙
GraphQLYQL
avansat
studiu de caz
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/rezumat
micro-servicii & interacțiune Web
↹micro-servicii Ajax
mash-up-uri Web modele de acces la date
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
„ultimul” episod: securitatea aplicațiilor Web