Web Technologies
|
|
XML
Definitions:
XML stands for Extensible Markup Language. XML store and carry data
that HTML displays. Whereas HTML has no predefined tags predefined, in XML,
we can define our own tags.
Example:
Let's consider the six noble gases atoms, in group 18 of the periodic
table elements. We can define this group as an XML set of noble gas atomes:
like this: atoms.txt
The first line is used to declare XML.
The next line describes the root element or parent of the document. This root element
must be closed (</ATOMS>) at the end. Between the the two tags
(of the node element), we have child elements (<siblings NOBLEGAS>).
Each child element contains sub elements ( <NAME>, <SYMBOL>,
<CHARGE>, AND <MASS>). All shows a tree structure.
The elements can contain text content and attributes which
provide additional information about the element (here the attribute
is period and its value is "1" that must be quotted as "1" or '1' or
"e;1"e;):
<ATOMS>
-<NOBLEGAS period = "1">
<NAME>Helium</NAME>
<SYMBOL>He</SYMBOL>
<CHARGE>2</CHARGE>
<MASS>4.003</MASS>
</NOBLEGAS>
-<NOBLEGAS period = "2">
<NAME>Neon</NAME>
<SYMBOL>Ne</SYMBOL>
<CHARGE>10</CHARGE>
<MASS>20.180</MASS>
</NOBLEGAS>
</ATOMS>
Here is:
the complete atoms.xml with a stylesheet atoms.xsl
2. Some rules:
- XML tags are case sensitive.
- comments in XML is similar to that of HTML.
- <!-- This is a comment -->
- With XML, White Space is Preserved
- XML Stores New Line as LF (line feed) as in Unix
- Names can contain letters, numbers, and other characters
and cannot contain spaces. Any name can be used, no words are reserved.
- node elements can be expanded like:
-<NOBLEGAS>
<period>1</period>
<NAME>Helium</NAME>
<SYMBOL>He</SYMBOL>
<CHARGE>2</CHARGE>
<MASS>4.003</MASS>
</NOBLEGAS>
- XML Elements are extensible:
We can add elements without breaking applications.
For example, we can add identity to an element, like:
<NOBLEGAS>
<Substance id = "11">
<NAME>Helium</NAME>
<SYMBOL>He</SYMBOL>
<CHARGE>2</CHARGE>
<MASS>4.003</MASS>
</Element>
</NOBLEGAS>
The element <Substance>...</Substance> plays the role of
metadata, that is a data about data.
XML documents must conform to the rules of a
Document Type Definition (DTD), and thefore must be validated via
DOCTYPE declaration:
<!DOCTYPE ATOMS [
<!ELEMENT ATOMS (NOBLEGAS)>
<!ELEMENT NOBLEGAS (NAME,SYMBOL,CHARGE,MASS)>
<!ELEMENT NAME (#PCDATA)>
<!ELEMENT SYMBOL (#PCDATA)>
<!ELEMENT CHARGE (#PCDATA)>
<!ELEMENT MASS (#PCDATA)>
]>
3. Formating XML documents:
We can CSS to format an XML document. In this case, just
set the related file.css file and insert the following
script in the second line of the XML document:
<?xml-stylesheet type="text/css" href="file.css"?>
To correctly format an XML document, we use XSLT (eXtensible Stylesheet Language Transformations),
that is the style sheet language of XML. It is a transformation of XML document
to an XSL doucment to link to the XML document. Set in the
second line of the XML document the following:
<?xml-stylesheet type="text/xsl" href="atoms.xsl"?>
4. Manipulating XML documents:
To read and manipulate XML documents, we ned a <i>parser</i>
that it comes with duild-in in browsers. The parser load an XML document, parse it and
momorize informations in arrays.
4.1. Browser's two parsers:
Brosers (other than Microsfot's) have two parsers; To load foles and to
load text.
The parser loads an XML file (here atoms.xml) by JavaScript as follows:
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("atoms.xml");
The parser loads a text as follows:
var parser=new DOMParser();
var doc=parser.parseFromString(txt,"text/xml");
4.2. Microsoft's parser:
The first line set a empty XML document new object, the second assure that the script is
fully executed first before continuing, and in the lase line, the
parser load the related document.
The Microsoft's parser (only one)will use for a file:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("atoms.xml");
and for a text:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);
With the two different browsers cases, we have to set a JavaScript
test script every time:
<script type="text/javascript">
function testParserXML()
{
try // Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e)
{
try//I.E.
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
alert(e.message);
return;
}
}
// full exection condition
// load document
// Other JavaScript scripts
}
</script>
The other JavaScript scripts contains scripts to manipulate the
nodes of the related XML document.
4.3. Examples:
4.3. 1. Parsing an XML File:
Here is the example
with
its code source
4.3.2. Parsing an XML String (text):
Here is the example
with
its source code
5. Organizing and displaying data inside HTML documents:
Here is the example
with
its source code
6. Using HTTP Request:
An HHTP Request sends and receives informations in the
background while we are using a web page without reloading
the current page.
XMLHttpRequest is an object of JavaScript. To create as follows:
For Browsers Firefox, etc ... :
var xmlhttp=new XMLHttpRequest()
For Internet Explorer:
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
Here is the example
with
its source code
In this example, we use certain methods of HTTP Request:
responseText: Returns the response as a string (text)
send(content): Sends the request
onreadystatechange : event that fires at every state change
open(url) with parameter "GET", requesting data.
7. Other example:
Here is the example
with
its source code
|
|
|
