Home arrow XML arrow Page 4 - Roaming through XMLDOM: An AJAX Prerequisite

Roaming through XMLDOM: An AJAX Prerequisite

The twin tasks of the XMLHttp are handling the HTTP request, and then processing the XML response. The first one is easily done by writing the appropriate syntax for creating this object. This is what is accomplished in AJAX by invoking the new constructor for XMLHTTP object. This is but one of the objects of the XMLDOM -XML Document Object Model. In this article, we look at XMLDOM in some detail before calling the XML document in an AJAX rendition in a future article.

Author Info:
By: Jayaram Krishnaswamy
Rating: 5 stars5 stars5 stars5 stars5 stars / 19
February 20, 2006
  1. · Roaming through XMLDOM: An AJAX Prerequisite
  2. · Getting at the Innards of an XML Document
  3. · Continuing the Dissection
  4. · Manipulating the XML Document

print this article

Roaming through XMLDOM: An AJAX Prerequisite - Manipulating the XML Document
(Page 4 of 4 )

The XMLDOC object also has a large number of methods that can be invoked to create, modify, and delete nodes. The document object represents the XML file in its entirety and is also a node in the DOM. It has a large number of properties and many methods. For complete documentation the reader is referred to the W3C site. In addition to W3C there are also Microsoft extensions.

Adding a new student to the web class

Being a node, XMLDOC shares the properties of the nodes as well. A complete usage of the methods is not attempted, but a few examples are shown as related to the XML document we have been considering, the WebClass.xml file. XMLDOC object's methods will be invoked to add another student to the web class file. This is what a student node looks like. We will add another student according to this scheme.

<student id="1">
  <name>Linda Jones</name>
  <legacySkill>Access, VB5.0</legacySkill>

Looking at the node, student, we see that in order to add a new student node we need to add the name and legacySkill child nodes. Also we need to add the attribute Id and give a value to it. Finally we need to add the proper texts for the name and legacySkill nodes.

We assume that the new student will have:

id --> 7
name-->John Doe
legacySkill-->Fortran, Soroban

The code for adding the new student is as follows:

//This creates a new student:
var newElem= xdoc.createElement("student");

//This line creates the attribute to the new student:
var newAtt=newElem.setAttribute("id",7);

//The next two lines creates elements name and legacySkill
var part1=xdoc.createElement("name");
var part2=xdoc.createElement("legacyskill");

//The next two lines create the required text for the nodes:
var newText1=xdoc.createTextNode("John Doe ");
var newText2=xdoc.createTextNode("Fortran, Soroban");

//Appending the name and legacySkill to the student node
var part11=newElem.appendChild(part1);
var part21=newElem.appendChild(part2);

//Adding the text content to the name and legacySkill nodes


In this fashion you build the tree so that the node is defined according to the blueprint from the XML document. This completes the building of the student node.

Verifying the new student information

In order to verify, we again invoke the XMLDOC's properties as shown in the early part of this tutorial. In particular we will be using the following code to verify:

//We created newElem and the node's name is given by: document.write(newElem.nodeName);

//We get the following result for this line:

//We have not added the newElem to xdoc and presently the number of //nodes in xdoc are given by:
var totalnodes=xdoc.getElementsByTagName("student");

//the result of this code gives the number of student nodes in xdoc:

//We look at the attributes of the new student node:
document.write("<br>"+ newElem.attributes[0].name);
document.write("<br>"+ newElem.attributes[0].value);

//We get the following result for the above code snippet:

//We now grab the text for the entire student node:

//This snippet gives the following browser display:
John Doe Fortran, Soroban

//Now we get a reference to the last child of the xdoc before adding the //new student:
var lastnode=xdoc.lastChild;

//This is important. We add the newElem student node to the xdoc:

//We now count the number of nodes in the new document which have //the student nodes:
var totalnodes=xdoc.getElementsByTagName("student");

//The result of this in the browser display is:

This verifies that the new student has been added (we started out with 4). The file can be saved using the save (ObjTarget) method of the XMLDOC object.


Understanding and manipulating the XMLDOM objects is a prerequisite to writing successful code, whether it be for AJAX or for anything to do with XML files especially using Microsoft tools. It is the author's hope that the surgical presentation of this tutorial in dissecting the XMLDOM object will provide a guide to this understanding. XMLHTTP request is another object belonging to the XMLDOM; it is discussed in a previous tutorial and will be revisited again in discussing the responseXML method of the request object. 

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials