CLIW 2014—2015 (8/12): JavaScript în navigatorul Web

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
{ⵄ}
programare Web
JavaScript în cadrul navigatorului Web

“Solving the problem is more important
than being right.”
Milton Glaser

Cum rulează programele JavaScript
în navigatorul Web?

Majoritatea programelor JavaScript
rulează – sunt interpretate –
în navigatorul Web via un script engine

Majoritatea programelor JavaScript
rulează – sunt interpretate –
în navigatorul Web via un script engine
Chakra (Microsoft)
SpiderMonkey, IonMonkey, Rhino (Mozilla)
V8 (Google, Opera, Node.js)

Cod JavaScript intern vs.
preluat dintr-un fișier extern
<body>
…
<script type="text/javascript">
alert ("Salut, lume!");
</script>
</body>
<script type="text/javascript" src="http://salutari.info/salut.js">
</script>

Remarcă:
în loc de tipul MIME text/javascript
ar putea fi indicat application/javascript
nesuportat de versiuni
IE mai vechi

Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
specificații ale Consorțiului Web
www.w3.org/DOM/DOMTR
a se revedea cursul
“Tehnologii Web”

<!DOCTYPE html>
<html>
<body>
<p>Tehnologii Web</p>
<div>
<img src="web.png"/>
</div>
</body>
</html>
HTML
HtmlElement
HTML
BodyElement
HTML
ParagraphElement
Text
HTML
DivElement
HTML
ImageElement

Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
minimal, navigatorul Web implementează
recomandarea DOM Level 2 HTML (2003)
www.w3.org/TR/DOM-Level-2-HTML

De asemenea, programele JavaScript au acces
la diverse obiecte oferite de mediul de execuție
pus la dispoziție de browser
e.g., informații privind contextul rulării
(caracteristici ale navigatorului, latența rețelei),
istoricul navigării, fereastra de redare a conținutului,
transfer (a)sincron de date,…

Arborele DOM asociat documentului (X)HTML
poate fi accesat/alterat via obiectul document
instanță a clasei implementând interfața HTMLDocument

interface HTMLDocument : Document {
attribute DOMString title; // titlul documentului
readonly attribute DOMString referrer; // adresa resursei ce referă pagina
readonly attribute DOMString domain; // domeniul de care aparține
readonly attribute DOMString URL; // URL-ul absolut al documentului
attribute HTMLElement body; // acces la elementul <body>
readonly attribute HTMLCollection images; // lista tuturor imaginilor
readonly attribute HTMLCollection links; // lista tuturor legăturilor
readonly attribute HTMLCollection forms; // lista tuturor formularelor
attribute DOMString cookie; // acces la cookie-uri
// emite o excepție dacă e asignată o valoare
void open (); // deschide un flux de scriere (alterează DOM-ul curent)
void close (); // închide fluxul de scriere și forțează redarea conținutului
void write (in DOMString text); // scrie un șir de caract. (e.g., cod HTML)
void writeln (in DOMString text); // idem, dar inserează și new line
NodeList getElementsByName (in DOMString numeElement);
// furnizează o listă de elemente conform unui nume de tag
};
interfață specificată în limbajul declarativ WebIDL

Deoarece interfața HTMLDocument
extinde Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală

Proprietatea documentElement
desemnează nodul-rădăcină

getElementById (identificator)
furnizează un element – nod de tip Element –
conform identificatorului său unic, desemnat de valoarea
atributului id specificat în cadrul documentului

parentNode
oferă acces la numele nodului-părinte al nodului curent

nextSibling
acces la următorul nod de pe același nivel al arborelui

previousSibling
acces la nodul precedent de pe același nivel al arborelui

childNodes
proprietate furnizând într-un tablou
numele nodurilor-copil ale nodului curent

firstChild
desemnează primul nod-copil al nodului curent

lastChild
specifică ultimul nod-copil al nodului curent

attributes
reprezintă tabloul asociativ
conținând atributele asociate unui nod de tip Element

function topLevelNodeAt (nod, top) {
while (nod && nod.parentNode != top)
nod = nod.parentNode;
return nod;
}
function topLevelNodeBefore (nod, top) {
while (!nod.previousSibling && nod.parentNode != top)
nod = nod.parentNode;
return topLevelNodeAt (nod.previousSibling, top);
}
discuție
Ce rol au cele două funcții?

Interfața HTMLElement o extinde
pe cea generală oferită de DOM Level 2
fiecare element HTML specific derivă din ea

