dezvoltarea sistemelor web -...

140
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/ Dezvoltarea sistemelor Web procesarea datelor XML/HTML Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

Upload: others

Post on 02-Sep-2019

4 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/Dezvoltarea sistemelor Web

procesarea datelor XML/HTML

ⵄDr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

Page 2: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

„Regula de aur este că nu există reguli de aur.”

George Bernard Shaw

Page 3: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Cum putem prelucra documentele XML?

Page 4: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Tipuri de procesări XML

procesare obiectuală

DOM (Document Object Model)non-DOM

Page 5: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Tipuri de procesări XML

procesare condusă de evenimente

SAX (Simple API for XML)XPP (XML Pull Parsing)

Page 6: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Tipuri de procesări XML

procesare simplificată

Simple XML

Page 7: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Procesoare (analizoare) XMLfără validare

verifică doar dacă documentul

este bine-formatat (well formed)

Expat, libxml, MSXML,...

Page 8: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Procesoare (analizoare) XMLcu validare

verifică dacă documentul este valid,conform unei metode de validare – e.g., DTD

Apache Xerces, JAXP, libxml, MSXML,...

Page 9: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Modelul DOM

introducereinterfețe DOM

DOM CoreDOM – nivelul 2DOM – nivelul 3DOM – nivelul 4

implementăriDOM direct în navigatorul Web

Page 10: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: intro

Scop:

procesarea obiectuală – standardizată –

a documentelor XML și/sau HTML

Page 11: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: caracterizare

Interfață de programare a aplicațiilor (API)

abstractă pentru XML/HTML

independentă de platformă și limbaj

standardizată de Consorțiul Web – W3C

Page 12: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: caracterizare

Definește o structură logică arborescentă

a documentelor XML

document ierarhie a unui set de obiecte

pe baza cărora se pot accesa/modifica date XML

Page 13: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: niveluri de specificare

DOM 1 (1998)

www.w3.org/TR/REC-DOM-Level-1/

DOM Core pentru XML

DOM HTML pentru procesarea standardizatăa paginilor Web – uzual, la nivel de client (browser)

Page 14: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: niveluri de specificare

DOM 2 (2001)

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

recomandări multiple privind diverse funcționalități: spații de nume, aplicare de stiluri,

răspuns la evenimente etc.

Page 15: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: niveluri de specificare

DOM 3 (2004)

www.w3.org/TR/DOM-Level-3-Core/

funcționalități specifice oferite de module(unele deja standardizate)

traversare a arborelui, validare, încărcare și salvare (asincrone),…

Page 16: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: niveluri de specificare

DOM 4 (2015)

www.w3.org/TR/dom/

restructurarea unor interfețe + noi funcționalități

Page 17: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: niveluri de specificare

DOM Living Standard

dom.spec.whatwg.org

specific HTML5

în continuă dezvoltare(cea mai recentă actualizare: 4 noiembrie 2019)

Page 18: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: interfețe

Modalitate abstractă de accesare și de modificarea reprezentării interne a unui document XML

datele sunt încapsulate în obiecte, ascunse și/sauprotejate de prelucrarea externă directă

Page 19: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: interfețe

Nu implică o implementare concretă, particulară

DOM oferă interfețe independente de implementare pentru

accesarea/procesarea datelor

Page 20: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: interfețe

Interfețele sunt specificate cuIDL (Interface Description Language)

pentru Web, se recurge la WebIDLwww.w3.org/TR/WebIDL-1/ (W3C Recommendation, 2016)heycam.github.io/webidl/ (în lucru, 16 octombrie 2019)

Page 21: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: interfețe – IDL

Definește tipurile de obiecteprin specificarea interfețelor acestora

(proprietăți + metode publice)

pur declarativ

Page 22: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: interfețe – IDL

Oferă suport pentru moștenire multiplăprin intermediul interfețelor

specifică module, interfețe, metode, tipuri,atribute, excepții, constante

Page 23: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: interfețe – exemplu

Specificarea interfeței NodeList

interface NodeList {

getter Node? item (unsigned long index);

readonly attribute unsigned long length;

};

metodă cu un parametru;rezultat: o valoare de tip Node

proprietate read-onlyde tip întreg lung fără semn

Page 24: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: interfețe – exemplu

Specificarea interfeței Attr

interface Attr : Node {

readonly attribute DOMString name;

readonly attribute boolean specified;

attribute DOMString value;

};

Attr extinde Node

3 proprietăți

Page 25: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Un document ierarhie de obiecte-nod care pot implementa interfețe (specializate)

nodurile posedă descendenți ori sunt noduri frunză

