CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
programare Web
JavaScript în cadrul navigatorului Web
http://javascript.info/

“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 (Edge – Microsoft)
JavaScriptCore (Safari – Apple)
JerryScript (destinat IoT – JS Foundation)
SpiderMonkeyIonMonkey (Firefox – Mozilla)
Rhino (implementare Java – Mozilla)
Nashorn (OpenJDK – Oracle)
V8 (Chrome, Opera, Node.js – Google)

fazele principale ale procesării și rulării codului JavaScript
(Hyungwook Lee, 2014)

exemplu real: Chakra – fazele principale
ale procesării și execuției codului JavaScript
https://github.com/Microsoft/ChakraCore

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>

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ă: pentru browser-ele moderne poate fi specificat
application/javascript în loc de text/javascript

arhitectura de bază a interpretorului (script engine) JS
inclus într-un navigator Web (A. Zlatkov, 2017)
blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf
blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e

execuția codului JavaScript se realizează într-un singur fir de
execuție (proces), dar alte acțiuni efectuate de browser-ul Web nu
www.red-gate.com/simple-talk/dotnet/asp-net/javascript-single-threaded/

Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
specificații ale Consorțiului Web
varianta în vigoare: DOM 4 (2015)
www.w3.org/TR/dom/
de revăzut materia „Tehnologii Web”
profs.info.uaic.ro/~busaco/teach/courses/web/

Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
DOM Living Standard – dom.spec.whatwg.org
specific HTML5, în continuă dezvoltare
(cea mai recentă actualizare: 21 noiembrie 2017)

Programul JS recurge la obiecte implementând
interfețele DOM pentru accesarea și modificarea
reprezentării interne a unui document HTML
(i.e. arborele DOM)

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

dom: browser
inspectarea arborelui DOM asociat unui document HTML
via instrumentele oferite de navigatorul Web

Minimal, navigatorul Web implementează
recomandarea DOM Level 2 HTML (2003)
www.w3.org/TR/DOM-Level-2-HTML

dom: core
un document HTML și arborele DOM corespunzător
reprezentat via Live DOM Viewer
http://software.hixie.ch/utilities/js/live-dom-viewer/
în cazul HTML, numele elementelor
sunt disponibile cu litere mari (capitals)

dom: core
un document HTML și arborele DOM corespunzător
reprezentat via Live DOM Viewer
http://software.hixie.ch/utilities/js/live-dom-viewer/
De ce apare
și acest nod?

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 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
Node Element
HTML
Element
HTML
DivElement
o interfață specifică fiecărui element HTML

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

arborele DOM corespunzător
codului HTML
generat prin program
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

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

Suport pentru procesarea proprietăților CSS
pe baza unui model obiectual specific
CSSOM (CSS Object Model)
specificație în lucru (draft) – 9 noiembrie 2017
drafts.csswg.org/cssom/

Suport pentru procesarea proprietăților CSS
actualmente, modificarea proprietăților de stil
se poate realiza via proprietatea HTMLElement.style
// asocierea mai multor stiluri CSS
elem.style.cssText = "color: blue; border: 1px solid #000";
// similar cu:
elem.setAttribute ("style", "color: blue; border: 1px solid #000;");
developer.mozilla.org/Web/API/CSSStyleDeclaration

Găsirea de noduri via selectori CSS
Selectors API – Level 1
recomandare W3C (2013)
acces la diverse date via selectorii CSS cu metodele
query() queryAll() querySelector() querySelectorAll()
www.w3.org/TR/selectors-api/

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

// toate elementele <li> selectate via CSS (date de tip NodeList)
var elemente = document.querySelectorAll ("ul.menu > li");
for (var i = 0; i < elemente.length; i++) {
prelucrează (elemente.item (i)); // procesăm fiecare nod
}

exemplificare – folosim consola browser-ului Web:
document.querySelectorAll ("section[id^="week"]:nth-child(odd) > h2");
selectori
CSS3

