1. XML/JSON/AJAX www.profburnett.com Master a Skill / Learn for Life
Session I
XML Introduction
Writing XML
XML Schema Definition (XSD)
JavaScript Object Notation (JSON)
Master a Skill / Learn for Life

2. XML Introduction
8/1/2014
Copyright © Carl M. Burnett

3. Outline Web Building Blocks XML Technologies XML is not HTML
Comparing HTML and XML
XML Benefits
XML-Based Languages
W3C and XML
XML as a Metalanguage
XML as a Markup Language
Future of XML
What is JSON?
What is JSONP?
8/1/2014
Copyright © Carl M. Burnett

4. Web Building Blocks Hypertext Stylization Interactivity Metadata
8/1/2014
Copyright © Carl M. Burnett

5. Introduction to XML XML: Extensible Markup Language
A markup language and a metalanguage
Markup language
To design ways to describe information for storage, transmission, or processing
Metalanguage
To create a formal description of another language
8/1/2014
Copyright © Carl M. Burnett

6. XMLHttpRequest Object
XML Technologies
Data Structure
Metadata
Stylization
HTML Technologies
XQuery
XPointer
XLink
XPath
XSLT
XSL-FO
XMLHttpRequest Object
DTD
XML
XML Schema
WSDL
RSS
XML-Namespaces
8/1/2014
Copyright © Carl M. Burnett

7. XML is not HTML Similarities Text-based Uses tags Uses attributes
Syntax is similar in appearance
8/1/2014
Copyright © Carl M. Burnett

8. XML is not HTML XML goal: HTML goal:
Describe data and to focus on what the data actually is
Share richly structured electronic documents over the World Wide Web
HTML goal:
Display marked up content and apply default formatting
8/1/2014
Copyright © Carl M. Burnett

9. Comparing HTML and XML HTML XML
Finite number of tags with predefined semantics
Used to display and format data
XML
Create own specific tags to meet own specific needs
Used to structure and define the information
Semantics are defined by applications that process it or by style sheets
8/1/2014
Copyright © Carl M. Burnett

10. Comparing HTML and XML documents
<p>ABC Co. owes us
<strong>$3,17.89.</strong>
This account should be monitored.</p>
HTML Document
<text>
<client>ABC Co.</client>
owes us
<invant>$3,17.89</invant>
<remark>This account should be monitored.</remark>
</text>
XML Document
8/1/2014
Copyright © Carl M. Burnett

11. XML Benefits XML removed 2 constraints from SGML and HTML
Dependence on inflexible document markup language (HTML) with predefined tags and semantics
SGML is complex and allows many powerful options
8/1/2014
Copyright © Carl M. Burnett

12. XML Benefits Data interchange Extensibility Smart searches
Provides structure for storing data in text format, which can be used as a standard format for data interchange
Extensibility
Provides the ability to develop specific and unique tags
Smart searches
Provides high-precision searching in Web environments
Granular updates
Provides faster updates
8/1/2014
Copyright © Carl M. Burnett

13. XML-Based Languages Language Description CDF
Channel Definition Format – First real world application of XML (Microsoft Developed)
CML
Chemical Markup Language – Allows for the conversion of current files in structure documents and provide precise location of information in files.
EIL
Extensible Indexing Language – Looks at the tag in a document and assigns the content between the tags in a searchable fields.
ETD-ML
Electronic Thesis & Dissertation Markup Language – Converts theses from MS Word into SGML/XML.
FlowML
XML-based format for musical notation; a format for storing audio synthesis diagrams for synthesizers.
ITML
Information Technology Markup Language – Set of specification for protocols, message formats and best practices.
8/1/2014
Copyright © Carl M. Burnett

14. XML-Based Languages Language Description MathML
Mathematical Markup Language – Methodology for describing mathematical notations.
SMIL
Synchronized Multimedia Integration Language – Designed to integrate multimedia object into a synchronized presentation.
VXML
Voice Extensible Markup Language – Allow integration with the Internet through Voice-Recognition technology.
XHTML
HTML 4.01 written as an XML application.
XSL
Extensible Stylesheet Language – The style standard for XML documents.
XSLT
Extensible Stylesheet Language Transformation – Used to transform XML documents into other types of XML documents.
8/1/2014
Copyright © Carl M. Burnett