parcurgerea arborelui se realizează în preordine, în adâncime (depth-first)

Page 26: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Accesul la date– liste de noduri, atribute, valori,… –

se realizează recurgându-se la metodele specificefiecărui tip de noduri ale arborelui

Page 27: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

DocumentElement, ProcessingInstruction,

Comment, DocumentType

DocumentFragment

Element, ProcessingInstruction, Comment, Text, CDATASection,…

ElementElement, Text, Comment,

CDATASection, EntityReference,…

Attr Text, EntityReference

Text–

(nod frunză al arborelui DOM)

dom: core – tipuri de noduri

Page 28: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:

DOMException

gestionează setul de excepții de procesare

Page 29: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:DocumentFragment : Node

acces la fragmente de arbore(obiect minimal fără nod rădăcină)

DOMNode

DOMDocumentFragment

Page 30: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Document

oferă acces la document

pentru consultare și/sau modificare

Page 31: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Document

proprietățidoctype, implementation, documentElement

acces laelementul-rădăcină

Page 32: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Document

metode createElement(), createTextNode(), createAttribute(), getElementsByTagName(),getElementsByTagNameNS(), getElementById(), createElementNS(), importNode() etc.

Page 33: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Node

acces la nodurile arborelui

tipuri de noduri – e.g., Document, Element, CharacterData (Text, Comment, CDATASection), DocumentFragment, DocumentType, EntityReference,… – prelucrate în mod similar

Page 34: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Node

proprietăți: nodeName nodeValue nodeType

parentNode parentElement

childNodes firstChild lastChild

previousSibling nextSibling

Page 35: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: coreTipuri de noduri (proprietatea nodeType) Valoare

ELEMENT_NODE 1

ATTRIBUTE_NODE 2

TEXT_NODE 3

CDATA_SECTION_NODE 4

ENTITY_REFERENCE_NODE 5

ENTITY_NODE 6

PROCESSING_INSTRUCTION_NODE 7

COMMENT_NODE 8

DOCUMENT_NODE 9

DOCUMENT_TYPE_NODE 10

DOCUMENT_FRAGMENT_NODE 11

NOTATION_NODE 12

Page 36: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Node

metode insertBefore(), appendChild(), replaceChild(), removeChild(), cloneNode(),hasChildNodes(), isEqualNode(), isSameNode()

Page 37: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Element

facilitează accesul la elementele XML

DOMNode

DOMElement

Page 38: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Element

proprietăți: tagName id

childNodes firstChild lastChild

attributes

nextElementSibling

previousElementSibling

Page 39: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Element

metode getAttribute(), getAttributeNS(),getAttributeNames(), getAttributeNode(),setAttribute(), setAttributeNS(),removeAttribute(), removeAttributeNS(), hasAttribute(), hasAttributeNS(),…

Page 40: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:Attr : Node

acces la atributeleunui element

DOMNode

DOMAttr

Page 41: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

Interfețe fundamentale:NodeList – acces la colecții de noduri via indecșiNamedNodeMap – acces pe baza cheilor

(în cazul HTML, pentru liste de atribute)proprietate: lengthmetode: item() getNamedItem() getNamedItemNS()

setNamedItem() removeNamedItem() etc.

Page 42: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: html

DOM HTML extinde DOM Core

specializarea interfețelor și oferirea de suport obiectualpentru prelucrarea documentelor HTML

standardizează procesarea paginilor Web(e.g., în cadrul navigatorului)

Page 43: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: core

un document HTML și arborele DOM corespunzătorreprezentat via Live DOM Viewer

software.hixie.ch/utilities/js/live-dom-viewer/

în cazul HTML, numele elementelor sunt disponibile cu litere mari (capitals)

Page 44: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

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

Page 45: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

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

Page 46: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: html

Interfața HTMLCollection reprezintă o listă de noduri HTML

un nod poate fi accesat folosind un index numeric sau pe baza unui identificator – stabilit via atributul id

interface HTMLCollection {

readonly attribute unsigned long length; // oferă numărul nodurilor din listă

Node item (in unsigned long index); // oferă un nod via un index numeric

Node namedItem (in DOMString name); // furnizează un nod pe baza numelui

};

Page 47: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

fiecare element HTML specific derivă din ea

Node ElementHTML

ElementHTML

DivElement

o interfață specifică fiecărui element HTML

Page 48: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

<!DOCTYPE html>

<html>

<body>

<p>Web</p>

<div>

<img src="web.png"/>

</div>

</body>

</html>

HTMLHtmlElement

HTMLBodyElement

HTMLParagraphElement

Text

