codetoad.com
Home||ASP|ASP.Net|C++/C#|DHTML|HTML|Java|Javascript|Perl|VB|XML||CodeToadPlus!||RAM
Search Site:



HomeXMLArticle

XML and JavaScript Tutorial

Article by: Premshree Pillai (9/3/2002)
Bookmark us now! Add to Favourites
Email a friend! Tell a friend
Summary: This tutorial shows how we can use XML and client side JavaScript. We will see how we can display the contents of a XML file using JavaScript, accessing child elements, manipulating elements etc.
Viewed: 353153 times Rating (167 votes):
4.4 out of 5
Rate this Article Read Comments Post Comments

XML and JavaScript Tutorial



XML and JavaScript

                                                                                                                            - Premshree Pillai

Introduction:
XML is a very important base on which Web Services work. XML can be used in conjunction with a lot of client side and server side languages to put it to good effect.

Let us see how we can use XML and client side JavaScript to work. We will see how we can display the contents of a XML file using JavaScript, accessing child elements, manipulating elements etc.

Browser Issues:

When it comes client side languages browser incompatibilities is a major issue. But here where we want to use XML and JavaScript, XML is the issue. Not all browsers have support for parsing XML documents. I will use IE6 to explain the codes. Browsers that do not support XML, cannot read them. When you view an XML file in such a browser it will just ignore all the tags.

Sample XML file:

Let us consider a sample XML file >>

<?xml version="1.0" ?>

<company>

<employee id="001" sex="M" age="19">Premshree Pillai</employee>

<employee id="002" sex="M" age="24">Kumar Singh</employee>

<employee id="003" sex="M" age="21">Ranjit Kapoor</employee>

<turnover>

<year id="2000">100,000</year>

<year id="2001">140,000</year>

<year id="2002">200,000</year>

</turnover>

</company>

The above XML file shows employee data and Turnover of the company (just an e.g).

Manipulating XML file data using JavaScript:

· Loading XML file: You can load a XML fie from JavaScript like this >>

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile)
{
  xmlDoc.async="false";
  xmlDoc.onreadystatechange=verify;
  xmlDoc.load(xmlFile);
  xmlObj=xmlDoc.documentElement;
}

Actually, just the last two lines of the function are enough to load the XML file. The previous two lines are written to ensure that the JavaScript functions that we may use later to manipulate the XML file data, does not perform any function on an uninitialized object. Thus the function
verify()is called.
function verify()
{
  // 0 Object is not initialized
  // 1 Loading object is loading data
  // 2 Loaded object has loaded data
  // 3 Data from object can be worked with
 
// 4 Object completely initialized
  if (xmlDoc.readyState != 4)
  {
      return false;
  }
}

Now the XML file can be loaded

loadXML('/xml_file.xml');

· Displaying contents of XML file: View the entire contents of the XML file using alert(xmlObj.xml);
The entire XML file will be displayed in an alert box as it is with proper indentation.

· Children and nodes: In the above XML file <company> is the top level tag under which all other tags come. These tags are called children. The above XML file can be represented graphically like a folder-tree. A folder-tree is shown below.



·



Thus in the above XML file the top level tag <company> has 4 children.

The numbering of children (as is usual in all languages) starts from 0 (zero).

The <turnover> tag has 3 children under it.

We can find the no of children a tag has by using the childNodes.length property. Thus the no of childen   of <company> tag (here, 4) can be found by using xmlObj.childNodes.length

The no of children of <turnover> tag (here, 3) can be found by using xmlObj.childNodes(3).childNodes.length

Here we use childNodes(3) because <turnover> is the 3rd child of <company>

· Testing for children: You can test whether a particular node child has any children using childNodes(i).hasChildNodes
Thus xmlObj.childNodes(3).hasChildNodes() will return true.
xmlObj.childNodes(2).hasChildNodes() will return false, since the <employee> tag does not have any children.

· Getting Tag Name: You can get the tag name of a child using childNodes(i).tagName. Thus xmlObj.tagName will return "company".
xmlObj.childNodes(0).tagName will return "employee".
xmlObj.childNodes(3).childNodes(0).tagName will return "year".

· Displaying content of a tag : In the XML file the content of the 1st <employee> tag is "Premshree Pillai". You can get this value using xmlObj.childNodes(0).firstChild.text
xmlObj.childNodes(2).firstChild.text
will return "Suhasini Pandita".
Similarly xmlObj.childNodes(3).childNodes(1).firstChild.text will return "140,000".

· Attributes : In the XML file, the <employee> tag has 3 attributes. An attribute can be accessed using childNodes(i).getAttribute("AttributeName"). Thus xmlObj.childNodes(0).getAttribute("id") will return "001".
xmlObj.childNodes(1).getAttribute("age") will return "24".
xmlObj.childNodes(2).getAttribute("sex") will return "F".


