Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
COMP9321 Web Application EngineeringSemester 2, 2017
Dr. Amin BeheshtiService Oriented Computing Group, CSE, UNSW Australia
Week 4
1COMP9321, 17s2, Week 4
http://webapps.cse.unsw.edu.au/webcms2/course/index.php?cid= 2465
Extensible Markup Language (XML)
2COMP9321, 17s2, Week 4
• XML is a markup language much like HTML
Designed to display data.HTML tags are predefined.
Designed to describe data.XML tags are not predefined.
• XML:• is a W3C Recommendation• is designed to be self-descriptive• is derived from SGML (ISO 8879).• originally designed to meet the challenges of large-scale
electronic publishing.
Extensible Markup Language (XML)
3COMP9321, 17s2, Week 4
• XML separates presentation issues from the actual data.
Extensible Markup Language (XML)
4COMP9321, 17s2, Week 4
Extensible Markup Language (XML)
5COMP9321, 17s2, Week 4
• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.
• Online Book Store Example (Lec01 Revisit)
mybook.com
Buy Book?Internet
Extensible Markup Language (XML)
6COMP9321, 17s2, Week 4
• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.
mybook.com
ieee.orgAmazon.com
Buy Book?Internet
springer.com/
Extensible Markup Language (XML)
7COMP9321, 17s2, Week 4
• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.
mybook.com
ieee.org
springer.com/
Amazon.com
Buy Book?Internet
Presentation
Logic
Data
Extensible Markup Language (XML)
8COMP9321, 17s2, Week 4
• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.
mybook.com
ieee.org
springer.com/
Amazon.com
Buy Book?Internet
Presentation
Logic
Data
Extensible Markup Language (XML)
9COMP9321, 17s2, Week 4
• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.
mybook.com
ieee.org
springer.com/
Amazon.com
Buy Book?Internet
Presentation
Logic
Data
Extensible Markup Language (XML)
10COMP9321, 17s2, Week 4
• XML plays an increasingly important role in the exchange of awide variety of data on the Web and elsewhere.
Communication protocol? SOAP
mybook.com
ieee.org
springer.com/
Amazon.com
Buy Book?Internet
Presentation
Logic
Data
Simple Object Access Protocol
Google(Simple Object Access Protocol)
Why XML?
11COMP9321, 17s2, Week 4
Why XML?
12COMP9321, 17s2, Week 4
Why XML?
13COMP9321, 17s2, Week 4
Separating the Content from Presentation
14COMP9321, 17s2, Week 4
HTML was designed to display data.
XML was designed to describe data.
• CSS: Cascading Style Sheets• CSS defines how HTML elements are to be displayed• All formatting could be removed from the HTML
document, and stored in a separate CSS file.
Separating the Content from Presentation
15COMP9321, 17s2, Week 4
XML Applications
16COMP9321, 17s2, Week 4
XML Applications
17COMP9321, 17s2, Week 4
RSS : Really Simple Syndication
With RSS it is possible to distribute up-to-date web content from one web site to thousands of other web sites around the world.
• RSS is written in XML• RSS allows you to syndicate your site content• RSS defines an easy way to share and view headlines and content• RSS files can be automatically updated• RSS allows personalized views for different sites• RSS is useful for web sites that are updated frequently, like:
• e.g. News sites, Companies, and Calendars.
Without RSS, users will have to check your site daily for new updates.
XML Applications
18COMP9321, 17s2, Week 4
RSS : Really Simple Syndication
With RSS it is possible to distribute up-to-date web content from one web site to thousands of other web sites around the world.
• RSS is written in XML• RSS allows you to syndicate your site content• RSS defines an easy way to share and view headlines and content• RSS files can be automatically updated• RSS allows personalized views for different sites• RSS is useful for web sites that are updated frequently, like:
• e.g. News sites, Companies, and Calendars.
Without RSS, users will have to check your site daily for new updates.
XML is …
19COMP9321, 17s2, Week 4
Quick XML syntax
20COMP9321, 17s2, Week 4
The XML Family
21COMP9321, 17s2, Week 4
XML: a markup language used to describe information.
The XML Family
22COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM:• The Document Object Model (DOM) is an application programming interface
(API) for valid HTML and well-formed XML documents.
• DOM Defines:• the logical structure of documents;• the way a document is accessed and manipulated;
A graphical representation of the DOM of the example table
https://www.w3.org/TR/DOM-Level-2-Core/introduction.html
The XML Family
23COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM:• The Document Object Model (DOM) is an application programming interface
(API) for valid HTML and well-formed XML documents.
• The DOM is separated into 3 different parts/levels:• Core DOM - standard model for any structured document• XML DOM - standard model for XML documents
• A standard object model for XML• A standard programming interface for XML• Platform- and language-independent
• HTML DOM - standard model for HTML documents
The XML Family
24COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM:• The Document Object Model (DOM) is an application programming interface
(API) for valid HTML and well-formed XML documents.
• The DOM is separated into 3 different parts/levels:• Core DOM - standard model for any structured document• XML DOM - standard model for XML documents
• A standard object model for XML• A standard programming interface for XML• Platform- and language-independent
• HTML DOM - standard model for HTML documents
The XML Family
25COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD:• A Document Type Definition (DTD) defines the structure and the legal elements and
attributes of an XML document.• from a DTD point of view, all XML documents are made up by the following building
blocks:• Elements: <student> … </student>• Attributes: <student id=‘50001’> … </student>• Entity References: < > & " '
The XML Family
26COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD:• A Document Type Definition (DTD) defines the structure and the legal elements and
attributes of an XML document.• from a DTD point of view, all XML documents are made up by the following building
blocks:• Elements: <student> … </student>• Attributes: <student id=‘50001’> … </student>• Entity References: < > & " '
The character data inside an element must not contain certain characters with special meanings.You must escape the characters using entity references..<myTag> if x > 5 </myTag> <myTag> if x > 5 </myTag>
<myBook pub=’O’Reilly’ > Programming </myBook > <myBook pub=’O'Reilly’ > Programming</myBook>
The XML Family
27COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD:• A Document Type Definition (DTD) defines the structure and the legal elements and
attributes of an XML document.• from a DTD point of view, all XML documents are made up by the following building
blocks:• Elements: <student> … </student>• Attributes: <student id=‘50001’> … </student>• Entities: < > & " '• PCDATA (Parsed Character DATA):
• is the text that WILL be parsed by a parser.• CDATA (Character DATA)
• is the text that will NOT be parsed by a parser. • Tags inside the text will NOT be treated as markup and entities will not be
expanded.
Phonebook.xml with Internal DTD
28COMP9321, 17s2, Week 4
Phonebook.xml with External DTD. Phonebook.dtd
29COMP9321, 17s2, Week 4
CDATA Section
30COMP9321, 17s2, Week 4
Defining XML Content: Elements
31COMP9321, 17s2, Week 4
Defining XML Content: Modifiers
32COMP9321, 17s2, Week 4
Defining XML Content: Choices, Empty
33COMP9321, 17s2, Week 4
Defining XML Content: Mixed content, Any
34COMP9321, 17s2, Week 4
Defining XML Content: Creating Attributes
35COMP9321, 17s2, Week 4
Defining XML Content: Creating Attributes
36COMP9321, 17s2, Week 4
Use the #REQUIRED keyword if you don't have an option for a default value, but still want to force the attribute to be present.
Use the #IMPLIED keyword if you don't want to force the author to include an attribute, and you don't have an option for a default value.
Use the #FIXED keyword when you want an attribute to have a fixed value without allowing the author to change it. If an author includes another value, the XML parser will return an error.
Defining XML Content: Creating Attributes
37COMP9321, 17s2, Week 4
XML Custom Entities
38COMP9321, 17s2, Week 4
Parameter Entities
39COMP9321, 17s2, Week 4
The purpose of a parameter entity is to enable you to create reusable sections of replacement text.
<!ENTITY % ename "entity_value">
Example:<!ELEMENT residence (name, street, pincode, city, phone)> <!ELEMENT apartment (name, street, pincode, city, phone)> <!ELEMENT office (name, street, pincode, city, phone)> <!ELEMENT shop (name, street, pincode, city, phone)>…
<!ENTITY % area "name, street, pincode, city"> <!ENTITY % contact "phone">
<!ELEMENT residence (%area;, %contact;)> <!ELEMENT apartment (%area;, %contact;)> <!ELEMENT office (%area;, %contact;)> <!ELEMENT shop (%area;, %contact;)>
Parameter Entities
40COMP9321, 17s2, Week 4
Well-formedness and Validity of XML
41COMP9321, 17s2, Week 4
Limitations of DTD
42COMP9321, 17s2, Week 4
The XML Family
43COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD: describes the structure and content of XML documents.XML Schema:• is an XML-based alternative to DTD.• describes the structure of an XML document.• defines elements and attributes that can appear in a document• defines data types for elements and attributes• defines default and fixed values for elements and attributes• defines the child elements, their orders, etc.• XML Schemas are much more powerful than DTDs.• The XML Schema language is also referred to as XML Schema Definition (XSD).
The XML Family
44COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD: describes the structure and content of XML documents.XML Schema:• XML Schema - W3C's recommendation for replacing DTD with features such as:
• Simple and complex data types• Type derivation and inheritance• Namespace-aware element and attributes• Limits on number of appearances by an element• Combining with regular expressions for finer control over document structure
Most importantly, XML Schemas are well-formed XML documentsthemselves. But first, what is a namespace ?
XML Namespaces
45COMP9321, 17s2, Week 4
XML Namespaces (example)
46COMP9321, 17s2, Week 4
XML Namespaces
47COMP9321, 17s2, Week 4
Previous examples can now be ...
48COMP9321, 17s2, Week 4
XML Namespace Syntax
49COMP9321, 17s2, Week 4
• When using prefixes in XML, a namespace for the prefix must be defined.• The namespace can be defined by an xmlns attribute in the start tag of an element.• The namespace declaration has the following syntax:
xmlns:prefix="URI”
<table> <tr> <td>Apples</td> <td>Bananas</td>
</tr> </table>
<table> <name>African Coffee Table</name><width>80</width> <length>120</length>
</table>
<root>
<h:table xmlns:h="http://www.w3.org/TR/html4/"><h:tr><h:td>Apples</h:td><h:td>Bananas</h:td>
</h:tr></h:table>
<f:table xmlns:f="http://www.w3schools.com/furniture"><f:name>African Coffee Table</f:name><f:width>80</f:width><f:length>120</f:length>
</f:table>
</root>
• Name conflicts in XML can easily be avoided using a name prefix.
XML Namespace Syntax
50COMP9321, 17s2, Week 4
• When using prefixes in XML, a namespace for the prefix must be defined.• The namespace can be defined by an xmlns attribute in the start tag of an element.• The namespace declaration has the following syntax:
xmlns:prefix="URI”
<table> <tr> <td>Apples</td> <td>Bananas</td>
</tr> </table>
<table> <name>African Coffee Table</name><width>80</width> <length>120</length>
</table>
<root>
<h:table xmlns:h="http://www.w3.org/TR/html4/"><h:tr><h:td>Apples</h:td><h:td>Bananas</h:td>
</h:tr></h:table>
<f:table xmlns:f="http://www.w3schools.com/furniture"><f:name>African Coffee Table</f:name><f:width>80</f:width><f:length>120</f:length>
</f:table>
</root>
• Name conflicts in XML can easily be avoided using a name prefix.
<root xmlns:h = “http://www.w3.org/TR/html4/”xmlns:f = "http://www.w3c.com/furniture”>
<h:table><h:tr><h:td>Apples</h:td><h:td>Bananas</h:td>
</h:tr></h:table>
<f:table><f:name>African Coffee Table</f:name><f:width>80</f:width><f:length>120</f:length>
</f:table>
</root>
XML Schema Definition (XSD)
51COMP9321, 17s2, Week 4
• a recommendation of the World Wide Web Consortium (W3C)• specifies how to formally describe the elements in an Extensible Markup Language
(XML) document.
Simple Types
52COMP9321, 17s2, Week 4
Attributes
53COMP9321, 17s2, Week 4
Type Restrictions
54COMP9321, 17s2, Week 4
Complex Types
55COMP9321, 17s2, Week 4
Complex Types
56COMP9321, 17s2, Week 4
The XML Family
57COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD and XML Schema: describes the structure and content of XML documents.XSLT:
• XSL stands for eXtensible Stylesheet Language, and is a style sheet language for XML documents.
• CSS = Style Sheets for HTML• XSL = Style Sheets for XML
• XSL describes how the XML document should be displayed!• XSLT (XSL Transformations) a language for transforming XML documents.
The XML Family
58COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD and XML Schema: describes the structure and content of XML documents.XSLT: • a language for transforming XML documents
The XML Family
59COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD and XML Schema: describes the structure and content of XML documents.XSLT: a language for transforming XML documentsXPath:• XPath (XML Path language) is a language for finding information in an XML
document.• XPath contains a library of standard functions• XPath is a major element in XSLT• XPath is also used in XQuery, XPointer and XLink• XPath is a W3C recommendation
The XML Family
60COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD and XML Schema: describes the structure and content of XML documents.XSLT: a language for transforming XML documentsXPath:• XPath (XML Path language) is a language for finding information in an XML
document.• XPath contains a library of standard functions• XPath is a major element in XSLT• XPath is also used in XQuery, XPointer and XLink• XPath is a W3C recommendation
<?xml version="1.0" ….><comp9321_students><student><id>50001</id><name>Adam B.</name><program>8543</program><stage>1</stage>
</student><student><id>50002</id><name>Alex C.</name><program>3978</program><stage>3</stage>
</student></comp9321_students>
<?xml version="1.0" ….><comp9321_students><student><id>50001</id><name>Adam B.</name><program>8543</program><stage>1</stage>
</student><student><id>50002</id><name>Alex C.</name><program>3978</program><stage>3</stage>
</student></comp9321_students>
some XPath expressions:
/comp9321_student/student[1]• Selects the first “student” element that is the child
of the “comp9321_student” element
/comp9321_student/student[last()]• Selects the last “student” element that is the child of
the “comp9321_student” element
/comp9321_student/student[position()<3]• Selects the first two “student” element that is the
child of the “comp9321_student” element
/comp9321_student/student[stage>2]• Selects all the “student” elements of the
“comp9321_student” element that have a “stage” element with a value greater than 2.
…
some XPath expressions:
/comp9321_student/student[1]• Selects the first “student” element that is the child
of the “comp9321_student” element
/comp9321_student/student[last()]• Selects the last “student” element that is the child of
the “comp9321_student” element
/comp9321_student/student[position()<3]• Selects the first two “student” element that is the
child of the “comp9321_student” element
/comp9321_student/student[stage>2]• Selects all the “student” elements of the
“comp9321_student” element that have a “stage” element with a value greater than 2.
…
The XML Family
61COMP9321, 17s2, Week 4
XML: a markup language used to describe information.DOM: a programming interface for accessing and updating documents.DTD and XML Schema: describes the structure and content of XML documents.XSLT: a language for transforming XML documentsXPath: a query language for navigating XML documents.
XPointer: for identifying fragments of a document.XLink: generalises the concept of a hypertext link.XInclude: for merging documents.XQuery: a language for making queries across documents.RDF: a language for describing resources.
An XML document is a tree ...
62COMP9321, 17s2, Week 4
Attributes in XML tags
63COMP9321, 17s2, Week 4
Attributes in XML tags
64COMP9321, 17s2, Week 4
Parsing XML documents with Java
65COMP9321, 17s2, Week 4
Parsing XML documents with Java
66COMP9321, 17s2, Week 4
SAX and DOM as the Standard Interfaces
67COMP9321, 17s2, Week 4
Document Object Model (DOM)
68COMP9321, 17s2, Week 4
Dealing with Nodes in DOM
69COMP9321, 17s2, Week 4
An example XML here ...
70COMP9321, 17s2, Week 4
DOM for XML
71COMP9321, 17s2, Week 4
Using a DOM Parser (eg., Apache Xerces)
72COMP9321, 17s2, Week 4
Document Interface Methods
73COMP9321, 17s2, Week 4
Examples of Node Properties (XML), p.9.25
74COMP9321, 17s2, Week 4
Count/Print the number of 'book' elements
75COMP9321, 17s2, Week 4
Dealing with Nodes in DOM
76COMP9321, 17s2, Week 4
The method getNodeType() returns the number in the range 1 to 12.
More with DOM ...
77COMP9321, 17s2, Week 4
JSON(JavaScript Object Notation)
78COMP9321, 17s2, Week 4
JSON
79COMP9321, 17s2, Week 4
• JSON is a syntax for storing and exchanging data.
• JSON is an easier-to-use alternative to XML.
XML:
JSON:
JSON uses JavaScript syntax, but the JSON format is text only, just like XML.
JSON
80COMP9321, 17s2, Week 4
• JSON is a syntax for storing and exchanging data.
• JSON is an easier-to-use alternative to XML.
XML:
JSON:
JSON uses JavaScript syntax, but the JSON format is text only, just like XML.
JSON
81COMP9321, 17s2, Week 4
• The JSON format is syntactically identical to the code for creating JavaScript objects.
• Instead of using a parser (like XML does), a JavaScript program can use standard JavaScript functions to convert JSON data into native JavaScript objects.
JSON
82COMP9321, 17s2, Week 4
• XML has to be parsed with an XML parser. • JSON can be parsed by a standard JavaScript function.
Using XML :• Fetch an XML document.• Use the XML DOM to loop through
the document.• Extract values and store in variables.
Using JSON:• Fetch a JSON string.• JSON.Parse the JSON string.
http://www.slideshare.net/IbrahimAlIbrahim1/xml-vs-json-47487221
JSON
83COMP9321, 17s2, Week 4
JSON Data: "name": " value“
A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.
JSON
84COMP9321, 17s2, Week 4
JSON Data: "name": " value“
JSON Objects:An object is an unordered set of name/value pairs.An object begins with { and ends with }Each name is followed by : (colon)the name/value pairs are separated by , (comma).
{"firstName":"John", "lastName":"Doe"}
JSON
85COMP9321, 17s2, Week 4
JSON Data: "name": " value“
JSON Objects: {"firstName":"John", "lastName":"Doe"}
JSON Arrays: An array is an ordered collection of valuesAn array begins with [ and ends with ]Values are separated by , (comma).
"employees":[{"firstName":"John", "lastName":"Doe"},{"firstName":"Anna", "lastName":"Smith"},{"firstName":"Peter","lastName":"Jones"}
]
JSON
86COMP9321, 17s2, Week 4
JSON Data: "name": " value“
JSON Objects: {"firstName":"John", "lastName":"Doe"}
JSON Arrays: "employees":[
{"firstName":"John", "lastName":"Doe"},{"firstName":"Anna", "lastName":"Smith"},{"firstName":"Peter","lastName":"Jones"}
]
JSON Files: The file type for JSON files is ".json"The MIME type for JSON text is "application/json"
JSON Http Request
87COMP9321, 17s2, Week 4
A common use of JSON is to read data from a web server, and display the data in a web page.data.json
browser
JSON Http Request
88COMP9321, 17s2, Week 4
A common use of JSON is to read data from a web server, and display the data in a web page.data.json
browser
JSON Http Request
89COMP9321, 17s2, Week 4
A common use of JSON is to read data from a web server, and display the data in a web page.
Create a JavaScript function to display the array.
data.json
browser
JSON Http Request
90COMP9321, 17s2, Week 4
A common use of JSON is to read data from a web server, and display the data in a web page.
Write an XMLHttpRequest to read the file, and use myFunction() to display the array
data.json
browser
References
91COMP9321, 17s2, Week 4
• http://www.w3.org/XML/• XML in a nutshell, Chapters 9 and 10• http://www.ibm.com/developerworks/library/xml-schema/• http://www.w3schools.com/• http://www.json.org/• Some examples in these notes are originated from Dr. David Edmond from QUT, Brisbane
92COMP9321, 17s2, Week 4