HTMLDivElement

HTMLImageElement

Page 49: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

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

// (application/x-www-form-urlencoded)

attribute DOMString method; // metoda HTTP folosită (GET sau POST)

void submit(); // trimite date URI-ului definit de ‘action’

};

// interfața DOM pentru elementul <img/> (e.g., conținut grafic raster: GIF, JPEG, PNG)

interface HTMLImageElement : HTMLElement {

attribute DOMString alt; // text alternativ descriind conținutul grafic

attribute DOMString src; // URL-ul resursei reprezentând imaginea

};

Page 50: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: html

Aspecte specifice:

innerHTML

proprietate – mutabilă – ce furnizează marcajele HTMLdin cadrul unui nod de tip Element

utilizarenerecomandabilă

Page 51: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: html

Aspecte specifice:

textContent

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

Page 52: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Extinde funcționalitățile DOM1

crearea unui obiect Documentcopierea unui nod dintr-un document în altul

și multe altele…

specificațiaDOM 2 Core

Page 53: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Extinde funcționalitățile DOM1

alte facilități:controlul aplicării foilor de stiluri CSS

tratarea evenimentelor

specificarea filtrelor și iteratorilor(parcurgeri sofisticate de arbori DOM)

Page 54: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Suport pentru procesarea foilor de stiluri CSS

pentru HTML5, se realizează pe baza unui model obiectual specific: CSSOM (CSS Object Model)

specificație în lucru (draft) – 16 octombrie 2019

drafts.csswg.org/cssom/

Page 55: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Suport pentru procesarea foilor de stiluri 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;");

Page 56: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Tratarea evenimentelor

definirea de activități (callback-uri) executatela apariția unui eveniment

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

în cazul browser-ului Web, codul JavaScript invocatla apariția unui eveniment va putea fi încapsulat

într-o funcție de tratare a acestuia (event handler)

Page 57: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Tratarea evenimentelor

descrierea arborescentă a fluxului de evenimente

capture versus bubble

Page 58: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Tratarea evenimentelor

descrierea arborescentă a fluxului de evenimente

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

Page 59: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Tratarea evenimentelor

descrierea arborescentă a fluxului de evenimente

tratarea evenimentului poate avea loc atunci cândevenimentul e propagat de la obiectul unde a survenit

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

Page 60: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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/

Page 61: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Tratarea evenimentelor

se va utiliza un set standard de evenimente

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

Page 62: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Tipuri de evenimente:

de interfață – context: interacțiunea cu utilizatorul

mouse: click, mousedown, mouseup, mouseover, mousemove

tastatură: keypress, keydown, keyup

uzual, folosite în contextul HTML

Page 63: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Tipuri de evenimente:

referitoare la interacțiunea cu browser-ul

specifice HTML (document Web ori formular)

load, unload, abort, error, select, submit, focus, blur, resize, scroll

Page 64: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Tratarea evenimentelor

sunt puse la dispoziție interfețele:EventTarget

EventListenerEvent – minimal: UIEvent și MouseEvent

Page 65: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 2

Traversarea arborilor DOM

se specifică interfețele opționaleTreeWalker

NodeIteratorFilter

www.w3.org/TR/DOM-Level-2-Traversal-Range

Page 66: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 3

Extinde DOM 2, oferindu-se interfețe pentru manipularea XML via module DOM

un modul pune la dispoziție o facilitate particulară

Page 67: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 3

Modulul Core include interfețele fundamentalece trebuie implementate de toate implementările

DOM conformându-se standardului

www.w3.org/TR/DOM-Level-3-Core

Page 68: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 3

module disponibile: XML, HTML, XPath, Traversal, Range,Validation, Events, Views, Load & Save, Stylesheet,…

→ depinde de

Page 69: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: nivelul 4

Unifică DOM3 Core, Element Traversal, Selectors API – nivelul 2, DOM3 Events

noi interfețe: ParentNode, ChildNode, Elements,…

suport și pentru specificarea de evenimente proprii via interfața CustomEvent

Page 70: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: implementări

DOMDocument – clasă PHPphp.net/manual/en/book.dom.php

JAXP (Java Architecture for XML Processing) parte integrantă din J2SE (javax.xml.*)

docs.oracle.com/javase/tutorial/jaxp/

jsdom – modul Node.js: github.com/jsdom/jsdom

org.w3c.dom.Document – interfață DOM (Android)developer.android.com/reference/org/w3c/dom/Document.html

Page 71: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: implementări

Xerces DOM API – platformă de procesare XML (C++ și Java): xerces.apache.org

