cliw 2015-2016 (8/13) javascript în navigatorul web. de la dom la ajax şi mash-up-uri

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Dezvoltarea aplicațiilor Webla nivel de client

{ⵄ}programare Web

JavaScript în cadrul navigatorului Web

Dr.

Sab

in B

ura

ga


co

“Solving the problem is more importantthan being right.”

Milton Glaser

Dr.

Sab

in B

ura

ga


co

Cum rulează programele JavaScriptîn navigatorul Web?

Dr.

Sab

in B

ura

ga


co

Majoritatea programelor JavaScript

rulează – sunt interpretate –

în navigatorul Web via un script engine

Dr.

Sab

in B

ura

ga


co

Majoritatea programelor JavaScript

rulează – sunt interpretate –

în navigatorul Web via un script engine

Chakra (Microsoft)

SpiderMonkey, IonMonkey, Rhino (Mozilla)

V8 (Google, Opera, Node.js)

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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>

Dr.

Sab

in B

ura

ga


co

Remarcă:

în loc de tipul MIME text/javascript

ar putea fi indicat application/javascript

nesuportat de versiuniIE mai vechi

Dr.

Sab

in B

ura

ga


co

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

de revăzut materia „Tehnologii Web”

http://profs.info.uaic.ro/~busaco/teach/courses/web/

Dr.

Sab

in B

ura

ga


co

DOM 1 (1998) – www.w3.org/TR/REC-DOM-Level-1/

DOM Core + DOM HTML

DOM 2 (2001) – www.w3.org/TR/REC-DOM-Level-2/

spații de nume XML, aplicare de stiluri CSS, evenimente

DOM 3 (2004) – www.w3.org/TR/DOM-Level-3-Core/

module oferind diverse funcționalități

DOM 4 (19 noiembrie 2015) – www.w3.org/TR/dom/

restructurarea unor interfețe

DOM Living Standard (nov. 2015) – dom.spec.whatwg.org/

specific HTML5, în continuă dezvoltare

Dr.

Sab

in B

ura

ga


co

<!DOCTYPE html>

<html>

<body>

<p>Tehnologii Web</p>

<div>

<img src="web.png"/>

</div>

</body>

</html>

HTMLHtmlElement

HTMLBodyElement

HTMLParagraphElement

Text

HTMLDivElement

HTMLImageElement

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

De asemenea, programele JavaScript au accesla 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,…

Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


co

interface HTMLDocument : Document { attribute DOMString title; // titlul documentuluireadonly attribute DOMString referrer; // adresa resursei ce referă paginareadonly attribute DOMString domain; // domeniul de care aparținereadonly attribute DOMString URL; // URL-ul absolut al documentuluiattribute HTMLElement body; // acces la elementul <body>readonly attribute HTMLCollection images; // lista tuturor imaginilorreadonly attribute HTMLCollection links; // lista tuturor legăturilorreadonly 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ținutuluivoid write (in DOMString text); // scrie un șir de caract. (e.g., cod HTML)void writeln (in DOMString text); // idem, dar inserează și new lineNodeList getElementsByName (in DOMString numeElement);

// furnizează o listă de elemente conform unui nume de tag};

interfață specificată în limbajul declarativ WebIDL

Dr.

Sab

in B

ura

ga


co

Deoarece interfața HTMLDocument

extinde Document, putem recurge la funcționalitățile

stipulate de specificația DOM generală

Dr.

Sab

in B

ura

ga


co

Proprietatea documentElement

desemnează nodul-rădăcină

Dr.

Sab

in B

ura

ga


co

getElementById (identificator)

furnizează un element – nod de tip Element –conform identificatorului său unic, desemnat de valoarea

atributului id specificat în cadrul documentului

Dr.

Sab

in B

ura

ga


co

parentNode

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

Dr.

Sab

in B

ura

ga


co

nextSibling

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

Dr.

Sab

in B

ura

ga


co

previousSibling

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

Dr.

Sab

in B

ura

ga


co

childNodes

proprietate furnizând într-un tablounumele nodurilor-copil ale nodului curent

Dr.

Sab

in B

ura

ga


co

firstChild

desemnează primul nod-copil al nodului curent

Dr.

Sab

in B

ura

ga


co

lastChild

specifică ultimul nod-copil al nodului curent

Dr.

Sab

in B

ura

ga


co

attributes

reprezintă tabloul asociativconținând atributele asociate unui nod de tip Element

Dr.

Sab

in B

ura

ga


cofunction 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?

Dr.

Sab

in B

ura

ga


co

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

fiecare element HTML specific derivă din ea

Dr.

Sab

in B

ura

ga


co

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

};