// un element HTML generic
interface HTMLElement : Element {
attribute DOMString id; // identificator asociat elementului
attribute DOMString title; // titlu explicativ
attribute DOMString lang; // limba în care e redactat conținutul
attribute DOMString className; // numele clasei CSS folosite pentru redare
};
// specifică un formular Web
interface HTMLFormElement : HTMLElement {
readonly attribute HTMLCollection elements; // elementele HTML incluse în formular
readonly attribute long length; // numărul câmpurilor formularului
attribute DOMString action; // URI-ul resursei ce procesează datele
attribute DOMString enctype; // tipul MIME de codificare a datelor
// (e.g., application/x-www-form-urlencoded)
attribute DOMString method; // metoda HTTP folosită: GET, POST
void submit(); // trimite date URI-ului definit de ‘action’
};
// o imagine (conținut grafic raster)
interface HTMLImageElement : HTMLElement {
attribute DOMString alt; // text alternativ descriind conținutul grafic
attribute DOMString src; // URI-ul resursei grafice
};

Interfața HTMLCollection modelează o listă de noduri
un nod poate fi accesat folosind un index numeric
sau pe baza unui identificator (e.g., stabilit via atributul id)
interface HTMLCollection {
readonly attribute unsigned long length; // oferă lungimea listei
Node item (in unsigned long index); // oferă un nod via un index numeric
Node namedItem (in DOMString name); // furnizează un nod pe baza numelui
};

Cum putem afla/modifica diverse informații
privind nodurile arborelui DOM?

Informații referitoare la nodurile arborelui DOM
nodeType
proprietate care furnizează tipul unui nod
ELEMENT_NODE (1) = element
TEXT_NODE (3) = conținut text
COMMENT_NODE (8) = comentariu
…

nodeValue
proprietate oferind valoarea unui nod

innerHTML
proprietate – mutabilă – ce furnizează codul (X)HTML
din cadrul unui nod de tip Element
utilizare
nerecomandabilă

textContent
proprietate ce furnizează/stabilește conținutul textual
al nodului și posibililor descendenți

getAttribute (numeAtribut)
metodă care oferă acces la valoarea unui atribut

Modificarea structurii arborelui DOM
createElement (element)
creează un nod de tip Element

createTextNode (nod)
creează un nod cu conținut textual

appendChild (nod)
adaugă un nod-copil nodului curent

// funcție care generează un număr de elemente HTML
// pe care le adaugă elementului identificat prin 'identificator'
function genereazaElemente (numarElem, numeElem, identificator) {
for (var it = 0; it < numarElem; it++) {
// creăm un element specific
var element = document.createElement (numeElem);
// ...și-i atașăm un nod text
var text = document.createTextNode ("Salut, lumea...");
element.appendChild (text);
// adăugăm nodul creat
document.getElementById (identificator).appendChild (element);
}
}
genereazaElemente (3, "div", "continut"); // 3 <div>-uri
genereazaElemente (2, "p", "lumi"); // 2 paragrafe (<p>)
<div id="lumi"></div>
<h1 id="continut"></h1> a se studia exemplele
din arhivă

consultarea arborelui DOM via extensia Firebug
inspectarea valorilor
proprietăților DOM
arborele DOM corespunzător
codului HTML
generat prin program

removeChild (nod)
elimină un nod-copil

cloneChild ()
„clonează” un nod al arborelui

setAttribute (atribut, valoare)
stabilește valoarea unui atribut

generarea dinamică
a unui formular Web
http://jsfiddle.net/busaco/0wvn3fha/
recurgerea la
createElement()
appendChild()
getElementById()
JS Fiddle

Găsirea de noduri via selectori CSS
Selectors API
recomandare W3C (februarie 2013)
www.w3.org/TR/selectors-api/

Găsirea de noduri via selectori CSS
querySelector (selectori)
furnizează primul element – folosind traversarea
în adâncime în preordine – care se potrivește grupului
de selectori (deliminați de virgulă)
querySelectorAll (selectori)
oferă lista de tip NodeList a tuturor elementelor găsite

exemplificare – folosim consola oferită de browser:
document.querySelectorAll ("section[id^="week"]:nth-child(even) > h2");
selectori
CSS3

Răspunsul la evenimente
eveniment = acțiune produsă în cadrul mediului de
execuție în urma căreia programul va putea reacționa

codul JavaScript invocat la apariția unui eveniment
va putea fi încapsulat într-o funcție de tratare a acestuia
(handler)

tradițional, se atașează cod JavaScript ce va fi executat
la apariția unui eveniment de bază
(e.g., onclick, onmouseover, onchange, onload, onkeypress,…)
asupra unui element