XmlDocument – clasă .NET (C# et al.)docs.microsoft.com/en-us/dotnet/api/system.xml.xmldocument

XMLDocument – clasă Objective-C / Swiftdeveloper.apple.com/documentation/foundation/xmldocument

xml.dom – modul Python: docs.python.org/3/library/xml.dom.html

Page 72: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: api-uri particulare (exemple)

Open Street Map API – acces la datele XML oferite de serviciul cartografic liber OpenStreetMap

wiki.openstreetmap.org/wiki/OSM_XML

wiki.openstreetmap.org/wiki/API

SVG DOM API – procesarea documentelor SVG în Java(Apache Batik): xmlgraphics.apache.org/batik/

developer.mozilla.org/Web/API/Document_Object_Model#SVG_interfaces

Xamarin.Forms – crearea via C# de interfețe-utilizator specificate în XAML pentru Android, iOS și Windows

dotnet.microsoft.com/apps/xamarin/xamarin-forms

Page 73: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: implementări

Procesarea documentelor XML/HTML

procesorprogram

🗎date XML

HTML

API XML

arbore DOM

Page 74: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Studiu de caz:preluarea informațiilor referitoare la

lista proiectelor propuse

vezi exemplele de cod asociate

acestei prelegeri

Page 75: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

try {

$doc = new DomDocument; // instanțiem un obiect DOM

$doc->load ("projects.xml"); // încărcăm documentul XML

// afișăm informații privitoare la proiecte: titlul + clasa (dacă există)

$projs = $doc->getElementsByTagName("project");

foreach ($projs as $proj) { // preluăm nodurile-element <title>

$titles = $proj->getElementsByTagName("title");

foreach ($titles as $title) {

echo "Proiect: " . $title->nodeValue;

}

// verificăm dacă există specificată clasa proiectului

if ($proj->hasAttribute("class")) {

echo " de clasa " . $proj->getAttribute("class");

}

}

} catch (Exception $e) {

die ("Din păcate, a survenit o excepție.");

}

procesări DOM în limbajul PHP

Page 76: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Prelucrarea documentelor XML prin DOM la nivel de client Web?

Page 77: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: browser

Accesarea/procesarea documentelor HTML și XML– fără validare – se realizează via DOM de programe

JavaScript (ECMAScript) interpretate de navigatorul Web

Page 78: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: browser

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

Page 79: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Page 80: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Page 81: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Page 82: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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 șideveloper.mozilla.org/Web/Events

Page 83: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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.

Page 84: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

dom: browser

Se oferă suport și pentru transfer asincron de dateîntre client (browser) și server Web

AJAX – Asynchronous JavaScript And XMLvia obiectul XMLHttpRequest și/sau Fetch API

Page 85: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

studiu de caz: RandomAjax

preia asincrono secvență de numere aleatoare generate de random.org – trimisă ca

text obișnuitjsfiddle.net/busaco/2254kdqn/

Page 86: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

var xhr = new XMLHttpRequest ();

var numbers = document.getElementById ('numbers’);

// tratarea evenimentului de expirare a timpului de așteptare

xhr.ontimeout = function () { numbers.textContent = 'Time-out... :('; };

// tratarea evenimentului de preluare a datelor solicitate unui serviciu

xhr.onload = function () {

if (xhr.readyState === 4) { // am primit datele

if (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 'numbers'

numbers.textContent = xhr.responseText.trim ().replace (/\W+/g, ', ');

} else {

numbers.textContent = 'An error occurred: ' + xhr.statusText;

}

}

};

Page 87: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// adresa Web a sursei de date

const URL = 'https://www.random.org/sequences/

?min=1&max=33&col=1&format=plain';

// timpul maxim de așteptare a răspunsului trimis de server

const TIME = 2000;

// deschidem conexiunea

xhr.open ("GET", URL, true);

// stabilim timpul maxim de așteptare a răspunsului

xhr.timeout = TIME;

// nu expediem date

xhr.send (null);

Page 88: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Există maniere alternativepentru procesarea documentelor XML?

Page 89: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: intro

Scop: consultarea documentelor XML/HTML

fără ca în prealabil să fie construitarborele de noduri-obiect

documentul nu trebuie stocat completîn memorie înainte de a fi efectiv prelucrat

Page 90: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: caracterizare

Oferă o procesare XML secvențială (liniară),bazată pe evenimente – event-oriented

“SAX is a streaming interface – applications receive information from XML documents in a continuous stream,

with no backtracking or navigation allowed”

Page 91: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: caracterizare

Efort independent – de cel al Consorțiului Web –de standardizare a procesării XML

condusă de evenimente

www.saxproject.org

Page 92: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: procesare

Pentru fiecare tip de construcție XML– început de tag, sfârșit de tag, date (conținut),

instrucțiune de procesare, comentariu,... –va fi emis un eveniment care va fi tratat

de o funcție/metodă (handler)

Page 93: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: procesare

Funcțiile/metodele de tratare se specificăde către programator, pentru fiecare tip

de construcție XML în parte

Page 94: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: procesare

Minimal, trebuie definite funcțiile/metodele:

trateaza_tag_inceput (procesor, tag, atrib) trateaza_tag_sfarsit (procesor, tag)trateaza_date_caracter (procesor, date)

conține lista atributeloratașate tag-ului de început

Page 95: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: procesare

Pentru fiecare eveniment de apariție a tag-ului deînceput, a tag-ului de sfârșit și a datelor-conținut,se atașează una din funcțiile de tratare, respectiv:

set_element_handler(trateaza_tag_inceput, trateaza_tag_sfarsit)

set_character_data_handler(trateaza_date_caracter) funcții sau

metode definite de programator

Page 96: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Aplicație

clientProcesor

SAX

Instanțiereahandler-elor

notificare

apariție evenimentînceput de tag

Procesare

trimiteevenimente

SAX

apelare handler

inițiere procesare: parse ( )

<projects><project class="M">…</project>

</projects>apariție eveniment

final de tag

apelare handler

etc.

programul consumă și tratează evenimenteproduse de procesorul SAX

Page 97: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: implementări

Expat – procesor XML cu suport pentru diverse metode de prelucrare (DOM, SAX etc.): libexpat.github.io

libxml – bibliotecă open source: C, C++, Haskell, Scala,…

NSXMLParser – implementare Objective-C + Swift (Apple)developer.apple.com/documentation/foundation/xmlparser

org.xml.sax – API de referință pentru Java

xml_*( ) – funcții PHP: php.net/manual/en/book.xml.php

Page 98: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax: implementări – exemplificare

Procesarea în PHP unui document XML via SAXpentru a genera o reprezentare HTML a datelor

web-test.xml – document XML modelând date de intrare parseXML.php – clasa pentru prelucrarea documentelor XML

subiecte-test.php – program afișând subiectele unor teste

de studiat exemplele din arhivă

Page 99: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

<!-- document XML colectând subiecte de teste scrise -->

<subiecte materie="Tehnologii Web" data="2019-04-16">

<subiect>Ce este Web-ul?</subiect>

<subiect>Unde e stocat un cookie?</subiect>

<subiect>La ce este util limbajul XPath?</subiect>

</subiecte>

subiecte-test.php parseXML.phprequire()

Page 100: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

class parseXML {private $xml_parser; // instanța analizorului XMLprivate $xml_file; // numele fișierului XML cititprivate $html_code; // codul HTML generatprivate $open_tags; // mulțimea subtituțiilor tag-urilor de începutprivate $close_tags; // mulțimea subtituțiilor tag-urilor de sfârșit

public function set_open_tags($tags) {$this->open_tags = $tags;

} public function set_close_tags($tags) {$this->close_tags = $tags;

} // stabilește numele fișierului XML procesatpublic function set_xml_file($file) {$this->xml_file = $file;

}// furnizează codul HTML generatpublic function get_html_code() {return $this->html_code;

}

clasa oferind prelucrarea

documentelor XML

Page 101: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// tratarea evenimentului de apariție a unui tag de începutprivate function start_element($parser, $name, $attrs) {// dacă există în tabloul de substituții, va fi înlocuit cu conținutul precizatif ($format = $this->open_tags[$name])

$this->html_code .= $format;} // tratarea evenimentului de apariție a unui tag de sfârșitprivate function end_element($parser, $name) {if ($format = $this->close_tags[$name])