Dr.

Sab

in B

ura

ga


co

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

};

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Informații referitoare la nodurile arborelui DOM

nodeType

proprietate care furnizează tipul unui nod

ELEMENT_NODE (1) = elementTEXT_NODE (3) = conținut text

COMMENT_NODE (8) = comentariu…

Dr.

Sab

in B

ura

ga


co


nodeValue

proprietate oferind valoarea unui nod

Dr.

Sab

in B

ura

ga


co


innerHTML

proprietate – mutabilă – ce furnizează codul (X)HTMLdin cadrul unui nod de tip Element

utilizarenerecomandabilă

Dr.

Sab

in B

ura

ga


co


textContent

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

Dr.

Sab

in B

ura

ga


co


getAttribute (numeAtribut)

metodă care oferă acces la valoarea unui atribut

Dr.

Sab

in B

ura

ga


co

Modificarea structurii arborelui DOM

createElement (element)

creează un nod de tip Element

Dr.

Sab

in B

ura

ga


co


createTextNode (nod)

creează un nod cu conținut textual

Dr.

Sab

in B

ura

ga


co


appendChild (nod)

adaugă un nod-copil nodului curent

Dr.

Sab

in B

ura

ga


co

// 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 specificvar element = document.createElement (numeElem); // ...și-i atașăm un nod textvar text = document.createTextNode ("Salut, lumea..."); element.appendChild (text);// adăugăm nodul creatdocument.getElementById (identificator).appendChild (element);

}}genereazaElemente (3, "div", "continut"); // 3 <div>-urigenereazaElemente (2, "p", "lumi"); // 2 paragrafe (<p>)

<div id="lumi"></div><h1 id="continut"></h1> a se studia exemplele

din arhivă

Dr.

Sab

in B

ura

ga


co

consultarea arborelui DOM via extensia Firebug

inspectarea valorilorproprietăților DOM

arborele DOM corespunzător codului HTML

generat prin program

Dr.

Sab

in B

ura

ga


co


removeChild (nod)

elimină un nod-copil

Dr.

Sab

in B

ura

ga


co


cloneChild ()

„clonează” un nod al arborelui

Dr.

Sab

in B

ura

ga


co


setAttribute (atribut, valoare)

stabilește valoarea unui atribut

Dr.

Sab

in B

ura

ga


co

generarea dinamică a unui formular Web

http://jsfiddle.net/busaco/0wvn3fha/

recurgerea la createElement()

appendChild()

getElementById()

JS Fiddle

Dr.

Sab

in B

ura

ga


co

Găsirea de noduri via selectori CSS

Selectors API – Level 1

recomandare W3C (2013)

www.w3.org/TR/selectors-api/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

selectori CSS3

Dr.

Sab

in B

ura

ga


co

Răspunsul la evenimente

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

Dr.

Sab

in B

ura

ga


co


codul JavaScript invocat la apariția unui evenimentva putea fi încapsulat într-o funcție de tratare a acestuia

(handler)

Dr.

Sab

in B

ura

ga


co


tradițional, se atașează cod JavaScript ce va fi executatla apariția unui eveniment de bază

(e.g., onclick, onmouseover, onchange, onload, onkeypress,…)asupra unui element

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co



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

Dr.

Sab

in B

ura

ga


co



