Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web

JavaScript în cadrul navigatorului Web

Dr. Sabin Buragawww.purl.org/net/busaco

programare Web
la nivel de client

Milton Glaser


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


Cum rulează programele JavaScript
în navigatorul Web?


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

<body>
…
<script type="text/javascript">
alert ("Salut, lume!");
</script>
</body>
<script type="text/javascript" src="http://salutari.info/salut.js">
</script>


Cod JavaScript intern vs.
preluat dintr-un fișier extern

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


Remarcă:

specificații ale Consorțiului Web
www.w3.org/DOM/DOMTR
a se revedea cursul
“Tehnologii Web”


Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML

HTML
HtmlElement

HTML
BodyElement

HTML
ParagraphElement

Text

HTML
DivElement

HTML
ImageElement


<!DOCTYPE html>
<html>
<body>
<p>Tehnologii Web</p>
<div>
<img src="web.png"/>
</div>
</body>
</html>

minimal, un navigator Web implementează
recomandarea DOM Level 2 HTML (2003)
www.w3.org/TR/DOM-Level-2-HTML


Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML

e.g., informații privind contextul rulării
(caracteristici ale navigatorului, latența rețelei),
istoricul navigării, fereastra de redare a conținutului,…


De asemenea, programele JavaScript au acces
la diverse obiecte oferite de mediul de execuție
pus la dispoziție de browser

instanță a clasei implementând interfața HTMLDocument


Arborele DOM asociat documentului (X)HTML
poate fi accesat/alterat via obiectul document

attribute DOMString cookie;
// acces la cookie-uri
// emite o excepție dacă e asignată o valoare

};


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

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ă via limbajul declarativ WebIDL

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


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

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



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



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



previousSibling
proprietate oferind 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
proprietate desemnând primul nod-copil
al nodului curent



lastChild
proprietate specificând ultimul nod-copil
al nodului curent



attributes
proprietate ce 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);
}

Ce rol au cele două funcții?


discuție

fiecare element HTML specific derivă din ea


Interfața HTMLElement o extinde
pe cea generală oferită de DOM Level 2


// 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 index numeric
Node
namedItem (in DOMString name); // furnizează un nod pe baza numelui
};


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

nodeType
proprietate care furnizează tipul unui nod
1 = element, 2 = atribut, 3 = conținut text,…


Informații referitoare la nodurile arborelui DOM

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



createElement (element)
creează un nod de tip Element


Modificarea structurii arborelui DOM

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



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



<div id="lumi"></div>
<h1 id="continut"></h1>

a se studia exemplele
din arhivă


// 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);
// adaugăm nodul creat
document.getElementById (identificator).appendChild (element);
}
}
genereazaElemente (3, "div", "continut"); // 3 <div>-uri
genereazaElemente (2, "p", "lumi");
// 2 paragrafe (<p>)

arborele DOM corespunzător
codului HTML
generat prin program

consultarea arborelui DOM via extensia Firebug


inspectarea valorilor
proprietăților DOM

removeChild (nod)
elimină un nod-copil



cloneChild ()
“clonează” un nod al arborelui



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



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


Găsirea de noduri via selectori CSS


exemplificare – folosim consola oferită de browser:
var lista = document.querySelectorAll
("section[id^="week"]:nth-child(even) > h2");
for (el in lista) {
selectori
CSS3
console.log (lista[el].textContent);
}

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


Răspunsul la evenimente

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", functie, 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 {
screenX, screenY; // coordonate relative la ecran
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,
argumente specifice
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

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ă
identifier;
readonly attribute EventTarget target;
screenX;
screenY;
clientX;
clientY;
pageX;
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 {
pot fi tratate
readonly attribute TouchList touches;
evenimentele
readonly attribute TouchList targetTouches;
touchstart
readonly attribute TouchList changedTouches;
readonly attribute boolean altKey;
touchend
readonly attribute boolean metaKey;
touchmove
readonly attribute boolean ctrlKey;
touchcancel
readonly attribute boolean shiftKey;
};

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



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



// funcția apelată la apariția evenimentului de inserare a unui nod
// e.g., se recurge la metoda appendChild() oferită de specificația DOM
function inserareNod (eveniment) {
console.log ("S-a adăugat un nod nou: " + eveniment.target.nodeName);
}

Firebug – vizualizarea consolei
detalii la https://getfirebug.com/wiki/index.php/Console_API


// adăugăm o funcție de tratare a evenimentului de inserare a unui nod
document.addEventListener ("DOMNodeInserted", inserareNod, false);

exemple:
editarea datelor – cut, copy, paste


Remarcă:
unele navigatoare acceptă tratarea unor evenimente
nestandardizate (încă) de Consorțiul Web

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


Remarcă:
anumite evenimente sunt specificate în cadrul HTML5


studiu de caz (Ondřej Žára, 2013)

calcul tabelar în
30 de linii JavaScript
jsfiddle.net/ondras/hYfN3/


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

permite transfer asincron de date
între client (browser) și serverul Web

a se revizita cursul
“Tehnologii Web”


AJAX – Asynchronous JavaScript And XML

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 & 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



nivelul 1 (în mod normal, implementat de orice browser)
www.w3.org/TR/XMLHttpRequest1/

nivelul 2 (pentru navigatoare recente) – în lucru la W3C
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



// 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


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

// 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
};

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


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
};

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 3):
SECURITY_ERR
NETWORK_ERR
ABORT_ERR



XMLHttpRequest – nivelul 2
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 upload poate avea asociat
via atributul upload un handler specific



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 pentru o anume tehnologie
(în acest caz, suportul pentru XMLHttpRequest 2)


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




a se consulta
http://ajaxpatterns.org/Patterns

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


Comet


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/

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


Comet

combinarea – în contextul nostru, la nivel de client –
a conținutului ce provine din surse (situri)
multiple, oferind o funcționalitate/experiență nouă


Ajax/Comet oferă suport pentru dezvoltarea de
aplicații Web hibride – mash-ups

se bazează pe fluxuri RSS/Atom,
servicii Web, API-uri publice,…
“curentul” SaaS (Software As A Service)


Aplicații mash-up

Surse de date
(data feeds)
Interfețe de programare
(API-uri)
Biblioteci/framework-uri
pentru dezvoltare
Instrumente interactive
(Web tools)
Platforme
(Platform As A Service)

Atom, RSS, geoRSS, microdate
HTML5, RDFa,…
specifice serviciilor publice
& de procesare JSON/XML
framework-uri Web generice
sau oferite de organizații
eventual, disponibile în cloud
e.g., Yahoo! Pipes
Heroku, Google App Engine,
Nodejitsu, Windows Azure,…


mash-ups


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


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

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


Same-Origin Security Policy


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

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

detalii la www.w3.org/Security/wiki/Same_Origin_Policy


Same-Origin Security Policy

mecanism ce permite partajarea la nivel de client
a resurselor provenind din domenii Internet diferite


CORS (Cross-Origin Resource Sharing)

astfel, se pot emite cereri via XMLHttpRequest între domenii

specificație în lucru la Consorțiul Web (ianuarie 2013)
http://www.w3.org/TR/cors/
deja există suport oferit de navigatoarele actuale
tutorial: T. Brown, DOM access control using cross-origin
resource sharing, Opera, 2011 – http://tinyurl.com/chozusf


CORS (Cross-Origin Resource Sharing)


întrebări (pentru acasă)
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?
Transferul datelor
via Comet
este bidirecțional?
De ce?


episodul viitor: ingineria aplicațiilor JavaScript

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web

More Related Content

What's hot (6)

Similar to Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web (20)

More from Sabin Buraga (20)

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web