Tratarea evenimentelor
definirea de activități (callback-uri) executate
la apariția unui eveniment
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
(event 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
de parcurs http://javascript.info/bubbling-and-capturing

fluxul de evenimente (T. Leithead et al., 2012)
a se studia și W. Page, An Introduction to DOM Events (2013)
www.smashingmagazine.com/2013/11/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

Tipuri de evenimente – interacțiune cu utilizatorul
mouse: click dblclick mouseenter mousedown mouseup
mouseover mousemove contextmenu select wheel
keyboard: keypress keydown keyup
clipboard: copy cut paste
view: resize scroll fullscreenchange fullscreenerror
drag & drop: dragstart drag dragenter dragover dragleave
dragend drop
form: focus blur select submit reset
document (page lifecycle): load DOMContentLoaded
beforeunload unload abort cancel

Tipuri de evenimente – vizând resursele
network: online offline
session history: pagehide pageshow popstate
printing: beforeprint afterprint
media: canplay play playing pause suspend waiting seeking
seeked stalled complete ended emptied durationchange
ratechange volumechange timeupdate …
progress: loadstart progress error timeout abort load loaded
storage: change storage
Web socket: open message error close

Tipuri de evenimente – altele
CSS transitions: transitionstart transitionrun
transitionend transitioncancel
CSS animations: animationstart animationend
animationiteration
value change: broadcast hashchange input readystatechange…
pentru amănunte, a se explora și
developer.mozilla.org/Web/Events

Tipuri de evenimente – specifice HTML5
asociate API-urilor disponibile:
Ambient Light, App Cache, Battery, Contacts,
Device Orientation, Device Storage, Download, File,
IndexedDB, Media Capture & Streams, Payment, Pointer,
Proximity, Push, SVG, Touch, Time & Clock, TV, Web Audio,
WebGL, WebRTC, Web Notifications, Web Speech, WebVR,
Wifi Information, Wifi P2P etc.
vezi cursurile
viitoare

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
exemplificare:
specificarea
evenimentelor tactile

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

oprirea propagării unui eveniment
în cadrul arborelui DOM
stopPropagation ()

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>Evenimente JS</title></head>
<body>
<form>
<textarea id="editor"></textarea>
</form>
</body>
<script type="application/javascript">
const infoEv = e => { console.log (
`Eveniment: ${e.type}n
Caracter: ${String.fromCharCode (e.charCode)}n
Element țintă al evenim.: ${e.target}n
Ținta curentă: ${e.currentTarget}`);
};
document.addEventListener ("keypress", infoEv);
</script>
</html>
exemplificare: afișarea datelor vizând un eveniment
adaptaredupăBaptistePesquet(2017)
github.com/bpesquet/thejsway/blob/master/manuscript/chapter16.md

inspecție de evenimente
apărute în pagina Web
(tratate printr-un program JS
sau de o extensie instalată)

// Adaptare după https://eloquentjavascript.net/14_event.html
const trateazaEveniment = ev => {
// plasăm un 'punct' la coordonatele cursorului mouse-ului
let pct = document.createElement ('div');
pct.className = (ev.type === 'dblclick') ? 'punct roz' : 'punct';
pct.style.left = (ev.pageX - 5) + 'px';
pct.style.top = (ev.pageY - 5) + 'px';
document.body.appendChild (pct);
console.log (`${ev.type}: Am plasat un punct la coord. (${ev.pageX},
${ev.pageY}).`);
};
// "ascultăm" evenimentele click și dblclick
document.addEventListener ('click', trateazaEveniment);
document.addEventListener ('dblclick', trateazaEveniment);
exemplu: tratarea evenimentelor click și dblclick
vezi exemplul
complet în arhivă

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) {} });
} )();

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

Remarcă:
pot fi specificate și evenimente definite de programator
CustomEvent
dom.spec.whatwg.org/#interface-customevent
developer.mozilla.org/Web/API/CustomEvent

(în loc de) pauză
http://abstrusegoose.com/432

Browser-ul Web oferă obiectul Window
reprezintă o zonă de redare a conținutului
pe baza reprezentării interne (arborele DOM)
a unui document HTML
developer.mozilla.org/Web/API/Window

fiecare tab al interfeței navigatorului
conține propriul obiect Window
acest obiect nu este partajat de tab-uri multiple

proprietăți importante:
document – referință la documentul (arborele DOM)
pe care obiectul Window îl include
history – acces la istoricul navigării (via obiectul History)
https://html.spec.whatwg.org/multipage/history.html
location – adresa Web (URL) curentă
navigator – oferă date despre browser (un obiect Navigator)
https://developer.mozilla.org/Web/API/Navigator