document.getElementById ("identificator").onclick

= trateazaClick; // mai ‘evoluat’ via DOM 1

Dr.

Sab

in B

ura

ga


co


tratarea standardizată a evenimentelor:specificația DOM Level 2 Events

www.w3.org/TR/DOM-Level-2-Events/

Dr.

Sab

in B

ura

ga


co


specificarea de activități executatela apariția unui eveniment

obiect.addEventListener ("eveniment", funcție, mod);

Dr.

Sab

in B

ura

ga


co


descrierea arborescentă a fluxului de evenimente

capture versus bubble

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co



mod = true

se încearcă tratarea evenimentului pornindde la rădăcină până la obiectul-țintă – capture phase

Dr.

Sab

in B

ura

ga


co



mod = false

se încearcă tratarea evenimentului atunci cândevenimentul e propagat de la obiectul unde a survenit

până la entitățile superioare lui – bubbling phase

Dr.

Sab

in B

ura

ga


co


se va utiliza un set standard de evenimente

e.g., de control al interacțiunii cu utilizatorul

Dr.

Sab

in B

ura

ga


co


proprietăți asociate evenimentelorprivind acțiunile mouse-ului

click, mousedown, mouseup, mouseover, mousemove, mouseout

Dr.

Sab

in B

ura

ga


co


proprietăți asociate evenimentelorprivind 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-uluiclientY – coordonata verticală a poziției mouse-ului

Dr.

Sab

in B

ura

ga


co