<button onclick="alert ('Au!');">Apasă-mă!</button>

pentru a inhiba execuția acțiunii implicite,
codul JavaScript va trebui să întoarcă false


document.getElementById ("identificator").onclick
= trateazaClick; // mai ‘evoluat’ via DOM 1

tratarea standardizată a evenimentelor:
specificația DOM Level 2 Events
www.w3.org/TR/DOM-Level-2-Events/

specificarea de activități executate
la apariția unui eveniment
obiect.addEventListener ("eveniment", funcție, mod);

descrierea arborescentă a fluxului de evenimente
capture versus bubble

fluxul de evenimente (T. Leithead et al., 2012)
a se studia și W. Page, An Introduction to DOM Events (2013)
http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/

mod = true
se încearcă tratarea evenimentului pornind
de la rădăcină până la obiectul-țintă – capture phase

mod = false
se încearcă tratarea evenimentului atunci când
evenimentul e propagat de la obiectul unde a survenit
până la entitățile superioare lui – bubbling phase

se va utiliza un set standard de evenimente
e.g., de control al interacțiunii cu utilizatorul

proprietăți asociate evenimentelor
privind acțiunile mouse-ului
click, mousedown, mouseup, mouseover,
mousemove, mouseout

proprietăți asociate evenimentelor
privind acțiunile mouse-ului
button – butonul acționat (0=stâng, 1=median, 2=drept)
detail – numărul de apăsări ale butonului
clientX – coordonata orizontală a poziției mouse-ului
clientY – coordonata verticală a poziției mouse-ului

interface MouseEvent : UIEvent {
readonly attribute long screenX, screenY; // coordonate relative la ecran
readonly attribute long clientX, clientY; // coordonate relative la zona de redare
readonly attribute boolean ctrlKey, shiftKey, altKey, metaKey; // taste speciale utilizate?
readonly attribute unsigned short button; // indică butonul acționat
readonly attribute EventTarget relatedTarget;
void initMouseEvent (in DOMString typeArg, // inițializează evenimentul de tratare
in boolean canBubbleArg,
in boolean cancelableArg,
in views::AbstractView viewArg,
in long detailArg,
in long screenXArg,
in long screenYArg,
in long clientXArg,
in long clientYArg,
in boolean ctrlKeyArg,
in boolean altKeyArg,
in boolean shiftKeyArg,
in boolean metaKeyArg,
in unsigned short buttonArg,
in EventTarget relatedTargetArg);
};
detalii la www.w3.org/TR/DOM-Level-2-Events/events.html
argumente specifice

proprietăți asociate evenimentelor vizând tastatura
keyup, keydown, keypress
charCode – codul caracterului asociat tastei acționate
keyCode – codul tastei acționate

interacțiuni tactile – touch events
recomandare a Consorțiului Web (octombrie 2013)
www.w3.org/TR/touch-events/

interface Touch { // specifică zona tactilă
readonly attribute long identifier;
readonly attribute EventTarget target;
readonly attribute long screenX;
readonly attribute long screenY;
readonly attribute long clientX;
readonly attribute long clientY;
readonly attribute long pageX;
readonly attribute long pageY;
};
interface TouchList { // definește lista punctelor de contact pentru un eveniment tactil
readonly attribute unsigned long length;
getter Touch? item (unsigned long index);
};
interface TouchEvent : UIEvent {
readonly attribute TouchList touches;
readonly attribute TouchList targetTouches;
readonly attribute TouchList changedTouches;
readonly attribute boolean altKey;
readonly attribute boolean metaKey;
readonly attribute boolean ctrlKey;
readonly attribute boolean shiftKey;
};
pot fi tratate
evenimentele
touchstart
touchend
touchmove
touchcancel

evenimente referitoare la interacțiunea cu browser-ul
load, unload, select, change, submit, focus, blur, resize, scroll

evenimente privitoare la modificarea arborelui DOM
(mutation events)
DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved,
DOMAttrModified, DOMCharacterDataModified,
DOMNodeInsertedIntoDocument,
DOMNodeRemovedFromDocument

evenimente privitoare la modificarea arborelui DOM
(mutation events)
în prezent, acestea sunt considerate învechite
alternativă: recurgerea la MutationObserver (DOM 4)
http://www.w3.org/TR/dom/#mutation-observers

proprietăți utile ale obiectului Event
type
specifică tipul evenimentului ca șir de caractere
e.g., "click", "load", "scroll", "submit"

target
desemnează nodul
asupra căruia evenimentul a fost declanșat inițial

currentTarget
indică nodul care tratează evenimentul