$this->html_code .= $format;} // tratarea evenimentului de apariție a unor date de tip caracterprivate function character_data($parser, $data) {$this->html_code .= $data;

}clasa oferind prelucrarea

documentelor XML

Page 102: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

public function parse() { // analiza propriu-zisă condusă de evenimente$this->xml_parser = xml_parser_create(); // instanțiază procesorul XML// înregistrează funcțiile de analiză ca fiind metode ale obiectului curentxml_set_object($this->xml_parser, $this);// setează opțiuni (tag-urile nu sunt rescrise cu caractere mari)xml_parser_set_option($this->xml_parser,

XML_OPTION_CASE_FOLDING, false);// stabilește funcțiile de procesare a elementelor XMLxml_set_element_handler($this->xml_parser,

"start_element", "end_element");xml_set_character_data_handler($this->xml_parser, "character_data");

if (!($fp = fopen($this->xml_file, "r"))) // deschide fișierul XMLdie("could not open XML source");

while ($data = fread($fp, 4096)) { // citește date în „calupuri” de 4KBif (!xml_parse($this->xml_parser, $data, feof($fp))) {

die(sprintf("XML error: %s at line %d", // eroare de procesarexml_error_string(xml_get_error_code($this->xml_parser)),xml_get_current_line_number($this->xml_parser))); } }

} // parse} // class

Page 103: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// programul PHP ce afișează propunerile de subiecte de teste scriserequire("parseXML.php");

// substituția via două tablouri asociative a elementelor XML cu cod HTML// (cheia = element XML de intrare, valoarea cheii = marcaj HTML rezultat) $open_tags = [

'subiecte' => "<section><ol>", 'subiect' => "<li>"

]; $close_tags = [

'subiecte' => "</ol></section>", 'subiect' => "</li>"

];// instanțiază și inițializează analizorul $parser = new parseXML(); $parser->set_xml_file('web-test.xml'); $parser->set_open_tags($open_tags); $parser->set_close_tags($close_tags); // rulează analizorul XML $parser->parse(); echo $parser->get_html_code(); // redarea codului HTML generat

Page 104: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// programul PHP ce afișează propunerile de subiecte de teste scriserequire("parseXML.php");

// substituția via două tablouri asociative a elementelor XML cu cod HTML// (cheia = element XML de intrare, valoarea cheii = marcaj HTML rezultat) $open_tags = [

'subiecte' => "<section><ol>", 'subiect' => "<li>"

]; $close_tags = [

'subiecte' => "</ol></section>", 'subiect' => "</li>"

];// instanțiază și inițializează analizorul $parser = new parseXML(); $parser->set_xml_file('web-test.xml'); $parser->set_open_tags($open_tags); $parser->set_close_tags($close_tags); // rulează analizorul XML $parser->parse(); echo $parser->get_html_code(); // redarea codului HTML generat

