Web

Technologies
XML

UNIT-3
Extensible Markup
Language
(XML)
 Contents
XML: AJAX A New Approach:
 Document type Definition  Introduction to AJAX
 XML schemas  Integrating PHP and AJAX
 Document object model
 XSLT
 DOM and SAX Approaches
 Objectiv
es
 Learning about types of DTD, DOM, SAX
 Creation of Schema in XML
 Learning about AJAX
 Integrating PHP and AJAX
 Introductio
n Language.
❖ XML stands for Extensible Markup
 XML is a markup language much like HTML.
❖ XML was designed to carry data, not to display data.
 XML tags are not predefined. You must define your own
tags.
❖ XML is designed to be self-descriptive.
❖ XML is a W3C Recommendation.
❖ XML was designed to transport and store data where
HTML was designed to display data
 Rules for writing XML
oDocument:
In XML the basic entity is an element. The elements are
used for defining the tags
o The elements typically consists of opening and closing tag
o XML is a case sensitive language. For example
< name > Vignan < /Name > is not allowed
o In XML each start tag must have matching end tag.
o The XML elements in XML must be properly nested

<name>
<firstname></firstname>
<lastname></lastname>
</name>
o A space or tab character is not allowed in the elem“&gt”ent name or in
attribute name.
o To insert “<” or “>” or “ ’ ” or “&” or “ ”” ” characters with in text
simply use “&lt”,, ”&apos”, “&amp”, “&quot” respectively.
o The syntax for writing comments in XML is similar to HTML. For
example

<!--This is a comment line -->

 Advantages of XML:
➢ XML document is human readable and we can edit in any XML
document in any text editors.
➢ The XML document is language neutral
➢ Every XML document has a tree structure, hence complex data
can be arranged
➢ systematically and can be understood in simple manner.
➢ XML files are independent of an operating system.
➢ XML is useful in exchanging data between the applications.
➢ XML document is used to extract data from data base.
Namespace in XML:
The process of creating two elements with same name is known as namespace
in XML. For example
<vehicles> Root Element

<car>
<price>200000</price> Child
<color>red</color> Elements

</car>
Container
Element
<car>
<price>300000</price>
<color>green</color>
</car>

</vehicles>
XML CSS: We can also apply styles to XML document using CSS. This can be
done as follows
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="library.css"?>
<catalog>
<book> catalog
<title>XML Bible</title> {
<author>Winston</author> font-family:arial;
</book> color:red;
<book> font-size:16pt;
<title>AI</title> }
<author>S.Russel</author> book,author
</book> {
</catalog> font-family:Arial;
color:black;
font-size:14pt;
}
 Document type
● Definition
The Document type definition is used to define the basic building blocks of
any XML document
● Using DTD we can specify the various elements types, attributes. DTD
specifies set of rules for structuring data in XML file
● Various building blocks of XML are as follows:

❏ Elements
❏ Attribute
❏ CDDATA
❏ PCDATA
Elements:
➢ The basic entity is element
➢ The elements are used for defining tags
➢ The elements consist of opening tag and closing tag

Attribute:
➢ The attributes are used to specify the values of the element
➢ These are specified with in double quotes

CDDATA:
➢ CDDATA stands for character data

PCDATA:
➢ PCDATA stands for Parsed Character Data
 Types of DTD

Internal External

❖ Internal DTD: Using an internal DTD, the code

is placed between the DOCTYPE tags

❖ External DTD: In this type, create an