bubbles
indică dacă evenimentul se propagă
spre elemente ascendente (valoarea true)
ori către descendenți (valoarea false)

bubbles
e.g., evenimentele abort, error, select, submit, resize, scroll,
click, mousedown, mouseover, mousemove, mouseout,
touchstart, touchend pot avea bubbles = true

bubbles
în cazul evenimentelor focus, blur, load, unload,
proprietatea bubbles are valoarea false

cancelable
precizează dacă evenimentul poate fi întrerupt

cancelable
de exemplu, pentru evenimentele load, unload, abort, error,
select, focus, blur, resize, scroll, touchcancel
proprietatea cancelable este setată ca fiind false

cancelable
pentru evenimente precum click, mousedown, mouseup,
mouseover, mousemove, mouseout, touchstart, touchend,
touchmove proprietatea cancelable poate fi true

eliminarea tratării unui eveniment
removeEventListener ()

ignorarea comportamentului implicit
preventDefault ()

comportamentul implicit pentru evenimentul tactil
touchend poate varia în funcție de context/platformă:
mousemove, mousedown, mouseup, click

trimiterea evenimentului să poată fi procesat
conform modelului oferit de implementare
dispatchEvent ()

Remarcă:
unele navigatoare acceptă tratarea unor evenimente
nestandardizate (încă) de Consorțiul Web
exemple:
editarea datelor – cut, copy, paste

Remarcă:
anumite evenimente sunt specificate în cadrul HTML5
conectivitatea la rețea: online, offline
interacțiunea cu utilizatorul: redo, undo, drag, drop,
mousewheel, contextmenu, pagehide, pageshow,…
starea dispozitivului – deviceorientation, devicemotion
utilizarea imprimantei – beforeprint, afterprint
…și altele

studiu de caz (Ondřej Žára, 2013)
calcul tabelar în
30 de linii JavaScript
jsfiddle.net/ondras/hYfN3/

for (var i = 0; i < 6; i++) { // construim tabelul cu câmpuri de intrare
var row = document.querySelector ("table").insertRow (-1); // adăugăm un rând la tabel
for (var j = 0; j < 6; j++) {
var letter = String.fromCharCode ("A".charCodeAt (0) + j - 1);
row.insertCell (-1).innerHTML = i && j ? "<input id='" + letter + i + "'/>" : i || letter;
}
}
var DATA={}, INPUTS=[].slice.call (document.querySelectorAll ("input"));
INPUTS.forEach ( function(elm) { // pentru fiecare element <input>, procesăm valoarea
elm.onfocus = function (e) { e.target.value = localStorage[e.target.id] || ""; };
elm.onblur = function (e) { localStorage[e.target.id] = e.target.value; computeAll(); };
var getter = function () { // funcție de furnizare a valorii (deja stocată în localStorage)
var value = localStorage[elm.id] || "";
if (value.charAt(0) == "=") { // începe cu =, deci e o formulă care va fi evaluată
with (DATA) return eval (value.substring(1));
} else { return isNaN (parseFloat (value)) ? value : parseFloat (value); }
};
Object.defineProperty (DATA, elm.id, { get: getter });
Object.defineProperty (DATA, elm.id.toLowerCase(), { get: getter });
} );
( window.computeAll = function () {
INPUTS.forEach (function (elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });
} )();

În ce mod are loc transferul asincron
între aplicațiile de pe server și documentul Web?

AJAX – Asynchronous JavaScript And XML
permite transfer asincron de date
între client (browser) și serverul Web
a se revizita cursul
“Tehnologii Web”

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

redare + interacțiune la nivel de client 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
facilitat de obiectul XMLHttpRequest

procesare folosind limbajul ECMAScript (JavaScript)

obiectul XMLHttpRequest
disponibil la nivel de navigator 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ă – W3C Working Draft (ianuarie 2014)
implementată de navigatoarele recente
www.w3.org/TR/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

interface XMLHttpRequest : XMLHttpRequestEventTarget {
attribute Function? onreadystatechange;
// funcția de tratare a evenimentului de schimbare a stării transferului
readonly attribute unsigned short readyState; // starea transferului
// realizarea unei cereri HTTP
void open (DOMString metoda, DOMString url, optional boolean asinc = true,
optional DOMString? cont, optional DOMString? parola); // deschide conex.
void setRequestHeader (DOMString campAntet, DOMString valoare);
// stabilește antetul HTTP
void send (optional data = null); // trimite date spre serverul Web
void abort (); // abandonează transferul
// receptarea răspunsului de la serverul Web
readonly attribute unsigned short status; // codul de stare HTTP: 200, 303, 400,…
readonly attribute DOMString statusText; // textul asociat codului de stare
DOMString? getResponseHeader (DOMString antet); // preia antetul HTTP
DOMString getAllResponseHeaders (); // preia toate câmpurile răspunsului
readonly attribute any response; // conține răspunsul propriu-zis
readonly attribute DOMString responseText; // conține răspunsul: format text
readonly attribute Document? responseXML; // stochează răspunsul: date XML
};

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 se încarcă
const unsigned short DONE = 4; // gata! (transfer efectuat complet)

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 ( )
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

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
conțin 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