15. W3C and XML World Wide Web Consortium (W3C)
Founded in 1994 by Tim Berners-Lee
Purpose:
To develop interoperable technologies to promote the WWW as a forum for information, commerce, communication, and collective understanding
To act as a referee among those who propose or develop standards in the rapidly changing Web universe
8/1/2014
Copyright © Carl M. Burnett

16. W3C and XML XML shall be easily implemented over the Internet
XML shall support a wide variety of applications
XML shall be compatible SGML
XML documents shall be legible to humans
8/1/2014
Copyright © Carl M. Burnett

17. W3C and XML XML document design shall be prepared quickly
XML document design shall be formal and concise
XML documents shall be easy to create
XML markup is not required to be terse
8/1/2014
Copyright © Carl M. Burnett

18. XML as a Metalanguage Create other XML-based languages
Create specific documents or files unique to the developer, organization, or industry
Create your own XML elements
8/1/2014
Copyright © Carl M. Burnett

19. XML as a Markup Language
A set of commands that tell a program how to display content
Describes a document’s logical structure
Markup indicators are called tags
8/1/2014
Copyright © Carl M. Burnett

20. Future of XML XML will be used to structure and describe Web data
Provides a facility to define tags and the structural relationship between them
HTML will be used to display and format data
XML will not replace HTML but coexist and complement HTML in many environments
8/1/2014
Copyright © Carl M. Burnett

21. Writing XML
8/1/2014
Copyright © Carl M. Burnett

22. Outline XML Rules XML Basic Components XML Tree XML Syntax Rules
XML Elements
XML Attributes
XML Comments
XML Encoding
Predefined Entities
8/1/2014
Copyright © Carl M. Burnett

23. XML Rules Platform independent Software independent
Vendor and technology-independent metalanguage
Designed to deliver structured content over the Web
8/1/2014
Copyright © Carl M. Burnett

24. XML Basic Components An element is the basic building block
Each element begins with a start tag and ends with an end tag
Attributes are specifications for elements. They appear as name-value pairs
Elements may or may not require attributes
8/1/2014
Copyright © Carl M. Burnett

25. XML Tree 8/1/2014 Copyright © 2007 - 2019 Carl M. Burnett
Root Element <bookstore>
Element <book>
Element <Title>
Attribute “lang”
Text: Everyday Italian
Element <Year>
Text: 2005
Element <Author>
Text: Giada De Laurentis
Element <Price>
Text: 30.00
Attribute
<category>
8/1/2014
Copyright © Carl M. Burnett

26. XML Tree Root element = <bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<price>29.99</price>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</bookstore>
XML Tree
Root element = <bookstore>
All <book> elements in <bookstore> document
4 children:
<title>
<author>
<year>
<price>
8/1/2014
Copyright © Carl M. Burnett

27. XML Syntax Rules XML is case-sensitive Root Element is required
All opening tags must have a corresponding closing tag, or a terminating slash on opening tag
No overlapping of tags can occur
All attribute values must be enclosed in single or double quotation marks
8/1/2014
Copyright © Carl M. Burnett

28. XML Syntax Rules An application profile
Defines XML-related languages for a specific organization or industry
Creates specific document types for XML-related languages and develops applications to handle those documents
The tagged data can be used for creation, management, and maintenance of large collections of complex information
8/1/2014
Copyright © Carl M. Burnett

29. XML Elements Root Element Child Element Nesting Elements
<$xml version=“1.0”?>
<bookstore> ………
</bookstore>
Root Element
Child Element
Nesting Elements
<$xml version=“1.0”?>
<bookstore>   <book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
<$xml version=“1.0”?>
<bookstore><title>Harry Potter</title></bookstore>
8/1/2014
Copyright © Carl M. Burnett

30. XML Attributes Same Rules as Element Names
No Two Attributes with same name
Must be in Quotes
Treat Attributes as “Metadata”
bookstore>   <book category="CHILDREN“>     <title>Harry Potter</title>     <author>J K. Rowling</author>     <year>2005</year>     <price>29.99</price>   </book> </bookstore>
8/1/2014
Copyright © Carl M. Burnett

