Web Architecture: Structured Formats (DOM, JSON/YAML)
Total Page:16
File Type:pdf, Size:1020Kb
INFO/CS 4302 Web Informaon Systems FT 2012 Week 5: Web Architecture: StructureD Formats – Part 4 (DOM, JSON/YAML) (Lecture 9) Theresa Velden Haslhofer & Velden COURSE PROJECTS Q&A Example Web Informaon System Architecture User Interface REST / Linked Data API Web Application Raw combine, (Relational) Database / Dataset(s), clean, In-memory store / refine Web API(s) File-based store RECAP XML & RelateD Technologies overview Purpose Structured Define Document Access Transform content Structure Document Document Items XML XML Schema XPath XSLT JSON RELAX NG DOM YAML DTD XSLT • A transformaon in the XSLT language is expresseD in the form of an XSL stylesheet – root element: <xsl:stylesheet> – an xml Document using the XSLT namespace, i.e. tags are in the namespace h_p://www.w3.org/1999/XSL/Transform • The body is a set of templates or rules – The ‘match’ aribute specifies an XPath of elements in source tree – BoDy of template specifies contribu6on of source elements to result tree • You neeD an XSLT processor to apply the style sheet to a source XML Document XSLT – In-class Exercise Recap • Example 1 (empty stylesheet – Default behavior) • Example 2 (output format text, local_name()) • Example 3 (pulll moDel, one template only) • Example 4 (push moDel, moDular Design) XSLT: ConDi6onal Instruc6ons • Programming languages typically proviDe ‘if- then, else’ constructs • XSLT proviDes – If-then: <xsl:If> – If-then-(elif-then)*-else: <xsl:choose> XML Source Document xsl:if xsl:if ? xsl:if <html> <boDy> <h2>Movies</h2> <h4>The Others (English 6tle)</h4> </boDy> </html> HTML Result Document xsl:choose xsl:choose <html> <boDy> <h2>Movies</h2> <h4>The Others (English 6tle)</h4> <h4>Les Autres (French 6tle)</h4> </boDy> </html> HTML Result Document xsl:choose xsl:choose <html> <boDy> <h2>Movies</h2> <h4>The Others (en.)</h4> <h4>Les Autres (fr.)</h4> </boDy> </html> HTML Result Document DOM Well-formeD XML Documents • If an xml Document is well-formed it can be transformeD Determinis6cally (parseD) to a single infoset (DOM) DOM – Document Object MoDel • API for manipulang Document tree – Language inDepenDent; implementeD in lots of languages – Suitable for XML anD other Document formats – Core no6on of a node – Using DOM for a programming language requires Defini6on of interfaces anD classes (“language binDings” that proviDe a DOM conformant API) • W3C Specificaons – Level 1: func6onality anD navigaon within a Document – Level 2: moDules anD op6ons for specific content moDels (XML, HTML, CSS) – Level 3: further content moDel facili6es (e.g. XML valiDaon hanDlers) DOM (Core) Level 1 DOM Node Objects • Root must be Document • Root chilDren: one noDe anD op6onally Processing Instruc6ons, DocumentType, Comment, Text • ChilDren of element must be either element, comment or text • A_ributes are proper6es of elements (not their chilDren), anD are not member of the DOM tree • ChilDren of aribute must be text W3C DOM NoDe Types W3C DOM NoDe Types View of DOM Architecture h_p://www.w3.org/TR/DOM-Level-3-Core/introDuc6on.html DOM Architecture anD Conformance • The Core moDule, which contains the funDamental interfaces that must be implementeD by all DOM conformant implementaons, is associateD with the feature name "Core"; • The XML moDule, which contains the interfaces that must be implementeD by all conformant XML 1.0 [XML 1.0] (anD higher) DOM implementaons, is associateD with the feature name "XML". Parsing XML Document MoDel (DOM) • Complete in-memory representaon of en6re tree h_p://Docstore.mik.ua/orelly/xml/jxml/ch05_01.htm Java, Python & DOM • JDOM – Basic navigaon func6onality • Parent • ChilD (all, specific, filtereD) • DescenDants • A_ributes (all, specific, filtereD) – Basic tree manipulaon • ADDing, replacing, removing contents anD aributes) • Text moDificaon • Maintains well-formedness • Python: h_p://Docs.python.org/library/ xml.Dom.miniDom.html Alternave Support for Parsing of XML • SAX (open source sopware) – Event Driven, sequen6al – Mostly hierarchical, no’ sibling’ concept – More memory efficient – GooD for quick, less intensive parsing that Does not require easy-to-use, clean interface h_p://Docstore.mik.ua/orelly/xml/jxml/ch05_01.htm Simple SAX Example Document Events startDocument() <?xml version=“1.0” encoDing=“UTF-8”?> startElement(“books”) startElement(“book”) <books> characters(“War anD Peace”) <book>War anD Peace</book> enDElement(“book”) </book> enDElement(“books”) enDDocument()interface Lagoze Fall 2012) JSON/YAML Document/Data Formats JSON • “JavaScript Object Nota9on (JSON) is a lightweight, text- based, language-independent data interchange format. […] JSON defines a small set of formang rules for the portable representa9on of structured data.” [RFC 4627 h_p://tools.iey.org/html/rfc4627] • popularizaon anD formal specificaon DefineD by Douglas CrockforD (senior JavaScript architect at PayPal) • JSON Homepage: hp://www.json.org/ JSON - an open standard for data interchange • text-baseD & human { readable "firstName": "Nicole", "lastName": "KiDman", "phoneNumber": [ • machine readable anD { easy to parse "type": "home", "number": "212 555-1234" }, • not a mark-up language { but 'self-Descrip6ve' "type": "fax", "number": "646-555-4567" } • not extensible (Different ]} from XML) JSON = JavaScript Object Notation • programming language inDepenDent • maps to two universal structures: 1) An unordereD collec6on of name value pairs: {"firstName": "Nicole","lastName": "KiDman"} in other languages: object, recorD, struct, Dic6onary, hash table, keyeD list, or associave array 2) An orDereD list of values: ["MonDay", "TuesDay", "WeDnesDay"] in other languages: array, vector, list, or sequence JSON Syntax • Primi6ve types: 1. Strings 2. Numbers 3. Booleans (true/false) 4. Null • StructureD Types 1. Objects 2. Array JSON Syntax a collection of string value pairs an ordered list of values hp://www.json.org/ JSON Syntax hp://www.json.org/ JSON Syntax hp://www.json.org/ JSON Syntax hp://www.json.org/ JSON Example: De-constructed { "firstName": "Julia", "lastName": "Chen", "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646-555-4567" } ]} JSON Example: De-constructed { an object with three string "firstName": "Julia", "lastName": value pairs "Chen", "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646-555-4567" } ]} JSON Example: De-constructed { an object with three string "firstName": "Julia", "lastName": value pairs "Chen", "phoneNumber": [ { "type": "home", the value of the thirD pair is "number": "212 555-1234" }, an array { "type": "fax", "number": "646-555-4567" } ]} JSON Example: De-constructed { an object with three string "firstName": "Julia", "lastName": value pairs "Chen", "phoneNumber": [ { "type": "home", the value of the thirD pair is "number": "212 555-1234" }, an array { "type": "fax", holDing two objects, each "number": "646-555-4567" } with two string value pairs ]} JSON formatting and syntax rules h_p://www.freeformaer.com/json-formaer.html Syntax rules such as: • "Objects are encapsulateD within opening anD closing brackets { } • An empty object can be representeD by { } • Arrays are encapsulateD within opening anD closing square brackets [ ] • An empty array can be representeD by [ ] • A member is representeD by a key-value pair • The key of a member shoulD be containeD in Double quotes. (JavaScript Does not require this. JavaScript anD some parsers will tolerate single- quotes) [...]" JSON to XML comparison From: "JSON: The fat free alternave to XML" h_p:// www.json.org/xml.html "JSON is a beLer data exchange format. XML is a beLer document exchange format. Use the right tool for the right job." • JSON mime type: applicaon/json • formally DefineD in RFC 4627 JSON Schema • Defines structure of JSON Data • a contract what JSON Data to proviDe for an applicaon anD how to interact with it • mime-type: applicaon/schema+json • Expired IETF Dra: h_p://tools.iey.org/html/Dra-zyp-json-schema-03 • rarely useD anD lack of tool support JSON data & JSON Schema { schema excerpt: "catalogue": [ e.g. an object has a name (the string) anD { proper6es Defining the value part of the "movie": { object that can incluDe further objects… "ID": 24, "6tle": "Star Wars EpisoDe VI:", {"name": "movie", "actors": [ "properOes":{ { "ID": 10, "ID":{ "name": "Mark Hamill", "type": "number", "birth_date": "09-25-1951" "descripon": "movie iDenfier", }, "requireD": true { "ID": 12, }, "name": "Anthony Daniels", … "birth_date": "02-21-1946" “actors”:{ } “type”: “object”, … ]}}]} } } JSON & AJAX Using the XMLHpRequest API in Javascript var my_JSON_object = {}; var h_p_request = new XMLHpRequest(); returns data in h_p_request.open("GET", url, true); JSON format h_p_request.onreadystatechange = funcon () { from server and var done = 4, ok = 200; evaluates it on if (h_p_request.readyState == done && the client side as h_p_request.status == ok) { a JavaScript my_JSON_object = JSON.pars(h_p_request.responseText); object }}; h_p_request.send(null); [source: h_p://en.wikipeDia.org/wiki/JSON#Schema] Same origin policy: the URL replying to the request must resiDe within the same DNS Domain as the server that hosts the page containing the request; neeD to use JSONP (JSON with padDing) to request objects from Different servers, see h_p://en.wikipeDia.org/wiki/JSONP Writing JSON in Python JSON result file: {"catalogue": {"movies": [{"movie": [{"6tle": "The Others"}, {"actors": [{"actor": {"name": "Nicole Mary KiDman"}}, {"actor": {"name": "Elaine CassiDy"}}, {"actor": {"name": "Christopher Eccleston"}},