interface MouseEvent : UIEvent {readonly attribute long screenX, screenY; // coordonate relative la ecranreadonly attribute long clientX, clientY; // coordonate relative la zona de redarereadonly attribute boolean ctrlKey, shiftKey, altKey, metaKey; // taste speciale utilizate?readonly attribute unsigned short button; // indică butonul acționatreadonly 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

Dr.

Sab

in B

ura

ga


co


proprietăți asociate evenimentelor vizând tastatura

keyup, keydown, keypress

charCode – codul caracterului asociat tastei acționatekeyCode – codul tastei acționate

Dr.

Sab

in B

ura

ga


co


interacțiuni tactile – touch events

recomandare a Consorțiului Web (2013)

www.w3.org/TR/touch-events/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co


evenimente referitoare la interacțiunea cu browser-ul

load, unload, select, change, submit, focus, blur, resize, scroll

Dr.

Sab

in B

ura

ga


co


evenimente privitoare la modificarea arborelui DOM(mutation events)

DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved,DOMAttrModified, DOMCharacterDataModified,

DOMNodeInsertedIntoDocument,DOMNodeRemovedFromDocument

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co

// monitorizarea modificărilor structurale ale arborelui DOM

[Constructor(MutationCallback callback)]

interface MutationObserver {

// observă modificări

void observe(Node target, MutationObserverInit options);

// oprește observarea modificărilor

void disconnect();

// preia secvența de noduri ce s-au modificat

sequence<MutationRecord> takeRecords();

};

// funcția de tratare a evenimentelor

// privind modificările de structură a arborelui DOM

callback MutationCallback = void (sequence<MutationRecord> mutations,

MutationObserver observer);

Dr.

Sab

in B

ura

ga


co

dictionary MutationObserverInit { // definește ce anume se observă:

boolean childList = false; // o listă de noduri-copil ale nodului țintă (target)

boolean attributes; // atributele nodului țintă

boolean characterData; // conținutul textual propriu-zis

boolean subtree = false; // descendenții nodului țintă

boolean attributeOldValue;

boolean characterDataOldValue;

sequence<DOMString> attributeFilter; // filtre asupra atributelor observate

};

// informații privitoare la nodurile observate, ce s-au modificat

interface MutationRecord {

readonly attribute DOMString type;

readonly attribute Node target;

[SameObject] readonly attribute NodeList addedNodes;

[SameObject] readonly attribute NodeList removedNodes;

readonly attribute Node? previousSibling;

readonly attribute Node? nextSibling;

readonly attribute DOMString? attributeName;

readonly attribute DOMString? attributeNamespace;

readonly attribute DOMString? oldValue;

};

Dr.

Sab

in B

ura

ga


co


proprietăți utile ale obiectului Event

type

specifică tipul evenimentului ca șir de caracteree.g., "click", "load", "scroll", "submit"

Dr.

Sab

in B

ura

ga


co



target

desemnează nodulasupra căruia evenimentul a fost declanșat inițial

Dr.

Sab

in B

ura

ga


co



currentTarget

indică nodul care tratează evenimentul

Dr.

Sab

in B

ura

ga


co



bubbles

indică dacă evenimentul se propagăspre elemente ascendente (valoarea true)

ori către descendenți (valoarea false)

Dr.

Sab

in B

ura

ga


co



bubbles

e.g., evenimentele abort, error, select, submit, resize, scroll,click, mousedown, mouseover, mousemove, mouseout,

touchstart, touchend pot avea bubbles = true

Dr.

Sab

in B

ura

ga


co



bubbles

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

Dr.

Sab

in B

ura

ga


co



cancelable

precizează dacă evenimentul poate fi întrerupt

Dr.

Sab

in B

ura

ga


co



cancelable

de exemplu, pentru evenimentele load, unload, abort, error, select, focus, blur, resize, scroll, touchcancel

proprietatea cancelable este setată ca fiind false

Dr.

Sab

in B

ura

ga


co



cancelable

pentru evenimente precum click, mousedown, mouseup,mouseover, mousemove, mouseout, touchstart, touchend,

touchmove proprietatea cancelable poate fi true

Dr.

Sab

in B

ura

ga


co


eliminarea tratării unui eveniment

removeEventListener ()

Dr.

Sab

in B

ura

ga


co


ignorarea comportamentului implicit

preventDefault ()

Dr.

Sab

in B

ura

ga


co


comportamentul implicit pentru evenimentul tactiltouchend poate varia în funcție de context/platformă:

mousemove, mousedown, mouseup, click

Dr.

Sab

in B

ura

ga


co


trimiterea evenimentului să poată fi procesatconform modelului oferit de implementare

dispatchEvent ()

Dr.

Sab

in B

ura

ga


co

Remarcă:unele navigatoare acceptă tratarea unor evenimente

nestandardizate (încă) de Consorțiul Web

exemple:editarea datelor – cut, copy, paste

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

calcul tabelar în 30 de linii JavaScript

jsfiddle.net/ondras/hYfN3/

Dr.

Sab

in B

ura

ga


co

for (var i = 0; i < 6; i++) { // construim tabelul cu câmpuri de intrarevar row = document.querySelector ("table").insertRow (-1); // adăugăm un rând la tabelfor (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) {} });} )();

Dr.

Sab

in B

ura

ga


co

(în loc de) pauză

http://abstrusegoose.com/432

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

AJAX – Asynchronous JavaScript And XML

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

a se revizita cursul„Tehnologii Web”

Dr.

Sab

in B

ura

ga


co


suită de tehnologii deschise

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

Dr.

Sab

in B

ura

ga


co



redare + interacțiune la nivel de client Webvia standardul DOM

Dr.

Sab

in B

ura

ga


co



interschimb și manipulare de date reprezentate prin: diverse dialecte XML,

JSON (JavaScript Object Notation), HTML,

alte formate

Dr.

Sab

in B

ura

ga


co



transfer (a)sincron de datefacilitat de obiectul XMLHttpRequest

Dr.

Sab

in B

ura

ga


co



procesare folosind limbajul ECMAScript (JavaScript)

Dr.

Sab

in B

ura

ga


co

Obiectul XMLHttpRequest

disponibil la nivel de navigator Web via JavaScript

Dr.

Sab

in B

ura

ga


co


specificația inițială bazată pe implementarea MSIEoferită în prezent de aproape orice browser

www.w3.org/TR/XMLHttpRequest1/

Dr.

Sab

in B

ura

ga


co


specificația actuală oferită de navigatoare moderne(Living Standard, 25 noiembrie 2015)

https://xhr.spec.whatwg.org/

Dr.

Sab

in B

ura

ga


co


permite realizarea de cereri HTTP – e.g., GET, POST,… –dintr-un program rulând la nivel de client (browser)

spre o aplicație / un serviciu Web existent(ă) pe server,în mod asincron ori sincron

Dr.

Sab

in B

ura

ga


co


open ( )

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

Dr.

Sab

in B

ura

ga


co


send ( )

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

Dr.

Sab

in B

ura

ga


co


send ( )

orice listener (asociat evenimentelor onload, ontimeout, onabort,…) trebuie stabilit înainte de a trimite date

Dr.

Sab

in B

ura

ga


co


abort ( )

abandonează transferul de date curent

Dr.

Sab

in B

ura

ga


co


setRequestHeader ( )

specifică anumite câmpuri de antet HTTPexemple: Cookie, Keep-Alive, User-Agent,…

Dr.

Sab

in B

ura

ga


co


getResponseHeader ( )

furnizează un anumit câmp prezentîn antetul mesajului de răspuns HTTP trimis de server

Dr.

Sab

in B

ura

ga


co


getAllResponseHeaders ( )

oferă toate câmpurile HTTP trimise de server,exceptând Set-Cookie

Dr.

Sab

in B

ura

ga


co


readyState

furnizează codul de stare a transferului:0 – UNSENT, 1 – OPENED,

2 – HEADERS_RECEIVED, 3 – LOADING, 4 – DONE

Dr.

Sab

in B

ura

ga


co


status

oferă codul de stare HTTP întors de serverul Web:200 (Ok), 404 (Not Found), 500 (Internal Server Error),…

Dr.

Sab

in B

ura

ga


co


statusText

conține mesajul corespunzător codului de stare HTTP

Dr.

Sab

in B

ura

ga


co


responseText

responseXML

conțin răspunsul (datele) obținut(e) de la server

Dr.

Sab

in B

ura

ga


co


onreadystatechange

specifică funcția ce va fi invocată la modificările de stareale transferului de date dintre server și client

Dr.

Sab

in B

ura

ga


co


excepții specifice care pot fi emise (conform DOM 4 Core)

AbortError InvalidAccessError InvalidStateError

NetworkError SecurityError TimeoutError

…

Dr.

Sab

in B

ura

ga


co

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

(la nivel de milisecunde)

o valoare nenulă cauzează realizarea unei preîncărcări (fetching) a resursei – https://fetch.spec.whatwg.org/

Dr.

Sab

in B

ura

ga


co

Noutăți:datele vehiculate pot fi de mai multe tipuri

(ArrayBuffer, Blob, Document, DOMString, FormData)

detalii la https://xhr.spec.whatwg.org/#interface-formdata

Dr.

Sab

in B

ura

ga


co

Noutăți:procesul de transmitere a datelor spre server (upload)

poate avea asociat un handler specific via proprietatea upload

Dr.

Sab

in B

ura

ga


co

Noutăți:progresul încărcării poate fi urmărit pe baza

funcționalităților specificate de interfața ProgressEvent

https://xhr.spec.whatwg.org/#interface-progressevent

Dr.

Sab

in B

ura

ga


co

interface XMLHttpRequest : XMLHttpRequestEventTarget {// funcția de tratare a evenimentului de schimbare a stării transferuluiattribute Function? onreadystatechange;readonly attribute unsigned short readyState; // starea transferului

// realizarea unei cereri HTTP// deschide o conexiune cu serverul Webvoid open (ByteString metoda, [EnsureUTF16] DOMString url);void open (ByteString metoda, [EnsureUTF16] DOMString url,

boolean asinc, optional ByteString? numecont = null, optional DOMString? parola = null);

// stabilește antetul HTTPvoid setRequestHeader (ByteString campAntet, ByteString valoare);// stochează valoarea în milisecunde a timpului maxim de așteptareattribute unsigned long timeout;

void send (optional data = null); // trimite date spre serverul Webvoid abort (); // abandonează transferul

Dr.

Sab

in B

ura

ga


co

// receptarea răspunsului de la serverul Web// codul de stare HTTP emis de server: 200, 303, 400,…readonly attribute unsigned short status; // textul asociat codului de starereadonly attribute ByteString statusText;

// preia valoarea câmpului-antet din mesajul HTTP transmis de serverByteString? getResponseHeader (ByteString antet);// furnizează toate câmpurile răspunsuluiByteString getAllResponseHeaders ();

// specifică tipul MIME al răspunsului: blob, document, json, text,…attribute XMLHttpRequestResponseType responseType;// conține răspunsul propriu-zisreadonly attribute any response;// furnizează răspunsul în format textreadonly attribute DOMString responseText; // stochează răspunsul ca document XMLreadonly attribute Document? responseXML;

};

Dr.

Sab

in B

ura

ga


co

interface XMLHttpRequestEventTarget : EventTarget { // funcții de tratare a evenimentelor asociate transferului asincronattribute Function? onloadstart; // transferul a începutattribute Function? onprogress; // se realizează transferul datelor…attribute Function? onabort; // s-a abandonat transferul de dateattribute Function? onerror; // a apărut o eroare de transmisieattribute Function? onload; // datele au fost recepționate de clientattribute Function? ontimeout; // a apărut o întârziere de transferattribute Function? onloadend; // transferul s-a terminat

};

// constante ce specifică starea transferului (vezi proprietatea readyState)const unsigned short UNSENT = 0; // încă n-au fost efectuate transferuriconst unsigned short OPENED = 1; // s-a deschis conexiunea cu serverulconst unsigned short HEADERS_RECEIVED = 2; // primire câmpuri-antet HTTPconst unsigned short LOADING = 3; // datele propriu-zise se încarcăconst unsigned short DONE = 4; // gata! (transfer efectuat complet)

specificație WebIDL

Dr.

Sab

in B

ura

ga


co

http://caniuse.com/

suportul oferit de browser

Dr.

Sab

in B

ura

ga


co

studiu de caz

preia asincron o secvență de numere aleatoare

generate de random.org

jsfiddle.net/busaco/2254kdqn/

Dr.

Sab

in B

ura

ga


co

const URL = 'https://www.random.org/sequences/?min=1&max=50&col=1&format=plain';const TIMP = 2000;

var xhr = new XMLHttpRequest();var numere = document.getElementById('numere');// eveniment de tratare a expirării timpului de așteptarexhr.ontimeout = function () { numere.textContent = 'Timpul a expirat... :('; };// eveniment de tratare a preluării datelor solicitate unui serviciuxhr.onload = function () {

if (xhr.readyState === 4) { // am primit dateleif (xhr.status === 200) { // răspuns Ok din partea serverului

// înlocuim spațiile albe cu virgulă și plasăm conținutul// în cadrul elementului HTML identificat prin 'numere'numere.textContent = xhr.responseText.trim().replace(/\W+/g, ', ');

} else {numere.textContent = 'A survenit o eroare: ' + xhr.statusText;

}}

};