31. XML Attributes (Metadata)
Different was to use
<note>
<date>10/01/2008</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
<note date="10/01/2008">   <to>Tove</to>   <from>Jani</from>   <heading>Reminder</heading>   <body>Don't forget me this weekend!</body> </note>
<note>
<date>
<day>10</day>
<month>01</month>
<year>2008</year>
</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
8/1/2014
Copyright © Carl M. Burnett

32. XML Comments <!-- This is a comment --> 8/1/2014
Copyright © Carl M. Burnett

33. XML Encoding <?xml version="1.0"?>
<?xml version="1.0" encoding="UTF-8"?> (8-bits) - Web
<?xml version="1.0" encoding="UTF-16"?> (16-bits)
8/1/2014
Copyright © Carl M. Burnett

34. Predefined Entities Code Type Description < less than >
greater than
&
&
ampersand 
&apos; '
apostrophe
"
"
quotation mark
8/1/2014
Copyright © Carl M. Burnett

35. XML Examples An XML CD catalog An XML plant catalog A Simple Food Menu
8/1/2014
Copyright © Carl M. Burnett

36. Student Exercise 1
1. Complete Dreamweaver Development Environment 2. Download Testing Server files and folders to your local development folder. 3. Students will upload development site to development site. 4. Students will preview in browser development files. 5. Students will upload development site to live site. 6. Students will preview in browser live files.
8/1/2014
Copyright © Carl M. Burnett

37. XML Schema Definition (XSD)
8/1/2014
Copyright © Carl M. Burnett

38. Outline XML Schema Basics XML Schema Data Types XML Schema Syntax
XML Schema Extensibility
Creating an XML Schema
Associate an XML Schema to an XML Document
Annotating an XML Schema
8/1/2014
Copyright © Carl M. Burnett

39. XML Schema Basics XML Schema defines: Elements Attributes
Child Elements
Order of Child Elements
Number of Child Elements
Whether an Element is Empty or can Include Text
Data Types for Elements and Attributes
Default and Fixed Values for Elements and Attributes
8/1/2014
Copyright © Carl M. Burnett

40. Supports Data Types Describe allowable document content
Validate the correctness of data
Work with data from a database
Define data facets (restrictions on data)
Define data patterns (data formats)
Convert data between different data types
8/1/2014
Copyright © Carl M. Burnett

41. Uses XML Syntax Don't have to learn a new language
Use your XML editor to edit your Schema files
Use your XML parser to parse your Schema files
Manipulate your Schema with the XML DOM
Transform your Schema with XSLT
8/1/2014
Copyright © Carl M. Burnett

42. Syntax Rules Must begin with the XML declaration
Must have one unique root element
Start-tags must have matching end-tags
Elements are case sensitive
Elements must be closed
Elements must be properly nested
Attribute values must be quoted
Entities must be used for special characters
8/1/2014
Copyright © Carl M. Burnett

43. XML Schemas are Extensible
Reuse your Schema in other Schemas
Create your own data types derived from the standard types
Reference multiple schemas in the same document
8/1/2014
Copyright © Carl M. Burnett

44. Creating an XML Schema
At top of document type <?xml version=“1.0”?>
Type <xs:schema to define root element.
Type Xmlns:xs=“ XMLSchema” to declare the XML schema namespace.
Type > to complete the root element tag.
Type </xs:schema> to complete the root element.
<?xml version="1.0"?>
<xs:schema Xmlns:xs= "
. . .
</xs:schema>
8/1/2014
Copyright © Carl M. Burnett

45. Associate an XML Schema to an XML Document
Inside the root element your XML document type: xmlns:xsi=“ XMLSchema”
Type xsi:noNamespaceSchemaLocation=
Type ”xsd:uri” where xsd.uri is the location of the XML Schema file.
<?xml version="1.0"?>
<wonder xmlns:xsi=" xsi:noNamespaceSchemaLocation="09-06.xsd">
<name>Colossus of Rhodes</name>
<location>Greece</location>
<height>107</height>
</wonder>
8/1/2014
Copyright © Carl M. Burnett