XML – JavaScript Example:
There are many more properties and methods available. Using these properties you can create lots of client side applications. The main advantage of using XML along with JavaScript is that editing of data becomes very easy. XML being structured, it becomes very easy to manage content. One example is a folder-tree menu. Another one is a JavaScript Ticker. You can find a XML based JavaScript Ticker at

http://www.dynamicdrive.com/dynamicindex2/xmlticker.htm

XML based JavaScript Ticker :

We will create a XML based JavaScript Ticker that can tick any number of messages. The ticker reads it's contents, i.e the ticker style, text to be displayed, the link for that particular message from a XML file. Let the XML file be ticker_items.xml

The structure of the XML document is as follows >>

TICKER

  tickerstyle

        »pause = "true" / "false" :: "true" for pause onMouseOver

        »timeout = any integer :: The delay in seconds between different messages.

        »border = any integer :: Border width of Ticker

        »bordercolor = #HexColor :: The border color of Ticker

        »background = #HexColor :: Background color of Ticker

        »width = any integer :: Ticker width

        »height = any integer :: Ticker height

          tickerlinkstyle

          mouseout

                  »font = "verdana,arial,helvetica....." :: Ticker link font

                  »color = #HexColor :: Ticker link color

                  »decoration = "none" / "underline" / "underline + overline" :: Ticker link style

                  »weight = "normal" / "bold" :: Ticker link weight

                  »size = 'any integer'pt :: Ticker link size              

           mouseover

                  »font = "verdana,arial,helvetica....." :: Ticker link font

                  »color = #HexColor :: Ticker link color

                  »decoration = "none" / "underline" / "underline + overline" :: Ticker link style

                  »weight = "normal" / "bold" :: Ticker link weight

                  »size = 'any integer'pt :: Ticker link size      

 tickeritem

                »URL = A valid URL :: Ticker link URL

                »target = "_blank" / "_top" / "_self" / 'any other valid target name' :: Ticker link target

XML Ticker Script :

<script language="JavaScript1.2">

// XML Ticker JavaScript

// (c) 2002 Premshree Pillai

// http://www.qiksearch.com

// Use freely as long as all messages are as it is

// Location of script : http://www.qiksearch.com/javascripts/xml/ticker.htm

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

function loadXML(xmlFile)

{

 xmlDoc.async="false";

 xmlDoc.onreadystatechange=verify;

 xmlDoc.load(xmlFile);

 ticker=xmlDoc.documentElement;

}

function verify()

{

 if (xmlDoc.readyState != 4)

 {

  return false;

 }

}

loadXML('/ticker_items.xml');

document.write('<style type="text\/css">');

document.write('.ticker_style{font-family:' + ticker.childNodes(1).childNodes(0).getAttribute('font') + '; font-size:' + ticker.childNodes(1).childNodes(0).getAttribute('size') + '; color:' + ticker.childNodes(1).childNodes(0).getAttribute('color') + '; font-weight:' + ticker.childNodes(1).childNodes(0).getAttribute('weight') + '; text-decoration:' + ticker.childNodes(1).childNodes(0).getAttribute('decoration') + '}');

document.write('.ticker_style:hover{font-family:' + ticker.childNodes(1).childNodes(1).getAttribute('font') + '; font-size:' + ticker.childNodes(1).childNodes(1).getAttribute('size') + '; color:' + ticker.childNodes(1).childNodes(1).getAttribute('color') + '; font-weight:' + ticker.childNodes(1).childNodes(1).getAttribute('weight') + '; text-decoration:' + ticker.childNodes(1).childNodes(1).getAttribute('decoration') + '}<br>');

document.write('</style>');

document.write('<table style="border:' + ticker.childNodes(0).getAttribute('border') + ' solid ' + ticker.childNodes(0).getAttribute('bordercolor') + '; background:' + ticker.childNodes(0).getAttribute('background') + '; width:' + ticker.childNodes(0).getAttribute('width') + '; height:' + ticker.childNodes(0).getAttribute('height') + '"><tr><td><div id="ticker_space"></div></td></tr></table>');

var item_count=2;

var timeOutVal=(ticker.childNodes(0).getAttribute('timeout'))*1000;

var original_timeOutVal=timeOutVal;

var isPauseContent;

if(ticker.childNodes(0).getAttribute('pause')=="true")

{

 isPauseContent=' onmouseover="setDelay();" onmouseout="reset();"';

}

else

{

 isPauseContent='';

}

function setTicker()