external DTD file and specify the file name
in the corresponding XML document
Internal DTD

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE student [
<!ELEMENT student (name,address,marks)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT address (#PCDATA)>
<!ELEMENT marks (#PCDATA)>
]>
<student>
<name>Vignan</name>
<address>Guntur</address>
<marks>78</marks>
</student>
External DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE student SYSTEM "student.dtd">
<student>
<name>Vignan</name>
<address>Guntur</address>
<marks>78</marks>
</student>
student.dtd
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT student (name,address,marks)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT address (#PCDATA)>
<!ELEMENT marks (#PCDATA)>
 XML
❖ The XML schemas are usedSchema
to represent the structure of XML document

❖ The purpose of XML schema is to define the building blocks of an XML

document

❖ The XML schema language is called as XML Schema Definition

Language (XSD)

❖ XML schema defines elements, attributes, elements having child

elements, order of child

❖ elements, fixed and default values of elements and attributes

❖ This is an alternative of DTD
The following is an example XML document

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="student">
<xs:complexType>
<xs:sequence>
<xs:element name="name"></xs:element>
<xs:element name="address"></xs:element>
<xs:element name="marks"></xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Data Types
Various data types that can be used to specify the data types of an element are

❏ String ❏ Numeric

❏ Date ❏ Boolean

Example:
<xs:element name="lastname" type="xs:string"/>

<xs:element name="age" type="xs:integer"/>

<xs:element name="dateborn" type="xs:date"/>

String Data Type:
The string data type is used to define the element containing characters

Example
student.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="student" type="xs:string"></xs:element>
</xs:schema>
student.xml
<?xml version="1.0" encoding="UTF-8"?>
<student xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation ="student.xsd">Reehana </student>
Date Data Type:
● Date data type is used to specify the date
● The format of this date is yyyy-mm-dd denotes year, month and date

student.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="dob" type="xs:date"></xs:element>
</xs:schema>

student.xml
<?xml version="1.0" encoding="UTF-8"?>
<dob xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation ="student.xsd">1991-8-31 </dob>
Numeric Data Type:
To represent decimal or integer values Numeric Data Type is used
student.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="percentage" type="xs:decimal"></xs:element>
</xs:schema>

student.xml
<?xml version="1.0" encoding="UTF-8"?>
<percentage xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation ="student.xsd">99.9 </percentage>
 Boolean Data Type:
● For specifying true or false Boolean data type is used
student.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="flag" type="xs:boolean"></xs:element>
</xs:schema>
student.xml
<?xml version="1.0" encoding="UTF-8"?>
<flag xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation ="student.xsd">99.9 </flag>
 Differences between XML Schema and DTD
XML Schema DTD
➢ XML schema’s are suitable for large ➢ DTD’s are suitable for small
applications applications
➢ XML schema’s support for ➢ DTD’s does not support
defining the type of data
➢ XML schema has large number of built ➢ DTD’s has limited number of data
in and derived data types. types
➢ support namespace ➢ does not support namespace
 Document Object
● Model
The Document Object Model (DOM) is an application programming interface (API)
for valid HTML and well-formed XML documents.
● It defines the logical structure of documents and the way a document is accessed and
manipulated
● With the Document Object Model Programmers can build documents, navigate their
structure, and add, modify, or delete elements and content.
● Anything found in an HTML or XML document can be accessed, changed, deleted, or
added using the Document Object Model.
● It is the W3C recommendation for handling the
structured documents.
● In DOM everything from XML is treated as a
node.
The DOM is a programming API for documents. It is based on an object structure that
closely resembles the structure of the documents it models.

❖ A Simple Document Object Model, was implemented in Netscape 2.0 browser.

❖ Later on Netscape 3.0 introduced newer DOM version which was able to handle
image and other elements of browser.
❖ Then Netscape navigator 4.0 and Internet Explorer came up newer versions of
DOM both independently.
❖ But both these versions had lot of differences within them.
❖ Hence developers found it difficult to handle
documents using DOM when browser was
getting changed.
❖ Hence W3C came up to resolve these
differences and created the standard initial
DOM version in 1997.
Level Description

DOM0 This model is supported by early browsers.

This level could support JavaScript.
This was implemented in Netscape 3.0 and Internet Explorer 3.0 browsers

DOM1 This version was issued in 1998 which was focused on XHTML and XML.

DOM2 This version was issued in 2000 that could specify the style sheet.
It also support the event model and traversal with in documents.

DOM# This is current release of DOM specification published in 2004. This version could
deal with XML with DTD and Schema, document validations, document views and
formatting.
❏ Basically Document Object Model (DOM) is an application programming
interface (API) between XML and application programs
❏ The DOM contains set of interfaces for document tree node type
❏ These interfaces are similar to the Java or C++ interfaces
❏ They have objects, properties, methods which are useful for respected node type of
web document
 DOM Tree
➢ The documents in DOM are represented using a tree like structure in which
every element is represented as a node
➢ Hence the tree structure is also referred as DOM tree.

Example: Consider the following XHTML document

<html>
<head> <title>This is my web page</title> </head>
<body>
<h1>Hello vignan</h1>
<h2>Hello CSE</h2>
<h3>See you</h3>
</body>
</html>
The DOM tree for the above example document is as follows

Document

<head> <body>

<title> <h1> <h2> <h3>

“This is my web “Hello Vignan” “Hello CSE” “See you”

page”
We can describe some basic terminologies used in DOM tree as follows.
➢ Every element in the DOM tree is called node.
➢ The topmost single node in the DOM tree is called as root.
➢ Every child node must have a parent node.
➢ The bottommost nodes that have no children are called leaf nodes.
➢ The nodes that have common parents are called as siblings.
Element access in JavaScript
● There are several ways by which we can access the elements of web document.
● Consider the following document to understand the ways of accessing elements
in JavaScript

<html>
<head> <title>This is my web page</title>
</head>
<body>
<form name=“form1”>
<input type=”text” name=”myinput”/>
</form>
</body>
</html>
Method 1:
● Every document element is associated with some address.
● This address is called DOM address
● The document has the collection of forms and elements
Hence we can refer the element as
var DOM_Obj=document[0].elements[0];

But this is not a suitable method of addressing the elements.

Because if we change above script as
…….
<form name=”form1”>
<input type=”button” name=”mybutton”/>
<input type=”text” name=”myinput”/>
</form>
……
Then index reference gets changed. Hence use another
method.
Method 2:
● In this method we can make use of name attribute in order to access the
desired element.

var DOM_Obj=document.form1.myinput;
● But this may cause a validation problem because XHTML1.1 does not
support name attribute to the form element
● Hence use another method
Method 3:
● We can access the desired element from the web document using JavaScript
method getElementById
● This method is defined in DOM1

The element access can be made as follows

var DOM_Obj=document. getElementById(“myinput”);

● If the element is in particular group, that means if

there are certain elements on the form such as radio
buttons or checkboxes then they normally appear in
groups.
● Hence to access elements we make use of its index
 <form id=”Food”>
<input type=”checkbox” name=”vegetables” value=”spinatch”/> Spinatch
<input type=”checkbox” name=”vegetables” value=”FenuGreek”/> FenuGreek
<input type=”checkbox” name=”vegetables” value=”Cabbage”/> Cabbage
</form>

For getting values of these checkboxes we can write the following code.
var DOM_Obj=document. getElementById(“Food”);
for(i=0;i<Dom_Obj.vegetables.length;i++)
document.write(Dom_Obj.vegetables[i]+”<br/>”);
 XSLT
● XSL stands for Extensible Stylesheet Language, and is a style sheet
language for XML Documents
● XSL transform XML documents into other formats.
● XSLT stands for XSL Transformations
● In this we will learn how to use XSLT to transform XML documents into
other formats, like XHTML
<?xml version="1.0" encoding=“UTF-8"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
</catalog>
XSL Code: <xsl:for-each select="catalog/cd">
<xsl:stylesheet version="1.0" <tr>
xmlns:xsl="http://www.w3.org/1999/XSL/ <td><xsl:value-of select="title"/></td>
Transform"> <td><xsl:value-of select="artist”/></td>
<xsl:template match="/"> </tr>
<html> </xsl:for-each>
<body> </table>
<h2>My CD Collection</h2> </body>
<table border="1"> </html>
<tr bgcolor="#9acd32"> </xsl:template>
<th>Title</th> </xsl:stylesheet>
<th>Artist</th>
</tr>
 SAX (Simple API for
XML)from top to bottom, recognizing the tokens that make up
➢ Reads an XML document
● SAX is an event-based parser for XML documents.
a wellformed XML document.
● Unlike
➢ Tokens area processed
DOM parser, a SAX
in the sameparser
order creates noappear
that they parse tree
in the document.
➢●Reports
SAX isthe a streaming interface
application for XML
program the nature of tokens that the parser has
Applications using
encountered as they occur.SAX receive event notifications about the XML
➢document being processed
The application programanprovides
element,anand attribute,
"event" at a time
handler in sequential
that must be registered with
order starting
the parser. at the top of the document, and ending with the closing of the
➢ROOT
As theelement.
tokens are identified, callback methods in the handler are invoked with the
relevant information.
When to Use?
You should use a SAX parser when −
➢ You can process the XML document in a linear fashion from top to down.
➢ The document is not deeply nested.
➢ You are processing a very large XML document whose DOM tree would
consume too much memory
➢ Typical DOM implementations use ten bytes of memory to represent one byte
of XML.
➢ The problem to be solved involves only a part of the XML document.
➢ Data is available as soon as it is seen by the parser, so SAX works well for an
XML document that arrives over a stream.
Disadvantages of SAX
 We have no random access to an XML document since it is processed in a
forward-only manner.
 If you need to keep track of data that the parser has seen or change the order of
items, you must write the code and store the data on your own.
This XML document, when passed through a SAX parser, will generate a sequence
of events like the following:

❖ XML Element start, named DocumentElement, with an attribute param equal to

"value"
❖ XML Element start, named FirstElement
❖ XML Text node, with data equal to "&#xb6; Some Text" (note: certain white spaces
can be changed)
❖ XML Element end, named FirstElement
❖ Processing Instruction event, with the target some_pi and data
some_attr="some_value"
❖ XML Element start, named SecondElement, with an attribute
param2 equal to "something"
❖ XML Text node, with data equal to "Pre-Text"
❖ XML Element start, named Inline
❖ XML Text node, with data equal to "Inlined text"
❖ XML Element end, named Inline
❖ XML Text node, with data equal to "Post-text."
❖ XML Element end, named SecondElement
❖ XML Element end, named DocumentElement
AJAX – A New
Approach
Introduction:
● The AJAX is involved in both client and server communication
● The Perl and CGI scripts normally run at server side and process the request
obtained from the client side through browser.
● AJAX is a Asynchronous JavaScript and XML
● It is not a new programming language but it is a kind of web document which
adopts certain standards
● AJAX allows the developer to exchange the data with server and updates the
part of web document without reloading the web page.
How AJAX works?
❖ When user makes a request, the browser creates a object for the Http request
and a request is made to the server over an internet
❖ The server processes this request and sends the required data to the browser
❖ At the browser side the returned data is processed using javascript and the web
document gets updated accordingly.
Following fig illustrates this working:
Let us understand how AJAX works with the help of programming example.
<html>
<head> req.open("GET","ajax_info.txt",true);
<script> req.send();
function myfun() }
{ </script>
var req; </head>
if (window.XMLHttpRequest) <body>
{ <div id="myDiv"><h2>Let AJAX change this
req=new XMLHttpRequest(); text</h2></div>
} <button type="button" onclick="myfun()">Change
else Content</button>
{ </body>
req=new ActiveXObject("Microsoft.XMLHTTP"); </html>
}
req.onreadystatechange=function()
{
if (req.readyState==4 && req.status==200)
{
document.getElementById("myDiv").innerHTML=req.responseText;
}
}
In above sript,we have written some text which can be replaced by some another text on
button click. On button click a function MyFun is invoked. In this function

● XMLHttpRequest object is used to exchange data with a server

● The object allows the user to change/update the parts of the web page
without reloading it fully
● The modern web browsers such as IE7+,firefox,chrome have built in
XMLHttpRequest but old web browsers make use of ActiveXObject.
● When a request to a server is sent,the onreadystatechange event is triggered.
When clicks on Change Content
❖ The readyState property holds the status of the XMLHttprequest
❖ The readystate=4 means request is finished and response is ready
❖ The status=200 means “OK”
❖ The request can be sent to the server by using two functions open() and send().

❖ Asynchronous communication allows fast processing of

the data
❖ The ajax_info.txt file contains some updating text using
which our web page can be updated.
❖ The send() method sends the request to the server.
Integrating PHP and
AJAX
Integrating PHP and AJAX
We can use Ajax along with XML and PHP. In the following example we will discuss how,
HTML file along with javascript communicates with XML and PHP. It will work as follows:
➢ HTML displays the form that contains a drop down list.
➢ User can select his/her friend`s name from the dropdown list
➢ When user selects some name, a function named showNames will be triggered
➢ This function is defined in java script file.
➢ This function in java script file will send the name as a query string to some PHP file
➢ The name of the PHP file is considered as URL
➢ The PHP file makes use of DOM.It will load XML file using
DOM
➢ Using DOM object we go through each node of XML file and
retrieve the contents.
➢ These contents are then returned to the HTML using the
innerHTML
➢ Hence on browser we can get the details of the friend whose name
we have selected.
Step1:Create an HTML document for displaying the form.
AJAXDemo.html
</form>
<html>
<p>
<head>
<div id=”txtHint”><b>Friend
<script src=”testing.js”></script>
Details:</b></div>
</head>
</p>
<body>
</body>
<form>
</html>
Select a Name:
<select name=”names”
onchange=”showNames(this.value)”>
<option value=”chitra”>chitra</option>
<option value=”priyanka”>priyanka</option>
<option value=”Nalini”>Nalini</option>
</select>
Step2: The java script will be as follows. It would contain function showNames.
Testing.js:
var xmlHttp; function statechanged()
function showNames(str) {
{ if(xmlHttp.readystate==4||xmlHttp.status==200)
xmlHttp=GetxmlHttpobject(); {
if(xmlHttp==null) document.getElementBYId(“txtHint”).innerHTML=xmlHttp
{ .responseText;
alert(“Browser does not support }
HTTP Request”); }
return;
}
var url=”getInfo.php”;
url=url+”?q=”+str;
url=url+”&sid=”Math.random();
xmlHttp.onreadystatechange=state
changed;
xmlHttp.open(“GET”,url,true);
xml.Http.send(null);
}
function GetxmlHttpobject() catch(e)
{ {
var xmlHttp=null; xmlHttp=new
try ActiveXobject(“Microsoft.XMLHTTP”);
{ }
//Firefox,opera 8.0+,safari }
xmlHttp=new XMLHttpRequest(); return xmlHttp;
} }
catch(e)
{
//Internet Explorer
try
{
xmlHttp=new
ActiveXobject(“Msxml2.XMLHTTP”);
}
Step3: The PHP script that normally runs on the server side is as given below.
It will make use of DOM to load and handle the XML file.

getinfo.php $fr=($b->childNodes);
<?php for($i=0;$i<$fr->length;$i++)
$q=$_GET[“q”]; {
$xmlDoc=new DOMDocument(); //going through other elements
$xmlDoc->load(“FriendNames.xml”); if($fr->item($i)->nodeType==1)
$a=$xmlDoc->getElementsByTagName(‘name’); {
for($i=0;$i<=$a->length-1;$i++) echo(“<b>”.$fr->item($i)->nodeName.”:</b>”);
{ echo($fr->item($i)->childNodes->item(0)-
//going through elements >nodevalue);
if($a->item($i)->nodeType==1) echo(“<br/>”);
{ }
if($a->item($i)->childNodes->item(0)->nodevalue==$q) }
{ ?>
$b=($a->item($i)->parentNode);
}
}
}
Step4: The XML file which is handled by the PHP in the above step is:
FriendNames.xml
<?xml version=”1.0”?> <Info>
<Friend> <name>Raj</name>
<Info> <phone>333333333</phone>
<name>chitra</name> <email>[email protected]</email>
<phone>1111111111</phone> <hobby>photography</hobby>
<email>[email protected]</email> <Info>
<hobby>singing</hobby> </Friend>
</Info>
<Info>
<name>priyanka</name>
<phone>2222222222</phone>
<email>[email protected]</email>
<hobby>Reading</hobby>
</Info>
Step5: For getting the output we will open the HTML
file (Created in step 1) in browser window