5. <body>
…
<script type="text/javascript">
alert ("Salut, lume!");
</script>
</body>
<script type="text/javascript" src="http://salutari.info/salut.js">
</script>
Dr. Sabin Buragawww.purl.org/net/busaco
Cod JavaScript intern vs.
preluat dintr-un fișier extern
6. în loc de tipul MIME text/javascript
ar putea fi indicat application/javascript
nesuportat de versiuni
IE mai vechi
Dr. Sabin Buragawww.purl.org/net/busaco
Remarcă:
7. specificații ale Consorțiului Web
www.w3.org/DOM/DOMTR
a se revedea cursul
“Tehnologii Web”
Dr. Sabin Buragawww.purl.org/net/busaco
Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
9. minimal, un navigator Web implementează
recomandarea DOM Level 2 HTML (2003)
www.w3.org/TR/DOM-Level-2-HTML
Dr. Sabin Buragawww.purl.org/net/busaco
Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
10. e.g., informații privind contextul rulării
(caracteristici ale navigatorului, latența rețelei),
istoricul navigării, fereastra de redare a conținutului,…
Dr. Sabin Buragawww.purl.org/net/busaco
De asemenea, programele JavaScript au acces
la diverse obiecte oferite de mediul de execuție
pus la dispoziție de browser
11. instanță a clasei implementând interfața HTMLDocument
Dr. Sabin Buragawww.purl.org/net/busaco
Arborele DOM asociat documentului (X)HTML
poate fi accesat/alterat via obiectul document
12. attribute DOMString cookie;
// acces la cookie-uri
// emite o excepție dacă e asignată o valoare
};
Dr. Sabin Buragawww.purl.org/net/busaco
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
14. getElementById (identificator)
furnizează un element – nod de tip Element –
conform identificatorului său unic, desemnat de valoarea
atributului id specificat în cadrul documentului
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece HTMLDocument extinde interfața Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală
15. parentNode
proprietate ce oferă acces la numele nodului-părinte
al nodului curent
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece HTMLDocument extinde interfața Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală
16. nextSibling
proprietate care oferă acces la următorul nod
de pe același nivel al arborelui
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece HTMLDocument extinde interfața Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală
17. previousSibling
proprietate oferind acces la nodul precedent
de pe același nivel al arborelui
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece HTMLDocument extinde interfața Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală
18. childNodes
proprietate furnizând într-un tablou
numele nodurilor-copil ale nodului curent
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece HTMLDocument extinde interfața Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală
19. firstChild
proprietate desemnând primul nod-copil
al nodului curent
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece HTMLDocument extinde interfața Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală
20. lastChild
proprietate specificând ultimul nod-copil
al nodului curent
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece HTMLDocument extinde interfața Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală
21. attributes
proprietate ce reprezintă tabloul asociativ
conținând atributele asociate unui nod de tip Element
Dr. Sabin Buragawww.purl.org/net/busaco
Deoarece HTMLDocument extinde interfața Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală
22. 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?
Dr. Sabin Buragawww.purl.org/net/busaco
discuție
23. fiecare element HTML specific derivă din ea
Dr. Sabin Buragawww.purl.org/net/busaco
Interfața HTMLElement o extinde
pe cea generală oferită de DOM Level 2
24. Dr. Sabin Buragawww.purl.org/net/busaco
// 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
};
25. Dr. Sabin Buragawww.purl.org/net/busaco
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
};
27. nodeType
proprietate care furnizează tipul unui nod
1 = element, 2 = atribut, 3 = conținut text,…
Dr. Sabin Buragawww.purl.org/net/busaco
Informații referitoare la nodurile arborelui DOM
29. innerHTML
proprietate – mutabilă – ce furnizează codul (X)HTML
din cadrul unui nod de tip Element
utilizare
nerecomandabilă
Dr. Sabin Buragawww.purl.org/net/busaco
Informații referitoare la nodurile arborelui DOM
30. textContent
proprietate ce furnizează/stabilește conținutul textual
al nodului și posibililor descendenți
Dr. Sabin Buragawww.purl.org/net/busaco
Informații referitoare la nodurile arborelui DOM
31. getAttribute (numeAtribut)
metodă care oferă acces la valoarea unui atribut
Dr. Sabin Buragawww.purl.org/net/busaco
Informații referitoare la nodurile arborelui DOM
33. createTextNode (nod)
creează un nod cu conținut textual
Dr. Sabin Buragawww.purl.org/net/busaco
Modificarea structurii arborelui DOM
34. appendChild (nod)
adaugă un nod-copil nodului curent
Dr. Sabin Buragawww.purl.org/net/busaco
Modificarea structurii arborelui DOM
35. <div id="lumi"></div>
<h1 id="continut"></h1>
a se studia exemplele
din arhivă
Dr. Sabin Buragawww.purl.org/net/busaco
// 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>)
36. arborele DOM corespunzător
codului HTML
generat prin program
consultarea arborelui DOM via extensia Firebug
Dr. Sabin Buragawww.purl.org/net/busaco
inspectarea valorilor
proprietăților DOM
37. removeChild (nod)
elimină un nod-copil
Dr. Sabin Buragawww.purl.org/net/busaco
Modificarea structurii arborelui DOM
38. cloneChild ()
“clonează” un nod al arborelui
Dr. Sabin Buragawww.purl.org/net/busaco
Modificarea structurii arborelui DOM
40. Selectors API
recomandare W3C (februarie 2013)
www.w3.org/TR/selectors-api/
Dr. Sabin Buragawww.purl.org/net/busaco
Găsirea de noduri via selectori CSS
41. 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
Dr. Sabin Buragawww.purl.org/net/busaco
Găsirea de noduri via selectori CSS
42. Dr. Sabin Buragawww.purl.org/net/busaco
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);
}
43. eveniment = acțiune produsă în cadrul mediului de
execuție în urma căreia programul va putea reacționa
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
44. codul JavaScript invocat la apariția unui eveniment
va putea fi încapsulat într-o funcție de tratare a acestuia
(handler)
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
45. Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
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
49. tratarea standardizată a evenimentelor:
specificația DOM Level 2 Events
www.w3.org/TR/DOM-Level-2-Events/
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
50. specificarea de activități executate
la apariția unui eveniment
obiect.addEventListener ("eveniment", functie, mod);
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
51. descrierea arborescentă a fluxului de evenimente
capture versus bubble
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
52. Dr. Sabin Buragawww.purl.org/net/busaco
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/
53. descrierea arborescentă a fluxului de evenimente
mod = true
se încearcă tratarea evenimentului pornind
de la rădăcină până la obiectul-țintă – capture phase
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
54. descrierea arborescentă a fluxului de evenimente
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
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
55. se va utiliza un set standard de evenimente
e.g., de control al interacțiunii cu utilizatorul
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
56. proprietăți asociate evenimentelor
privind acțiunile mouse-ului
click, mousedown, mouseup, mouseover,
mousemove, mouseout
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
57. 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
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
58. Dr. Sabin Buragawww.purl.org/net/busaco
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,
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
60. interacțiuni tactile – touch events
recomandare a Consorțiului Web (octombrie 2013)
www.w3.org/TR/touch-events/
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
61. Dr. Sabin Buragawww.purl.org/net/busaco
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 {
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;
};
62. evenimente referitoare la interacțiunea cu browser-ul
load, unload, select, change, submit, focus, blur, resize, scroll
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
63. evenimente privitoare la modificarea arborelui DOM
(mutation events)
DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved,
DOMAttrModified, DOMCharacterDataModified,
DOMNodeInsertedIntoDocument,
DOMNodeRemovedFromDocument
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
64. proprietăți utile ale obiectului Event
type
specifică tipul evenimentului ca șir de caractere
e.g., "click", "load", "scroll", "submit"
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
65. proprietăți utile ale obiectului Event
target
desemnează nodul
asupra căruia evenimentul a fost declanșat inițial
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
66. proprietăți utile ale obiectului Event
currentTarget
indică nodul care tratează evenimentul
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
67. proprietăți utile ale obiectului Event
bubbles
indică dacă evenimentul se propagă
spre elemente ascendente (valoarea true)
ori către descendenți (valoarea false)
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
68. proprietăți utile ale obiectului Event
bubbles
e.g., evenimentele abort, error, select, submit, resize, scroll,
click, mousedown, mouseover, mousemove, mouseout,
touchstart, touchend pot avea bubbles = true
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
69. proprietăți utile ale obiectului Event
bubbles
în cazul evenimentelor focus, blur, load, unload,
proprietatea bubbles are valoarea false
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
70. proprietăți utile ale obiectului Event
cancelable
precizează dacă evenimentul poate fi întrerupt
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
71. proprietăți utile ale obiectului Event
cancelable
de exemplu, pentru evenimentele load, unload, abort, error,
select, focus, blur, resize, scroll, touchcancel
proprietatea cancelable este setată ca fiind false
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
72. proprietăți utile ale obiectului Event
cancelable
pentru evenimente precum click, mousedown, mouseup,
mouseover, mousemove, mouseout, touchstart, touchend,
touchmove proprietatea cancelable poate fi true
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
73. eliminarea tratării unui eveniment
removeEventListener ()
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
75. comportamentul implicit pentru evenimentul tactil
touchend poate varia în funcție de context/platformă:
mousemove, mousedown, mouseup, click
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
76. trimiterea evenimentului să poată fi procesat
conform modelului oferit de implementare
dispatchEvent ()
Dr. Sabin Buragawww.purl.org/net/busaco
Răspunsul la evenimente
77. // 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
Dr. Sabin Buragawww.purl.org/net/busaco
// adăugăm o funcție de tratare a evenimentului de inserare a unui nod
document.addEventListener ("DOMNodeInserted", inserareNod, false);
78. exemple:
editarea datelor – cut, copy, paste
Dr. Sabin Buragawww.purl.org/net/busaco
Remarcă:
unele navigatoare acceptă tratarea unor evenimente
nestandardizate (încă) de Consorțiul Web
79. 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
Dr. Sabin Buragawww.purl.org/net/busaco
Remarcă:
anumite evenimente sunt specificate în cadrul HTML5
81. 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) {} });
} )();
Dr. Sabin Buragawww.purl.org/net/busaco
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;
}
}
83. permite transfer asincron de date
între client (browser) și serverul Web
a se revizita cursul
“Tehnologii Web”
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
84. suită de tehnologii deschise
limbaje standardizate de structurare – e.g., (X)HTML –
și de prezentare a datelor: CSS
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
85. suită de tehnologii deschise
redare + interacțiune la nivel de client Web
via standardul DOM
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
86. suită de tehnologii deschise
interschimb & manipulare de date reprezentate prin:
diverse dialecte XML,
JSON (JavaScript Object Notation),
HTML,
alte formate
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
87. suită de tehnologii deschise
transfer (a)sincron de date
facilitat de obiectul XMLHttpRequest
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
88. suită de tehnologii deschise
procesare folosind limbajul ECMAScript (JavaScript)
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
89. obiectul XMLHttpRequest
disponibil la nivel de navigator Web via JavaScript
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
90. obiectul XMLHttpRequest
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/
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
91. 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. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
92. // 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
Dr. Sabin Buragawww.purl.org/net/busaco
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
};
93. // 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)
Dr. Sabin Buragawww.purl.org/net/busaco
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
};
94. obiectul XMLHttpRequest
open ( )
inițiază – deschide – o conexiune HTTP cu serverul,
emițând o cerere: GET, POST,…
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
95. obiectul XMLHttpRequest
send ( )
transmite (asincron) date – e.g., XML, JSON etc. –,
spre aplicația/serviciul ce rulează pe server
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
96. obiectul XMLHttpRequest
send ( )
orice listener (asociat evenimentelor onload, ontimeout,
onabort,…) trebuie stabilit înainte de a trimite date
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
97. obiectul XMLHttpRequest
abort ( )
abandonează transferul de date curent
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
98. obiectul XMLHttpRequest
setRequestHeader ( )
specifică anumite câmpuri de antet HTTP
exemple: Cookie, Keep-Alive, User-Agent,…
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
99. obiectul XMLHttpRequest
getResponseHeader ( )
furnizează un anumit câmp prezent
în antetul mesajului de răspuns HTTP trimis de server
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
100. obiectul XMLHttpRequest
getAllResponseHeaders ( )
oferă toate câmpurile HTTP trimise de server,
exceptând Set-Cookie
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
101. obiectul XMLHttpRequest
readyState
furnizează codul de stare a transferului:
0 – UNSENT, 1 – OPENED,
2 – HEADERS_RECEIVED, 3 – LOADING, 4 – DONE
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
102. obiectul XMLHttpRequest
status
oferă codul de stare HTTP întors de serverul Web:
200 (Ok), 404 (Not Found), 500 (Internal Server Error),…
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
106. obiectul XMLHttpRequest
excepții specifice care pot fi emise (conform DOM 3):
SECURITY_ERR
NETWORK_ERR
ABORT_ERR
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
107. XMLHttpRequest – nivelul 2
noutăți:
stabilirea unui timeout privind realizarea unei cereri
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
108. XMLHttpRequest – nivelul 2
noutăți:
datele vehiculate pot fi de mai multe tipuri
(ArrayBuffer, Blob, Document, DOMString, FormData)
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
109. XMLHttpRequest – nivelul 2
noutăți:
procesul de upload poate avea asociat
via atributul upload un handler specific
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
110. XMLHttpRequest – nivelul 2
noutăți:
utilizând constructorul AnonXMLHttpRequest,
transferurile sunt considerate “anonime”
(i.e., nu se trimit cookie-uri, anteturi de autentificare,…)
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
113. oferirea de alternative la Ajax, atunci când suportul
pentru acesta nu este implementat/activat
graceful degradation
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
114. minimizarea traficului dintre browser și server
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
115. transferul de date poate fi monitorizat (+interceptat)
via instrumente dedicate
WireShark
Firebug, Fiddler, TamperData, Live HTTP Headers
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
116. 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
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
117. adoptarea Ajax pentru creșterea utilizabilității,
nu doar de dragul tehnologiei
exemple negative:
distragerea utilizatorului, abuz de resurse
(e.g., supradimensionarea arborelui DOM)
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
118. 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
Dr. Sabin Buragawww.purl.org/net/busaco
AJAX – Asynchronous JavaScript And XML
119. Dr. Sabin Buragawww.purl.org/net/busaco
Ș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
120. 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)
Dr. Sabin Buragawww.purl.org/net/busaco
Șabloane de proiectare AJAX
121. inginerie Web:
jurnalizare (e.g., Logging)
depanare
inspecție de cod/date (DOM Inspection, Traffic Sniffing)
vezi și cursul viitor
Dr. Sabin Buragawww.purl.org/net/busaco
Șabloane de proiectare AJAX
123. 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
Dr. Sabin Buragawww.purl.org/net/busaco
Comet
124. ș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,…
Dr. Sabin Buragawww.purl.org/net/busaco
Comet
125. complementar Ajax
long polling
HTTP server push
Reverse Ajax
http://ajaxpatterns.org/HTTP_Streaming
Dr. Sabin Buragawww.purl.org/net/busaco
Comet
126. Dr. Sabin Buragawww.purl.org/net/busaco
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/
127. 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
Dr. Sabin Buragawww.purl.org/net/busaco
Comet
128. combinarea – în contextul nostru, la nivel de client –
a conținutului ce provine din surse (situri)
multiple, oferind o funcționalitate/experiență nouă
Dr. Sabin Buragawww.purl.org/net/busaco
Ajax/Comet oferă suport pentru dezvoltarea de
aplicații Web hibride – mash-ups
129. se bazează pe fluxuri RSS/Atom,
servicii Web, API-uri publice,…
“curentul” SaaS (Software As A Service)
Dr. Sabin Buragawww.purl.org/net/busaco
Aplicații mash-up
130. 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,…
Dr. Sabin Buragawww.purl.org/net/busaco
mash-ups
133. 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
Dr. Sabin Buragawww.purl.org/net/busaco
Same-Origin Security Policy
134. Dr. Sabin Buragawww.purl.org/net/busaco
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
135. 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
Dr. Sabin Buragawww.purl.org/net/busaco
Same-Origin Security Policy
136. mecanism ce permite partajarea la nivel de client
a resurselor provenind din domenii Internet diferite
Dr. Sabin Buragawww.purl.org/net/busaco
CORS (Cross-Origin Resource Sharing)
astfel, se pot emite cereri via XMLHttpRequest între domenii
137. 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
Dr. Sabin Buragawww.purl.org/net/busaco
CORS (Cross-Origin Resource Sharing)
138. Dr. Sabin Buragawww.purl.org/net/busaco
î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?