46. Annotating an XML Schema
You can include standard XML comments in a XML schema document.
XML Schema comments are annotations.
Annotations can be parsed.
<?xml version="1.0"?>
<xs:schema xmlns=
"
<xs:annotation>
<xs:documentation>This XML Schema will be
used to validate the set of XML documents
for the Wonders of the World
project.
</xs:documentation>
</xs:annotation>
. . .
8/1/2014
Copyright © Carl M. Burnett

47. JavaScript Object Notation (JSON)
8/1/2014
Copyright © Carl M. Burnett

48. What is JSON? JSON stands for JavaScript Object Notation
JSON is a lightweight data-interchange format
JSON is language independent *
JSON is "self-describing" and easy to understand
6/8/2019
Copyright © Profburnett.com

49. JSON Array Object Example
{ "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ] }
6/8/2019
Copyright © Profburnett.com

50. Much Unlike XML Because
JSON doesn't use end tag
JSON is shorter
JSON is quicker to read and write
JSON can use arrays
6/8/2019
Copyright © Profburnett.com

51. JSON Syntax
JSON syntax is derived from JavaScript object notation syntax:
Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays
6/8/2019
Copyright © Profburnett.com

52. JSON Data - A Name and a Value
"firstName" : "John"
JSON values can be:
A number (integer or floating point)
A string (in double quotes)
A Boolean (true or false)
An array (in square brackets)
An object (in curly braces)
null
6/8/2019
Copyright © Profburnett.com

53. JSON Objects JSON Arrays {"firstName":"John", "lastName":"Doe"} {
"employees":[     {"firstName":"John", "lastName":"Doe"},     {"firstName":"Anna", "lastName":"Smith"},     {"firstName":"Peter", "lastName":"Jones"} ] }
6/8/2019
Copyright © Profburnett.com

54. JSON Uses JavaScript Syntax{
"employees":[     {"firstName":"John", "lastName":"Doe"},     {"firstName":"Anna", "lastName":"Smith"},     {"firstName":"Peter", "lastName":"Jones"} ] }
// returns John Doe employees[0].firstName + " " + employees[0].lastName;
6/8/2019
Copyright © Profburnett.com

55. JSON HTTP Request Example
1: Create an array of objects. 2: Create a JavaScript function to display the array. 3: Create a text file 4: Read the text file with an XMLHttpRequest
6/8/2019
Copyright © Profburnett.com

56. What is JSONP? JSONP (which stands for JSON with padding)
Technique to overcome:
cross-domain restrictions imposed by browsers.
allows data to be retrieved from foreign systems.
6/8/2019
Copyright © Profburnett.com

57. How JSONP it works Function call - myResponseFunction()
It is the "P" of JSONP (the "padding" around the pure JSON, or according to some the "prefix".
myResponseFunction({"Name": "Foo", "Id": 1234, "Rank": 7});
6/8/2019
Copyright © Profburnett.com

58. How JSONP it works Server response that includes the JSONP function.
JSONP does not work with JSON-formatted results.
The JSONP function invocation gets sent back
The payload that the function receives, must be agreed-upon by the client and server.
The browser provides the name of the callback function
Named query parameter value - typically name “jsonp” or “callback”
<script type="application/javascript"
src="
</script>
6/8/2019
Copyright © Profburnett.com

59. Cross-domain requests using a proxy server
Newer browsers support CORS relax this constraint
Cooperating proxy server does not have such restrictions
Relays a browser request to a server in a separate domain
Stores the result.
Returns the JSON payload when the browser makes a second request.
The xd_arbiter.php used by Facebook's JS SDK is a popular example of this cooperating server technique.[6]
6/8/2019
Copyright © Profburnett.com

60. Security Concerns Untrusted third-party code
Callback name manipulation and Reflected File Download
Cross-site request forgery – (Exclusive use of cookies for determining if a request is authorized)
Rosetta Flash - Adobe Flash Player (Fixed 2014)
6/8/2019
Copyright © Profburnett.com

61. Student Exercise 2
1. Create a contacts XML file using data in the attached contacts PDF. 2. Create a contacts JSON file using the contacts data. 3. Students will upload development site to development site. 4. Students will preview in browser development files. 5. Students will upload development site to live site. 6. Students will preview in browser live files.
8/1/2014
Copyright © Carl M. Burnett