excepții specifice care pot fi emise (conform DOM 4 Core)
AbortError InvalidAccessError InvalidStateError
NetworkError SecurityError TimeoutError
…

noutăți:
stabilirea unui timeout privind realizarea unei cereri

noutăți:
datele vehiculate pot fi de mai multe tipuri
(ArrayBuffer, Blob, Document, DOMString, FormData)

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

noutăți:
utilizând constructorul AnonXMLHttpRequest,
transferurile sunt considerate „anonime”
(i.e., nu se trimit cookie-uri, anteturi de autentificare,…)

http://caniuse.com/
verificarea suportului oferit
de browser vizând o tehnologie

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

oferirea de alternative la Ajax, atunci când suportul
pentru acesta nu este implementat/activat
graceful degradation

minimizarea traficului dintre browser și server

transferul de date poate fi monitorizat (+interceptat)
via instrumente dedicate
WireShark
Firebug, Fiddler, TamperData, Live HTTP Headers

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

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

oferă premisele invocării asincrone de servicii Web
în stilul REST
transferul de date se realizeaza via POX (Plain Old XML),
JSON (JavaScript Object Notation),
AHAH (Asynchronous HTML and HTTP)
sau text neformatat

Șabloane de proiectare AJAX
privind programarea:
invocare de servicii Web (RESTful Service, JSON Message)
dialog între browser & server
(Periodic Refresh, Submission Throttling, Cross-Domain Proxy)
asigurarea performanței (Fat Client, Browser-Side Cache,
Guesstimate, Predictive Fetch, Code Compression, On-Demand JS)
popularea arborelui DOM

referitoare la interacțiunea cu utilizatorul:
formulare
(Live Form, Data Grid, Progress Indicator, Suggestion, Slider)
widget-uri de afișare a conținutului
arhitectura informației
funcționalitate (Lazy Registration, Direct Login, Heartbeat,
Autosave, Unique URLs)

inginerie Web:
jurnalizare (e.g., Logging)
depanare
inspecție de cod/date (DOM Inspection, Traffic Sniffing)
vezi și cursul viitor

http://ajaxpatterns.org/Patterns

Comet
termen propus de Alex Russel, 2006
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

Comet
ș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 – e.g., Google Docs, Mibbit,…

Comet
complementar Ajax
long polling
HTTP server push
Reverse Ajax
http://ajaxpatterns.org/HTTP_Streaming

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/

Comet
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

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

Aplicații mash-up
se bazează pe fluxuri RSS/Atom,
servicii Web, API-uri publice,…
„curentul” SaaS (Software As A Service)

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
Biblioteci/framework-uri
pentru dezvoltare
framework-uri Web generice
sau oferite de organizații
Instrumente interactive
(Web tools)
eventual, disponibile în cloud
e.g., Yahoo! Pipes
Platforme
(Platform As A Service)
Heroku, Google App Engine,
Nodejitsu, Windows Azure,…

o listă a mash-up-urilor existente:
www.programmableweb.com/mashups/directory

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

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

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
https://developer.mozilla.org/Web/Security/Same-origin_policy

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

URL al altui domeniueludăm Same Origin Policy

CORS (Cross-Origin Resource Sharing)
recomandare a Consorțiului Web (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

Având un mash-up Web la nivel de client
ce utilizează N surse de date provenite din domenii
diferite, la câți arbori DOM are acces
programul JavaScript?
întrebări (pentru acasă)
Transferul datelor
via Comet
este bidirecțional?
De ce?

episodul viitor: ingineria aplicațiilor JavaScript

CLIW 2014—2015 (8/12): JavaScript în navigatorul Web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (17)

Destaque

Destaque (11)

Semelhante a CLIW 2014—2015 (8/12): JavaScript în navigatorul Web

Semelhante a CLIW 2014—2015 (8/12): JavaScript în navigatorul Web (20)

Mais de Sabin Buraga

Mais de Sabin Buraga (20)

CLIW 2014—2015 (8/12): JavaScript în navigatorul Web