xhr.open("GET", URL, true); // deschidem conexiuneaxhr.timeout = TIMP; // stabilim timpul maxim de așteptare a răspunsuluixhr.send(null); // trimitem cererea HTTP (nu expediem date)

Dr.

Sab

in B

ura

ga


co

Ce alte aspecte trebuie considerate

atunci când se recurge la Ajax?

Dr.

Sab

in B

ura

ga


co

Oferirea de alternative la Ajax, atunci când suportulpentru acesta nu este implementat/activat

graceful degradation

progressive enhancement

www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement

Dr.

Sab

in B

ura

ga


co

Minimizarea traficului dintre browser și server

Dr.

Sab

in B

ura

ga


co

Transferul de date poate fi monitorizat (+interceptat)via instrumente dedicate

la nivel de desktop: instrumentul WireShark

Dr.

Sab

in B

ura

ga


co

direct în navigator (eventual, ca extensii)Firebug, Fiddler, TamperData, Live HTTP Headers

Dr.

Sab

in B

ura

ga


co

Stabilirea unui mod de interacțiune clar

interacțiune HTML clasică versus

interacțiune „bogată” cu Ajaxversus

interacțiune la nivelul unei aplicații convenționale

Dr.

Sab

in B

ura

ga


co

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.

Sab

