www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.

in

Unit – IV
XML (Chapter –I)
1.1 XML Basics
 XML stands for Extensible Markup Language and is a text-based markup language
derived from Standard Generalized Markup Language (SGML).
 XML was designed to store and transport data
 XML was designed to be self-descriptive
 XML is a W3C Recommendation
 XML documents are readable by both humans and machines.
 An XML parser is responsible for identifying components of XML documents (typically
files with the .xml extension) and then storing those components in a data structure for
manipulation
 An XML document can optionally reference a Document Type Definition (DTD) or
schema that defines the XML document’s structure.
 If an XML parser (validating or non validating) can process an XML document
successfully, that XML document is well-formed

There are three important characteristics of XML that make it useful in a variety of
systems and solutions:

 XML is extensible: XML allows you to create your own self-descriptive tags, or
language, that suits your application.
 XML carries the data, does not present it: XML allows you to store the data
irrespective of how it will be presented.
 XML is a public standard: XML was developed by an organization called the World
Wide Web Consortium (W3C) and is available as an open standard.

1.2 Differences between XML and HTML

XML and HTML were designed with different goals:

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

1.3 Structuring Data

 The XML document can optionally have an XML declaration. It is written as below:
<?xml version="1.0" encoding="UTF-8"?>

Where version is the XML version and encoding specifies the character
encoding used in the document
 An XML file is structured by several XML-elements, also called XML-nodes
or XML-tags.
 XML-element names are enclosed by triangular brackets < > as shown below
Syntax :
<element>....</element>
 An XML document contains text that represents its content (i.e., data) and elements
that specify its structure. XML documents delimit an element with start and end tags.
 An XML-element can contain multiple XML-elements as its children, but the children
elements must not overlap.
 An XML document can have only one root element
 An XML document with correct syntax is called "Well Formed".
General Syntax :
<root>
<child>
<subchild>.....</subchild>
</child>
</root>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

1.3.1 XML References

References usually allow you to add or include additional text or markup in an XML
document. References always begin with the symbol "&" ,which is a reserved character
and end with the symbol ";".
XML has two types of references:

Entity References: An entity reference contains a name between the start

and the end delimiters.

For example &amp; where amp is name.

Character References: A character reference refers to a specific characters,

such as the symbol for the British pound, can be inserted into your XML
document by using a character reference.

For example &#65; contains a hash mark (“#”) followed by a number. The
number always refers to the Unicode code of a character. In this case, 65 refers
to alphabet "A".

 Some characters are reserved by the XML syntax itself. Hence, they cannot be used
directly. To use them, some replacement-entities are used, which are listed below:

not allowed character replacement-entity character description

< &lt; less than

> &gt; greater than

& &amp; ampersand

' &apos; apostrophe

" &quot; quotation mark

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

1.4 XML Namespaces

In XML, element names are defined by the developer. This often results in a
conflict when trying to mix XML documents from different XML applications

This XML carries HTML table information:

<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>

This XML carries information about a table (a piece of furniture):

<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>

If these XML fragments were added together, there would be a name conflict. Both
contain a <table> element, but the elements have different content and meaning.
A user or an XML application will not know how to handle these differences

Solving the Name Conflict Using a Prefix :

Name conflicts in XML can easily be avoided using a name prefix.

This XML carries information about an HTML table, and a piece of furniture:
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

In the example above, there will be no conflict because the two <table> elements
have different names.

XML Namespaces - The xmlns Attribute

When using prefixes in XML, a namespace for the prefix must be defined.
The namespace can be defined by an xmlns attribute in the start tag of an element.
Syntax:
xmlns:prefix="URL"
<h:table xmlns:h="http://www.w3.org/TR/html/">
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

The xmlns attribute in the first <table> element gives the h: prefix a
qualified namespace.

1.5 Document Type Definitions (DTD) :

 DTD stands for Document Type Definition. It defines the legal building blocks
of an XML document. It is used to define document structure with a list of legal elements
and attributes.
 DTDs defines the structure of an XML document
 DTDs and schemas specify documents’ element types and attributes, and their
relationships to one another.
 If the XML documents are conformed to the DTD format then it is valid and it is used in
business-to-business applications where XML documents are exchanged in which they
are defined using Extended Backus-Naur Form (EBNF).
 DTD are defined in the Document with the declaration <!DOCTYPE> and each XML
document holds one DTD.

There are two types of DTDs:

1. Internal DTD
2. External DTD

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

1.5.1 Internal DTD:

 If a DTD is used only by a single XML document, it can be put directly in that
document
Syntax :
<?xml version="1.0">
<!DOCTYPE myRootElement
[
<!-- DTD content goes here -->
]>
<myRootElement>
<!-- XML content goes here -->
</myRootElement>
Example :

