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) www.profburnett.com Master a Skill / Learn for Life

XML Introduction 8/1/2014 Copyright © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

Writing XML 8/1/2014 Copyright © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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

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 © 2007 - 2019 Carl M. Burnett

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

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

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 © 2007 - 2019 Carl M. Burnett

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

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

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 © 2007 - 2019 Carl M. Burnett

Creating an XML Schema At top of document type <?xml version=“1.0”?> Type <xs:schema to define root element. Type Xmlns:xs=“http://www.w3c.org/2001/ 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= "http://www.w3.org/2001/XMLSchema"> . . . </xs:schema> 8/1/2014 Copyright © 2007 - 2019 Carl M. Burnett

Associate an XML Schema to an XML Document Inside the root element your XML document type: xmlns:xsi=“http://www.w3c.org/2001/ 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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="09-06.xsd"> <name>Colossus of Rhodes</name> <location>Greece</location> <height>107</height> </wonder> 8/1/2014 Copyright © 2007 - 2019 Carl M. Burnett

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= "http://www.w3.org/2001/XMLSchema"> <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 © 2007 - 2019 Carl M. Burnett

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

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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="http://server.example.com/Users/1234?callback=parseResponse"> </script> 6/8/2019 Copyright © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Carl M. Burnett