{

 document.all.ticker_space.innerHTML='<center><a href="' + ticker.childNodes(item_count).getAttribute('URL') + '" target="' + ticker.childNodes(item_count).getAttribute('target') + '" class="ticker_style"' + isPauseContent + '>' +   ticker.childNodes(item_count).firstChild.text + '</a></center>';

 if(item_count==ticker.childNodes.length-1)

 {

  item_count=2;

 }

 else

 {

  item_count++;

 }

 setTimeout("setTicker()",timeOutVal);

}

function setDelay()

{

 timeOutVal=10000000000000;

 item_count--;

}

function reset()

{

 timeOutVal=original_timeOutVal;

 setTicker();

}

setTicker();

</script>

As you can see in the source code, the ticker reads all the contents/messages to be displayed, the links for each message, the target for each URL, the ticker static style, roll-over style, border width, color, background, the delay between messages etc from the XML file. So if you want to change any parameter of the Ticker, all you have to do is make necessary changes in the XML file.

The ticker shown here is a basic ticker that rotates messages at an interval that is specified in the XML file. There are many effects you could add to the ticker like ‘Fading message’, ‘Teletypewriter’. You could add features to change the ticker speed or to list all messages at an instant.

You can find some Ticker effects at

http://www.qiksearch.com/javascripts.htm

I hope this article has helped you in some way.

© 2002 Premshree Pillai

Ø Web : http://www.qiksearch.com

Ø E-mail : qiksearch@rediffmail.com






Useful Links


CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums
Rate this article: Poor Excellent
View highlighted Comments
User Comments on 'XML and JavaScript Tutorial'
RELATED ARTICLES
XML and JavaScript Tutorial
by Premshree Pillai
This tutorial shows how we can use XML and client side JavaScript. We will see how we can display the contents of a XML file using JavaScript, accessing child elements, manipulating elements etc.
Display XML in tree format using Javascript
by Premshree Pillai
In this article, I present a XML based client-side JavaScript that reads data from an external XML file, traverses the XML data and displays the same in a tree format. I'll use the XMLDOM ActiveX object built into Microsoft Internet Explorer for the same.
Pulling Data from Other Web pages with XMLHTTP
by Jeff Anderson
Using the little known (as yet) XMLHTTP object, part of the XML DOM Model, you can pull data from other web pages for manipulation or your own purposes.
Using the XML Data Source Object
by Premshree Pillai
The XML Data Source Object (DSO) is a Microsoft ActiveX control built into Microsoft Internet Explorer 4+. Using this object, it is possible to extract content from an external XML file or XML data embedded in the HTML file into a HTML page. In this article, I'll explain how to include the XML DSO, extract content from an external XML file, extract XML data from XML data embedded in the webpage and manipulation using JavaScript
XML Converter for MySQL database
by Rustem
MySQL has no native facilities for dealing with XML. This does not mean we are left out of the XML evolution. RustemSoft XML Converter has ‘MySQL to XML’ support.
XML Ticker using XML Data Source Object (DSO)
by Premshree Pillai
This news ticker shows an example of data binding using the XML DSO which is an ActiveX control built into Microsoft Internet Explorer.
Creating An XML Newsfeed
by Jeff Anderson
A full explanation of how to take an XML newsfeed from moreover, amazon affiliates, google or any of the other current feed providers, and turn it into a display page using a little ASP.
XML Ticker
by Premshree Pillai
This is an XML based JavaScript Ticker that can tick any number of messages. The ticker works with IE only. The ticker reads it's contents, i.e the ticker style, text to be displayed, the link for that particular message from a XML file.
Amazon Lite Web Service
by kokogiak.com
A complete XML web service allowing you to offer complete Amazon searches and disaply results on your site. A fantastic introduction to XML Web Services.
Batch processing XML with XSLT 2.0
by Krunal Patel
What you need is an XML version of the directory listing. Then, you could use that XML file as the single input file to XSLT and process each file using XSLT. It would be wonderful if you could do the directory processing in XSLT directly. Unfortunately, with all the power of XSLT -- and particularly XSLT 2.0 -- the language still doesn't have directory operations.








Recent Forum Threads
Run a program both on windows and linux
VERO.SurfCAM.v2014
Schlumberger.Petrel.V2013.2
Petrel.V2013.2
Altair.HyperWorks.v12
VoluMill.v6.1
VoluMill.NEXION.6
VERO.SurfCAM.v2014
Schlumberger.Petrel.V2013.2


Recent Articles
ASP GetTempName
Decode and Encode UTF-8
ASP GetFile
ASP FolderExists
ASP FileExists
ASP OpenTextFile
ASP FilesystemObject
ASP CreateFolder
ASP CreateTextFile
Javascript Get Selected Text


Copyright codetoad.com 2001-2015