proprietăți importante – continuare:
screen – oferă detalii despre ecran (obiectul Screen)
https://developer.mozilla.org/Web/API/Screen
localStorage – date persistente stocate local
(obiectul LocalStorage specificat de HTML5)
https://developer.mozilla.org/Web/API/Window/localStorage
sessionStorage – referință la date vizând sesiunea curentă
(stocate într-un obiect SessionStorage oferit de HTML5)
html.spec.whatwg.org/multipage/webstorage.html

metode utile:
alert() confirm() prompt() postMessage()
focus() blur() find() print()
open() close() stop()
moveBy() moveTo() resizeBy() resizeTo()
scrool() scrollBy() scrollTo()
amănunte: https://drafts.csswg.org/cssom-view/

evenimente – specificate prin nume prefixat de on
și clasificate ca fiind WindowEventHandlers
(reuniunea evenimentelor definite de interfețele
Window, HTMLBodyElement și HTMLFrameSetElement)
developer.mozilla.org/Web/API/WindowEventHandlers

suportul cumulat vizând evenimentele
oferit de navigatoarele Web actuale
https://caniuse.com/#search=event

În ce manieră 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 actuală oferită de navigatoarele curente
(Living Standard, 13 octombrie 2017)
xhr.spec.whatwg.org

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

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

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

send ( )
transmite (asincron) date – e.g., JSON, XML etc. –,
spre aplicația/serviciul ce rulează pe server
orice listener (asociat evenimentelor onloadstart,
onprogress, onload, onloadend, ontimeout, onabort, onerror)
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
handler de tratare a
evenimentelor de transfer

excepții care pot fi emise:
AbortError
InvalidAccessError
InvalidStateError
NetworkError
SecurityError
TimeoutError
…

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
de studiat Fetch (HTML5 Living Standard, 26 nov. 2017)
fetch.spec.whatwg.org

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

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

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

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

studiu de caz: RandomAjax
preia asincron
o secvență de numere
aleatoare generate de
random.org – trimisă ca
text obișnuit
jsfiddle.net/busaco/2254kdqn/

studiu de caz: RandomAjax (Fetch)
soluție folosind Fetch API
pentru aceeași problemă
jsfiddle.net/busaco/a2q9regd/

Scenariu:
preluăm caractere de la client – introduse în <textarea> –
și le trimitem asincron prin POST unei aplicații Web
rulând pe server care le expediază înapoi
mesaje vehiculate în format JSON
{ "tasta": "caracter", "data": "secunde" }
tratăm evenimentul keypress pentru a capta tastele
acționate de utilizator
studiu de caz: PostJSON

<?php
// post.php -- program PHP care preia date JSON
// transmise via POST de client și le trimite înapoi (echo)
function eJSONValid ($sir) { // verifică dacă datele JSON sunt corecte
json_decode ($sir);
return json_last_error () == JSON_ERROR_NONE;
}
// preluăm de la intrarea standard datele transmise de client (raw data)
// (aici, cele dintr-o cerere POST)
$date = trim (file_get_contents ("php://input"));
if (eJSONValid ($date)) { // trimitem datele JSON înapoi dacă sunt în regulă
header ("Content-type: application/json");
echo json_decode ($date);
} else {
die ('Date incorecte');
}
?>
aplicația (serviciul) invocat(ă) pe server

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
progressive enhancement
www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement

Minimizarea traficului dintre browser și server

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

inspecție a datelor vehiculate
cu instrumentele pentru
dezvoltatorii Web
oferite de browser

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 navigatorul Web și 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 Web
(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

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., Mibbit,…

Comet
complementar Ajax
long polling
HTTP 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/

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

Comet
soluții alternative, moderne:
adoptarea diverselor tehnologii HTML5
server-sent events
WebSocket

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)

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

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

Same-Origin Security 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

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
client
server
Web
HTTP
JSON, XML,…
API
public
API
public
HTTP
JPG
HTTP
JPG
Same-Origin Policy

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
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 cu HEAD a unor
meta-date, în mod asincron

URL al altui domeniuse încalcă Same Origin Policy

CORS (Cross-Origin Resource Sharing)
recomandare a Consorțiului Web (2014)
www.w3.org/TR/cors/
permite partajarea la nivel de client a resurselor
provenind din domenii Internet diferite
astfel, se pot emite cereri între domenii (cross-origin)

episodul viitor: ingineria aplicațiilor JavaScript

CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri

More Related Content

What's hot (20)

Similar to CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri (20)

More from Sabin Buraga (20)

CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri