Scribd
Upload
89 views

Extensible Markup Language

XML is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. It is more flexible than HTML as it allows users to define their own tags. XML documents must have one root element and include start and end tags. JSON is a lightweight data format that is used to transmit data objects between a server and web application. It is easy for humans to read and write and for machines to parse and generate. Both XML and JSON can be used to exchange hierarchical data but JSON has a simpler syntax and is easier to parse.

Uploaded by

Sonam Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
89 views

Extensible Markup Language

XML is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. It is more flexible than HTML as it allows users to define their own tags. XML documents must have one root element and include start and end tags. JSON is a lightweight data format that is used to transmit data objects between a server and web application. It is easy for humans to read and write and for machines to parse and generate. Both XML and JSON can be used to exchange hierarchical data but JSON has a simpler syntax and is easier to parse.

Uploaded by

Sonam Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

(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>[email protected] </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>

You might also like