(XML)
eXtensible Markup Language
XML
• Introduction
• Comparison between XML and HTML
• XML Syntax
What is XML?
• eXtensible Markup Language
• Markup language for documents containing
structured information
• Defined by four specifications:
– XML, the Extensible Markup Language
– XLL, the Extensible Linking Language
– XSL, the Extensible Style Language
– XUA, the XML User Agent
XML….
• Based on Standard Generalized Markup
Language (SGML)
• Version 1.0 introduced by World Wide Web
Consortium (W3C) in 1998
• Bridge for data exchange on the Web
Comparisons
XML HTML
• Extensible set of • Fixed set of tags
tags
• Content orientated • Presentation oriented
• Standard Data • No data validation
infrastructure capabilities
• Allows multiple • Single presentation
output forms
XML Elements
• An XML element is made up of a start tag, an
end tag, and data in between.
• Example:
<director> Matthew Dunn </director>
• Example of another element with the same value:
<actor> Matthew Dunn </actor>
• XML tags are case-sensitive:
<CITY> <City> <city>
• XML can abbreviate empty elements, for example:
<married> </married> can be abbreviated to
<married/>
XML Elements (cont’d)
• An attribute is a name-value pair separated
by an equal sign (=).
• Example:
<City ZIP=“94608”> Emeryville </City>
• Attributes are used to attach additional,
secondary information to an element.
XML Documents Must Have a Root Element
• XML documents must contain one root
element that is the parent of all other
elements:
• <root>
<child>
<subchild>.....</subchild>
</child>
</root>
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!
</body>
</note>
XML Documents
• A basic XML document is an XML element that
can, but might not, include nested XML
elements.
• Example:
<?xml version="1.0" encoding=“UTF-8” ?>
<books>
<book isbn=“123”>
<title> Second Chance </title>
<author> Matthew Dunn </author>
</book>
</books>
XML Documents (cont’d)
• Guidelines:
– All elements must have an end tag.
– All elements must be cleanly nested
(overlapping elements are not allowed).
– All attribute values must be enclosed in
quotation marks.
– Each document must have a unique first
element, the root node.
Breakfast Menu
<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>Two of our famous Belgian Waffles with plenty
of real maple syrup</description>
<calories>650</calories> </food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>Light Belgian waffles covered with strawberries
and whipped cream</description>
<calories>900</calories> </food>
</breakfast_menu>
XML Data Islands
• A data island is an XML document that
exists within an HTML page.
• The <XML> element marks the beginning of
the data island, and its ID attribute provides
a name that you can use to reference the data
island.
XML Data Islands (cont’d)
• Example:
<XML ID=“XMLID”>
<customer>
<name> Mark Hanson </name>
<custID> 29085 </custID>
</customer>
</XML>
• An XML document with correct syntax is
called "Well Formed".
• An XML document validated against a DTD is
both "Well Formed" and "Valid".
Document Type Definitions (DTD)
• A DTD defines the structure and the legal
elements and attributes of an XML
document.
• An XML document may have an optional
DTD.
• DTD serves as grammar for the underlying
XML document, and it is part of XML
language.
• DTD has the form:
<!DOCTYPE name [markupdeclaration]>
DTD (cont’d)
• Consider an XML document:
<db><person><name>Alan</name>
<age>42</age>
<email>agb@usa.net </email>
</person>
<person>………</person>
……….
</db>
DTD (cont’d)
• DTD for it might be:
<!DOCTYPE db [
<!ELEMENT db (person*)>
<!ELEMENT person (name, age, email)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT email (#PCDATA)>
]>
#PCDATA means parseable character data.
Example
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!
</body>
</note>
Note.dtd
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
JSON - Introduction
JavaScript Object Notation
What is JSON?
• JSON stands for JavaScript Object Notation
• JSON is a lightweight data-interchange format
• JSON is a syntax for storing and exchanging
data.
• JSON is "self-describing" and easy to understand
• JSON is language independent, because
JSON uses JavaScript syntax, but the JSON
format is text only.
• Text can be read and used as a data format by any
programming language.
Exchanging Data
• When exchanging data between a browser and a
server, the data can only be text.
• JSON is text, and we can convert any JavaScript
object into JSON, and send JSON to the server.
• Can also convert any JSON received from the
server into JavaScript objects.
Why use JSON?
• JSON format is text only, it can easily be sent to
and from a server, and can be used as a data
format by any programming language.
• JavaScript has a built in function to convert a
string, written in JSON format, into native
JavaScript objects:
JSON.parse()
• if received data from a server, in JSON format,
use it like any other JavaScript object.
JSON syntax
• The JSON syntax is a subset of the JavaScript syntax.
JSON Syntax Rules
• 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
JSON Data
• JSON Data - A Name and a Value
• JSON data is written as name/value pairs.
• JSON names require double quotes. JavaScript
names don't.
• A name/value pair consists of a field name (in
double quotes), followed by a colon, followed
by a value:
"name":"John"
JSON Data Types
• Valid Data Types
a string
a number ---integer or
a floating point.
an object (JSON object) Invalid Datatypes
an array JSON values cannot be
a boolean one of the following data
types:
null a function
a date
undefined
Valid Datatypes
• Strings in JSON
{ "name":"John" }
• JSON Numbers
• Numbers in JSON must be an integer or a floating
point.
{ "age":30 }
• JSON Objects
{
"employee":
{ "name":"John", "age":30, "city":"New York" }
}
• JSON Arrays
{
"employees":[ "John", "Anna", "Peter" ]
}
• JSON Booleans
{ "sale":true }
• JSON null
{ "middlename":null }
JSON - Evaluates to JavaScript Objects
• The JSON format is almost identical to JavaScript
objects.
• In JSON, keys must be strings, written with double
quotes:
{ "name":"John" }
• In JavaScript, keys can be strings, numbers, or identifier
names:
{ name:"John" }
Curly braces hold objects
JSON Uses JavaScript Syntax
• With JavaScript can create an object and assign
data to it, like this:
Example
• var person = { name: "John", age: 31, city: "New
York" };
• Access a JavaScript object like this:
Example
• person.name; // returns John
OR
• person["name"];
JSON Files
• The file type for JSON files is ".json“
• The MIME type for JSON text is
"application/json"
JSON vs XML
• Both JSON and XML can be used to receive data from a web server.
• The following JSON and XML examples both define an employees
object, with an array of 3 employees:
In XML:
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>
In JSON
• {"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }
]}
Square brackets hold arrays
JSON is Like XML Because
• Both JSON and XML are "self describing"
(human readable)
• Both JSON and XML are hierarchical (values
within values)
• Both JSON and XML can be parsed and used
by lots of programming languages
• Both JSON and XML can be fetched with an
XMLHttpRequest
JSON is Unlike XML Because
• JSON doesn't use end tag
• JSON is shorter
• JSON is quicker to read and write
• JSON can use arrays
The biggest difference is:
• XML has to be parsed with an XML parser.
JSON can be parsed by a standard JavaScript
function.
JSON.parse()
• A common use of JSON is to exchange data to/from a web
server.
• When receiving data from a web server, the data is always a
string.
• Parse the data with JSON.parse(), and the data becomes a
JavaScript object.
Example - Parsing JSON
• Say, received this text from a web server:
'{ "name":"John", "age":30, "city":"New York"}'
• Use the JavaScript function JSON.parse() to convert text into a
JavaScript object:
var obj = JSON.parse('{ "name":"John", "age":30,
"city":"New York"}');
• Use the JavaScript object in page:
Example
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.name + ", " + obj.age;
</script>