in B

ura

ga


co

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.

Sab

in B

ura

ga


co

Ș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

Dr.

Sab

in B

ura

ga


co


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țieifuncționalitate (Lazy Registration, Direct Login, Heartbeat,

Autosave, Unique URLs)

Dr.

Sab

in B

ura

ga


co


inginerie Web: jurnalizare (e.g., Logging)

depanareinspecție de cod/date (DOM Inspection, Traffic Sniffing)

vezi și cursul viitor

Dr.

Sab

in B

ura

ga


co

http://ajaxpatterns.org/Patterns

Dr.

Sab

in B

ura

ga


co

Comettermen 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.

Sab

in B

ura

ga


co

Comet

șablon de proiectare a aplicațiilor Webcare necesită realizarea de conexiuni persistente,

în stilul peer-to-peer

utilizat de aplicațiile Web intensiv interactive,eventual colaborative – e.g., Google Docs, Mibbit,…

Dr.

Sab

in B

ura

ga


co

Comet

complementar Ajax

long pollingHTTP server push

Reverse Ajax

http://ajaxpatterns.org/HTTP_Streaming

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

Comet

instrumente software – exemplificări:Atmosphere, DWR, Ice Faces, Jetty, Orbited

în contextul JavaScript, un exemplu notabil esteAPE (Ajax Push Engine)