arborele DOM al reprezentării obținute

Page 105: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax vs. dom

Când poate fi folosit SAX?

procesarea unor documente de mari dimensiuni

necesitatea abandonării procesării(procesorul SAX poate fi oprit oricând)

extragerea unor informații de mici dimensiuni

Page 106: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax vs. dom

Când poate fi folosit SAX?

crearea unei structuri noi de document XML

utilizarea în contextul unor resurse de calcul reduse(memorie scăzută, lărgime de bandă îngustă,...)

exemplificare pentru Android:developer.android.com/reference/javax/xml/parsers/SAXParser.html

cod demonstrativ pentru iOS – SeismicXML:developer.apple.com/library/ios/samplecode/SeismicXML/

Page 107: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax vs. dom

Când poate fi utilizat DOM?

accesul direct la datele dintr-un document XML

procesări sofisticate

filtrarea complexă a datelor via XPath

efectuarea de transformări XSL

validarea datelor XML prin DTD, XML Schema etc.

Page 108: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax vs. dom

Când poate fi utilizat DOM?

necesitatea modificării și/sau salvării documentelor XML

în contextul procesării datelor XML/HTML directîn cadrul navigatorului Web, date obținute eventual

via transferuri asincrone prin Ajax

Page 109: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax vs. dom

DOM necesită încărcareacompletă în memorie a documentului XMLîn vederea procesării

ca arbore

HTMLHtmlElement

HTMLBodyElement

HTMLAsideElement

Text

HTMLDivElement

HTMLImageElement

Page 110: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

sax vs. dom

SAX preia fragmente reduse din document,efectuându-se o prelucrare liniară

(șir de evenimente)

start tag

start tag

characters

end tag

end tag

Page 111: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Există și alte metode de procesare XML?

Page 112: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

„Legarea” datelor XML de alte surse de date(XML binding)

baze de date: XML infoset dataset

<doc>

<xml />

<!-- … -->

</doc>

Id P A S

1 … … …

2 … … …

3 … … …

<doc>

<xml />

<!-- … -->

</doc>

data sets (tables)

arbore DOM(în memorie)

fișier XML

DBMS

Page 113: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

XML binding

baze de date: XML infoset dataset

specificația SQL/XML – vezi standardul SQL:2016-14

aspecte de interes:tipul XML pentru valori ale câmpurilor tabelelorrecurgerea la predicate + funcții specifice XML

Page 114: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

baze de date: XML infoset dataset

implementări concrete:Oracle XML DB

docs.oracle.com/cd/B28359_01/appdev.111/b28369/xdb01int.htm