<!DOCTYPE students
[
<!ELEMENT students (student+)>
<!ELEMENT student (name,group,gender)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT group (#PCDATA)>
<!ELEMENT gender (#PCDATA)>
]>
<students>
<student>
<name>Raju</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
<student>
<name>Ramya</name>
<group>MSCs</group>
<gender>Female</gender>
</student>
<student>
<name>Ramu</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
</students>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

Explanation :
 The DOCTYPE declaration has an exclamation mark (!) at the start of the element
name. The DOCTYPE informs the parser that a DTD is associated with this XML
document.
 The DOCTYPE declaration is followed by body of the DTD, where you declare elements,
attributes, entities, and notations.
 Several elements are declared here that make up the vocabulary of the <name>
document. <!ELEMENT name (#PCDATA)> defines the element name to be of type
"#PCDATA". Here #PCDATA means parse-able text data.
 Finally, the declaration section of the DTD is closed using a closing bracket and a closing
angle bracket (]>).

1.5.2 External DTD:

 An external DTD (a DTD that is a separate document) is declared with a SYSTEM or a

PUBLIC command:
<!DOCTYPE myRootElement SYSTEM "Filename.dtd”>
 Use SYSTEM for external DTDs that you define yourself.
 Use PUBLIC for official, published DTDs
 External DTDs are almost always preferable to inline DTDs, since they can be used by
more than one document

Students.dtd
<!ELEMENT students (student+)>
<!ELEMENT student (name,group,gender)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT group (#PCDATA)>
<!ELEMENT gender (#PCDATA)>

Students.xml
<!DOCTYPE students SYSTEM "D:\students.dtd">
<students>
<student>
<name>Raju</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
<student>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

<name>Ramya</name>
<group>MSCs</group>
<gender>Female</gender>
</student>
<student>
<name>Ramu</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
</students>

1.6 W3C XML Schema Documents / XML Schema

 XML Schema Definition is defined as a language to describe the structure of the XML
document. It means that all the XML Standards are defined in the XSD and they are
written in XML.
 It is recommended by W3C to replace the Document Type Definition (DTD).
Element Specification:
 Elements are declared using an element named xs:element with an attribute that
gives the name of the element being defined.
 Element declarations can be one of two sorts.
Simple Type : Content of these elements can be text only.
Example :
<xs:element type="xs:string" name="name"/>
<xs:element type="xs:decimal" name="price"/>
The values xs:string and xs:decimal are two of the 44 simple types predefined in the
XML Schema language.

Complex Type :
Element content can contain other elements or the element can have attributes (or both).
Syntax :
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="root element name">
<xs:complexType>
<xs:sequence>
<!-- Content goes here-->
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

The element xs:sequence is one of several ways to combine elements in the content.
Other xs:element Attributes
An xs:element element may also have attributes that specify the number of
occurrences of the element at this position in the sequence.
minOccurs="0" // default = 1
maxOccurs="5" // default = maximum(1, minOccurs)
maxOccurs="unbounded"

Example :

STUDENT.XML
<students>
<student>
<name>Raju</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
<student>
<name>Ramya</name>
<group>MSCs</group>
<gender>Female</gender>
</student>
<student>
<name>Ramu</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
</students>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="students">
<xs:complexType>
<xs:sequence>
<xs:element name="student" maxOccurs="unbounded"
minOccurs="0">
<xs:complexType>
<xs:sequence>
<xs:element type="xs:string" name="name"/>
<xs:element type="xs:string" name="group"/>
<xs:element type="xs:string" name="gender"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

1.7 XML Vocabularies

XML vocabulary is used to define

 Some of the xml vocabularies are

 element and attribute names
 element content
 Semantics of elements and attributes

Some of the XML vocabularies are XHTML, RSS, XSL, DTD, and Schema

1.7.1 MathML
 MathML markup describes mathematical expressions for display. MathML is divided
into two types of markup—content markup and presentation markup.
 Content MathML allows programmers to write mathematical notation specific to
different areas of mathematics
 Presentation MathML is directed toward formatting and displaying mathematical
notation. We focus on Presentation MathML in the MathML examples.
 MathML files end with the .mml filename extension.

Basic elements :
MathML most basic elements are mrow, mi, mo and mn.

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

Example :
𝑥 + 𝑦 = 2 is encoded in MathML as:

<math xmlns=http://www.w3.org/1998/Math/MathML >

<mrow>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>=</mo>
<mn>2</mn>
</mrow>

The namespace of all MathML elements is "http://www.w3.org/1998/Math/MathML". Specifying

such namespace is mandatory

mrow :Use this element to group any number of subexpressions horizontally.

mi :Use this element to specify an identifier, that is, the name of a variable, a
constant, a function, etc.
mo : Use this element to specify an operator (e.g. '+'), a fence (e.g. '{') or a separator (e.g. ',').

mn :Use this element to specify a numeric literal.

 MathML has two elements allowing to specify radicals: msqrt and mroot
 Subscripts and superscripts elements are: msub , msup and msubsup

3
Example: √𝑥 Example: √𝑥 + 𝑦

<mroot> <msqrt>
<mi>x</mi> <mi>x</mi>
<mn>3</mn> <mo>+</mo>
</mroot> <mi>y</mi>
</msqrt>

Example: 𝑥𝑖 Example: 𝑥 𝑖

<msub> <msup>
<mi>x</mi> <mi>x</mi>
<mi>i</mi> <mi>i</mi>
</msub> </msub>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

1.8 The XML DOM

The DOM defines a standard for accessing and manipulating documents:
All XML elements can be accessed through the XML DOM.
The XML DOM is:
 A standard object model for XML
 A standard programming interface for XML
 Platform- and language-independent
 A W3C standard

In other words: The XML DOM is a standard for how to get, change, add, or delete XML
elements.

Programming Interface

The DOM models XML as a set of node objects. The nodes can be accessed with JavaScript or
other programming languages.
The programming interface to the DOM is defined by a set standard properties and methods.

Properties are often referred to as something that is (i.e. nodename is "book").

Methods are often referred to as something that is done (i.e. delete "book").

XML DOM Properties

These are some typical DOM properties:

 x.nodeName - the name of x
 x.nodeValue - the value of x
 x.parentNode - the parent node of x
 x.childNodes - the child nodes of x
 x.attributes - the attributes nodes of x

Note: In the list above, x is a node object.

XML DOM Methods

 x.getElementsByTagName(name) - get all elements with a specified tag name

 x.appendChild(node) - insert a child node to x
 x.removeChild(node) - remove a child node from x

Note: In the list above, x is a node object.

DOM Example:

<html>
<head>
<title> XML DOM </title>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

<script>
function myfun()
{
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>Java</title>" +
"<author>James</author>" +
"<year>1991</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue;
}
</script>
<body>
<p id="demo">this is paragraph text</p>
<button type="button" onclick="myfun()">click me</button>
</body>
</html>
Output :

1.9 XSLT

 XSL (EXtensible Stylesheet Language) is a styling language for XML.

 XSLT stands for XSL Transformations. CSS = Style Sheets for HTML
What is XSLT?
 XSLT stands for XSL Transformations
 XSLT is the most important part of XSL
 XSLT transforms an XML

 XSLT is a W3C Recommendation

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

Example: (example.xml)

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="example.xsl"?>
<Article>
<Title>My Article</Title>
<Authors>
<Author>Mr. Santhosh</Author>
<Author>Mr. Chary</Author>
</Authors>
<Body>This is my article text.</Body>
</Article>

Example: (example.xsl)

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="text"/>

<xsl:template match="/">
Article - <xsl:value-of select="/Article/Title"/>
Authors: <xsl:apply-templates
select="/Article/Authors/Author"/>
</xsl:template>

<xsl:template match="Author">
- <xsl:value-of select="." />
</xsl:template>

</xsl:stylesheet>

Output :
Article - My Article
Authors:
- Mr. Santhosh
- Mr. Chary

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

(Chapter –II)
Ajax-Enabled Rich Internet Applications
2.1 Introduction :
 Ajax acronym for Asynchronous JavaScript and XML.
 Ajax is a Client side web technique.
 JavaScript with AJAX you can able to make background server calls for fetching
addition data, Updating some portion in web page without refreshing the whole
page.
 Using AJAX you can create better, faster, and more user-friendly web applications.
 Ajax is based on JavaScript, CSS, HTML and XML etc. So you can easily learn.
 Ajax behaviour and works is like a desktop application. So Ajax use for creating a
rich web application.
2.2 History :
 The term Ajax was coined by Jesse James Garrett of Adaptive Path in February 2005,
when he was presenting the previously unnamed technology to a client
 All of the technologies involved in Ajax (XHTML, JavaScript, CSS, dynamic HTML, the
DOM and XML) have existed for many years.
 In 1998, Microsoft introduced the XMLHttpRequest object to create and manage
asynchronous requests and responses.
 Popular applications like Flickr, Google’s Gmail and Google Maps use the
XMLHttpRequest object to update pages dynamically
 Ajax has quickly become one of the hottest technologies in web development, as it
enables web top applications to challenge the dominance of established desktop
applications.
2.3 Traditional web applications Vs Ajax Applications:
 In traditional web applications, the user fills in the form’s fields, then submits the form.
The browser generates a request to the server, which receives the request and
processes it.
 The server generates and sends a response containing the exact page that the browser
will render, which causes the browser to load the new page and temporarily makes the
browser window blank.
 The client waits for the server to respond and reloads the entire page with the data
from the response.
 In an Ajax application, when the user interacts with a page, the client creates an
XMLHttpRequest object to manage a request.
 The XMLHttpRequest object sends the request to and awaits the response from the
server. The requests are asynchronous, allowing the user to continue interacting with
the application while the server processes the request concurrently.

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

2.4 RIAs with AJAX:

 A classic XHTML registration form sends all of the data to be validated to the server
when the user clicks the Register button. While the server is validating the data, the user
cannot interact with the page.
 The server finds invalid data, generates a new page identifying the errors in the form
and sends it back to the client—which renders the page in the browser. Once the user
fixes the errors and clicks the Register button, the cycle repeats until no errors are
found, then the data is stored on the server. The entire page reloads every time the user
submits invalid data.

 Ajax-enabled forms are more interactive. Entries are validated dynamically as the user
enters data into the fields. If a problem is found, the server sends an error message that
is asynchronously displayed to inform the user of the problem.
 Sending each entry asynchronously allows the user to address invalid entries quickly,
rather than making edits and resubmitting the entire form repeatedly until all entries
are valid.
 Asynchronous requests could also be used to fill some fields based on previous fields’
values.

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

2.5 Ajax example using XMLHttpRequest object

 The XMLHttpRequest object can be used to exchange data with a server behind the
scenes. This means that it is possible to update parts of a web page, without reloading
the whole page.
Create an XMLHttpRequest Object
 All modern browsers (Chrome, Firefox, Edge (and IE7+), Safari, Opera) have a built-in
XMLHttpRequest object

Syntax :
variable = new XMLHttpRequest();
Example :
var xhttp = new XMLHttpRequest();
Example Program
<!DOCTYPE html>
<html>
<body>
<h2>Using the XMLHttpRequest Object</h2>
<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>
<script>
function loadXMLDoc()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "xmlhttp_info.txt", true);
xhttp.send();
}
</script>

</body>
</html>

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

Example Explained
 The onreadystatechange property specifies a function to be executed every time the
status of the XMLHttpRequest object changes:
 When readyState property is 4 and the status property is 200, the response is ready:
 The responseText property returns the server response as a text string.
 open() initializes a newly-created request, or re-initializes an existing one.
 send() sends the request to the server.

2.6 Using XML and the DOM

 When passing structured data between the server and the client, Ajax applications
often use XML because it consumes little bandwidth and is easy to parse.
 When the XMLHttpRequest object receives XML data, the XMLHttpRequest object
parses and stores the data as a DOM object in the responseXML property.
 The XMLHttpRequest object’s responseXML property contains the XML returned by
the server.
 DOM method createElement creates an XHTML element of the specified type.
 DOM method setAttribute adds or changes an attribute of an XHTML element.
 DOM method appendChild inserts one XHTML element into another.
 The innerHTML property of a DOM element can be used to obtain or change the
XHTML that is displayed in a particular element.

2.7 Dojo Toolkit

 The Dojo Toolkit is a powerful open source JavaScript library that can be used to
create rich and varied user interfaces running within a browser.
 Dojo is a JavaScript framework targeting many needs of large-scale client-side web
development.
 Dojo is completely open-source. The entire toolkit can be downloaded as a ZIP and is
also hosted on the Google CDN. The toolkit includes about three thousand JavaScript
modules, in addition to images and other resources.
 Dojo reduces asynchronous request handling to a single function call.
 Dojo provides cross-browser DOM functions that simplify partial page updates. It also
provides event handling and rich GUI controls.
 To install Dojo, download the latest release from www.Dojotoolkit.org/downloads to
your hard drive. Extract the files from the archive file you downloaded to your web
development directory or web server.

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com

 www.android.universityupdates.in | www.universityupdates.in | www.ios.universityupdates.in

 To include the Dojo.js script file in your web application, place the following script
in the head element of your XHTML document :

<script type = "text/javascript" src = "path/Dojo.js">

where path is the relative or complete path to the Dojo toolkit’s files.

 Dojo is organized in packages of related functionality

 The dojo.require method is used to include specific Dojo packages
 The dojo.io package functions communicate with the server
 The dojo.event package simplifies event handling
 the dojo.widget package provides rich GUI controls
 The dojo.dom package contains additional DOM functions that are portable across
many different browsers.

www.android.previousquestionpapers.com | www.previousquestionpapers.com | www.ios.previousquestionpapers.com