www.ape-project.org

Dr.

Sab

in B

ura

ga


co

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ă

Dr.

Sab

in B

ura

ga


co

Aplicații mash-up

se bazează pe fluxuri RSS/Atom, servicii Web, API-uri publice,…

„curentul” SaaS (Software As A Service)

Dr.

Sab

in B

ura

ga


co

mash-ups

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Same-Origin Security Policy

stipulează că un program JavaScript trebuie să accesezedoar datele aparținând aceleași origini

– i.e., provenite din același domeniu Internet –a script-ului JavaScript

Dr.

Sab

in B

ura

ga


co

se permit doar transferuri vizând reprezentări de resursereferitoare la imagini, fișiere CSS

și alte programe JavaScript aparținând aceleași origini

Dr.

Sab

in B

ura

ga


co

Same-Origin Security Policy

previne cazurile în care un document/program încărcatdintr-o origine să poată accesa/modifica proprietăți

ale unui document aparținând altei origini

https://developer.mozilla.org/Web/Security/Same-origin_policy

Dr.

Sab

in B

ura

ga


co

interactiune web: ajax – studiu de cazvar url = "http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film";

// realizăm o cerere HEAD pentru a obține meta-date despre o resursăvar client = new XMLHttpRequest ();client.open ("HEAD", url, true);client.send ();client.onreadystatechange = function () {

// am recepționat câmpurile-antet?if (client.readyState == 2) {// semnalăm tipul MIME și data ultimei actualizărialert ("Resursa de tip '" +

client.getResponseHeader ("Content-Type") + "' s-a actualizat la " + client.getResponseHeader ("Last-Modified"));

}}

preluarea în mod asincron via HEAD a unor meta-date

Dr.

Sab

in B

ura

ga


co

URL al altui domeniueludăm Same Origin Policy

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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 accesprogramul JavaScript?

test scris #4 (T4)

Transferul datelorvia Comet

este bidirecțional?De ce?

Dr.

Sab

in B

ura

ga


co

episodul viitor: ingineria aplicațiilor JavaScript