a se consulta și SQLXML (J2SE 8+)docs.oracle.com/javase/tutorial/jdbc/basics/sqlxml.html

pureXML (IBM DB2)www.ibm.com/developerworks/data/library/techarticle/dm-0603saracco2/

XML Data (Microsoft SQL Server)docs.microsoft.com/en-us/sql/relational-databases/xml/

a se studia și clasa SqlXml (.NET Framework)docs.microsoft.com/en-us/dotnet/api/system.data.sqltypes.sqlxml

XML Functions (PostgreSQL)www.postgresql.org/docs/current/static/functions-xml.html

Page 115: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

XML binding

abordare obiectuală: date XML clase create „din zbor”

(serialization, marshalling)

Page 116: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

abordare obiectuală: date XML clase create „din zbor”

exemple:C++ – cereal: uscilab.github.io/cereal/

C++, C#, Go, Java, Ruby, Python,… – Protocol Buffersdevelopers.google.com/protocol-buffers/

JS – node-xml2js: github.com/Leonidas-from-XIV/node-xml2js

.NET (C# et al.) – clasa XmlSerializerdocs.microsoft.com/en-us/dotnet/standard/serialization/introducing-xml-serialization

PHP – SimpleXML: php.net/manual/en/book.simplexml.php

Python – Untangle: github.com/stchris/untangle

Scala – scalaxb: scalaxb.org

Page 117: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

XML binding

interogări asupra datelor XMLdirect în limbajul de programare

LINQ (Language INtegrated Query) – .NET

docs.microsoft.com/dotnet/articles/csharp/programming-guide/concepts/linq/linq-to-xml

Page 118: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

XDocument proiecte; // XDocument e o clasă .NET

proiecte = XDocument.Load ("projects.xml");

var proiecteM =// via o expresie LINQ, preluăm toate proiectelefrom p in proiecte.Descendants ("project")// din care le alegem pe cele de clasa 'M'where (String) p.Attribute ("class") == "M"// ordonate după numărul de studențiorderby (String) p.Element ("stud")// selectând doar titlul acestoraselect (String) p.Element ("title");

// afișăm titlul proiectelor de clasa 'M'foreach (var proiect in proiecteM) {

Console.WriteLine (proiect);}

Page 119: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

XML binding

JAXB – Java Architecture for XML Binding (JSR-222)jcp.org/en/jsr/detail?id=222

implementarea de referință:github.com/eclipse-ee4j/jaxb-ri

de experimentat și EclipseLink: www.eclipse.org/eclipselink/

Page 120: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

XML binding

interoperabilitate cu alte formate: XML JSON

nu există o metodă standardizată

exemplificări de instrumente și biblioteci:Apache Camel (Java), js2xmlparser (Node.js),

JSON-lib (Java), x2js (JavaScript), xml2json (Node.js)

Page 121: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

Procesarea XML simplificată

scop:procesarea unui document XML (de mici dimensiuni)

direct în memorie,în manieră obiectuală,

diferită de DOM

Page 122: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

Procesarea XML simplificată

fiecărui element XML îi poate corespundeo proprietate a unui obiect

atributele asociate elementelor XML pot fi modelatevia o structură de date – e.g., tablou asociativ

Page 123: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

Procesarea XML simplificată

exemplificări diverse:libxml (C, C++ și alte limbaje)

SimpleXML (PHP) – php.net/manual/en/book.simplexml.php

XML::Simple + XML::Writer (Perl)XmlSimple (Ruby)

XmlTextReader + XmlTextWriter (.NET)

Page 124: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// încărcăm documentul XML

$xml = simplexml_load_file('http://web.info/projects.xml');

// afișăm descrierile proiectelor de clasă M

foreach ($xml->project as $proj) {

if ($proj['class'] == 'M') {

echo '<p>' . $proj->desc . '</p>';

}

}

de consultat exemplele din arhivă

Page 125: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

Procesarea XML simplificatăpentru consultare, se poate folositun „cititor” (reader): XMLReader

exemple:modulul xmlreader pentru Node.js

xmlReader oferit de biblioteca libxml (C et al.)XMLReader (PHP) – php.net/manual/en/book.xmlreader.php

clasa XmlReader oferită de .NET (C# et al.)

Page 126: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alternative

Procesarea XML simplificatăpentru generare, se poate utilizaun „scriitor” (writer): XMLWriter

exemplificări:clasa XmlWriter pentru .NET

xmlWriter din cadrul bibliotecii libxml (C et al.)XMLWriter (PHP) – php.net/manual/en/book.xmlwriter.php

modulul xml-writer pentru Node.js

Page 127: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Cum pot fi procesate documentele HTML?

Page 128: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html

Aspect de interes:ignorarea erorilor de sintaxă

documente bine formatate (well formed) versus

documente valide

Page 129: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html

Aspect de interes:ignorarea erorilor de sintaxă

malformed markup

sunt relativ rare cazurile în care documentele HTML sunt scrise/generate corect

Page 130: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html

Tehnica folosită uzual – nerecomandată

Web scraping

extragerea datelor de interes prin prelucrarea – de obicei, empirică –

a marcajelor HTML

un exemplu recurgând la expresii regulate:scraping.pro/scraping-in-php-with-curl/

Page 131: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html

Recurgerea la un procesor HTML/XML specific

scopuri importante:traversarea (procesarea) unei pagini Web – e.g., via DOM

+detectarea și repararea erorilor sintactice (HTML clean)

Page 132: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html: instrumente

Beautiful Soup – bibliotecă Pythonwww.crummy.com/software/BeautifulSoup/

html5lib – procesare + serializare HTML pentru Pythongithub.com/html5lib

HAP (HTML Agility Pack) – bibliotecă .NET (C#)html-agility-pack.net

jsoup – bibliotecă Java pentru HTML5jsoup.org

Page 133: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html: instrumente

Masterminds HTML5-PHP – procesor HTML5 în PHPgithub.com/Masterminds/html5-php

Parse5 – modul Node.jsgithub.com/inikulin/parse5

Simple HTML DOM Parser – bibliotecă PHPsimplehtmldom.sourceforge.net

SwiftSoup – bibliotecă Swift (macOS, iOS, tvOS + Linux)www.scinfu.com/SwiftSoup/

Page 134: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html: instrumente

HtmlCleaner – instrument implementat în Java pentrucorectarea marcajelor HTML eronate

HTML Purifier – verificare + filtrare a marcajelor HTML(inclusiv vizând atacuri de tip XSS – Cross Site Scripting)

cu implementări în PHP și Objective-C

NekoHTML – procesor Java pentru HTML bazat pe Xercescu suport pentru rezolvarea erorilor sintactice

Validator.nu – procesor Java folosind DOM ori SAXcu semnalarea erorilor de sintaxă HTML5

Page 135: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html: instrumente – exemplu

Preluarea datelor despre produse (albume musicale) – denumire, cod de bare și preț – din documente HTML

(invalide) oferite de un sit Web de profil

se recurge la biblioteca Simple HTML DOM Parserdisponibilă sub licență deschisă (open source)

Page 136: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html: instrumenteincorect!(malformed markup)

Page 137: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

require_once('simple_html_dom.php');

define('URL', 'https://www.nicherecords.ro/catalog/'); // URL-ul sitului sursă

$cai_produse = [ // căile spre produse (i.e. documentele HTML procesate)

"pop-rock/rock-psihedelic/pink-floyd-the-wall-dvd.html",

"jazz/jazz-1/nina-simone-silk-soul-vinyl.html",

"clasica/clasica-1/bach-simply-bach-cd.html",

"metal/heavy-metal/king-diamond-graveyard-vinyl-1.html" ];

foreach ($cai_produse as $cale) { // preluăm date despre fiecare produs

$html = file_get_html(URL . $cale);

$prod = $html->find("span.alb", 0)->plaintext;

$cod_bare = explode(": ", $html->find("span.barcode", 0)->plaintext)[1];

$pret = (int) explode(" ", $html->find("span.price", 0)->plaintext)[0];

printf("<p><a title='Detalii' href='%s'>%s</a> &ndash;

cod de bare: <code>%s</code>, preț: %d RON.</p>",

URL . $cale, $prod, $cod_bare, $pret);

}

Page 138: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

procesare html: instrumente

reprezentarea HTML a datelor preluate de pe situl Web

Page 139: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/rezumat

⦑ ⦒procesări XML: de la DOM la SAX și Simple XMLinstrumente de prelucrare a documentelor HTML

Page 140: Dezvoltarea sistemelor Web - profs.info.uaic.robusaco/teach/courses/websys/presentations/web06... · ga /~ co / Dezvoltarea sistemelor Web procesarea datelor XML ⵄ DOM (Document

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

episodul viitor: servicii Web prin SOAP

sistem SOAP

codificare XML

împachetare date

sistem SOAP

decodificare XML

despachetare date

protocol de transport

protocol de transport→ →

mesaj SOAP

legare (binding)

expeditor (sender) destinatar (receiver)orice tip de date

Internet(intermediari)