var name = form.name.value,
dollars = form.dollarsamount.value,
euros = form.eurosamount.value,
productList = form.productlist;
// creates the various objects required
var dollarsPrice = new Price(dollars,”usd”),
eurosPrice = new Price(euros,”eur”),
prices = new Array(dollarsPrice,eurosPrice),
product = new Product(name,prices);
// arrays are zero-based so products.length points
// to one past the latest product
// JavaScript automatically allocates memory
var pos = products.length;
products[pos] = product;
var option = new Option(name,pos);
productList.options[productList.length] = option;
}
function deleteProduct(form)
{
var productList = form.productlist,
pos = productList.selectedIndex;
if(pos != -1)
{
var product = productList.options[pos].value;
productList.options[pos] = null;
products[product] = null;
}
}
function exportProduct(form)
{
285

var result = “<” + name;
if(attributes != “”)
result += “ “ + attributes;
result += “>”;
286
Chapter 9: Writing XML
Listing 9.6: continued
11 2429 CH09 11/12/99 1:02 PM Page 286
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
result += content;
result += “</” + name + “>\r”;
return result;
}
function escapeXML(string)
{
var result = “”,
i,
c;
for(i = 0;i < string.length;i++)
{
c = string.charAt(i);
if(c == ‘<’)
result += “&lt;”;
else if(c == ‘&’)
result += “&amp;”;
else
result += c;
}
return result;
}

return element(“price”,
“currency=\”” + this.currency + “\””,
escapeXML(this.amount));
}
Because this application does not use DOM, it works with browsers that
have no XML support (obviously, they need to support JavaScript), such as
Netscape 4. Figure 9.3 shows the result in Netscape.
A Non-DOM Data Structure
This application is radically different from the other applications intro-
duced in this chapter. Internally, the application does not use XML, but
uses its own data structure instead. In other words, it does not create
Element
objects; it creates
Product
and
Price
JavaScript objects.
In JavaScript, an object constructor is simply a function that sets the object
properties. A method is a property that is assigned a function.
288
Chapter 9: Writing XML
Listing 9.6: continued
OUTPUT
11 2429 CH09 11/12/99 1:02 PM Page 288
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 9.3: The result in Netscape
In this example, the constructor for
Product
declares two properties (
name

the
toXML()
function. It wraps the result in a
products
element:
function makeXML()
{
var xmlCode = “”;
289
Creating Documents Without DOM
EXAMPLE
11 2429 CH09 11/12/99 1:02 PM Page 289
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
var i;
for(i = 0;i < products.length;i++)
if(products[i] != null)
xmlCode += products[i].toXML();
return element(“products”,””,xmlCode);
}
Notice that this approach is recursive.
Product
implements its
toXML()
method partly by serializing the list of
Price
and wrapping it in a
product
element.
function product_toXML()
{

11 2429 CH09 11/12/99 1:02 PM Page 290
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
if(attributes != “”)
result += “ “ + attributes;
result += “>”;
result += content;
result += “</” + name + “>\r”;
return result;
}
2. escapeXML()
ensures that the angle bracket and ampersand characters
are escaped. These characters are not allowed in the text of an ele-
ment.
function escapeXML(string)
{
var result = “”,
i,
c;
for(i = 0;i < string.length;i++)
{
c = string.charAt(i);
if(c == ‘<’)
result += “&lt;”;
else if(c == ‘&’)
result += “&amp;”;
else
result += c;
}
return result;
}

XML document in an HTML form and have it sent along with the form, you
can use a JavaBean or an ActiveX control to post the XML document to the
Web server.
1. Sending the XML document in a form is the most portable approach.
Because you already create the XML document in a form, this is easy
to do. The
FORM
tag needs an
ACTION
attribute and the
INPUT
field must
be changed from
BUTTON
to
SUBMIT
. You might also want to change the
TEXTAREA
in a
HIDDEN
field so XML does not appear onscreen:
11 2429 CH09 11/12/99 1:02 PM Page 292
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Listing 9.8: HTML Form to Send the Document
<FORM NAME=”controls” ACTION=”/Dump” METHOD=”POST”>
Product name: <INPUT TYPE=”TEXT” NAME=”name”>
Price (Dollars): <INPUT TYPE=”TEXT”
NAME=”dollarsamount” SIZE=”7”>
Price (Euros): <INPUT TYPE=”TEXT”
NAME=”eurosamount” SIZE=”7”><BR>

Doing Something with the XML Documents
11 2429 CH09 11/12/99 1:02 PM Page 293
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
(Internet Explorer), a plug-in (all browsers), or a JavaBean (all browsers,
all platforms).
2. Internet Explorer 5.0 ships with XMLHTTP, an ActiveX control that
can send XML documents from JavaScript. Listing 9.9 shows how to
use XMLHTTP.
Listing 9.9: Posting the Result on a Web Site
function send()
{
var http = new ActiveXObject(“Microsoft.XMLHTTP”);
http.open(“POST”,” />http.setRequestHeader(“Content-type”,”application/xml”);
http.send(makeXML());
document.open();
document.write(http.responseText);
}
The ActiveX object has the following methods:
•
open(protocol,url,asynchronous)
connects to a
url
. Set the
protocol
to
POST
. Set
asynchronous
to
false

EXAMPLE
OUTPUT
11 2429 CH09 11/12/99 1:02 PM Page 294
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
</product>
<product><name>DTD Editor</name>
<price currency=”usd”>199.00</price>
<price currency=”eur”>190</price>
</product>
<product><name>XML Book</name>
<price currency=”usd”>19.99</price>
<price currency=”eur”>19.00</price>
</product>
<product><name>XML Training</name>
<price currency=”usd”>699.00</price>
<price currency=”eur”>666.00</price>
</product>
</products>
Saving the Document
JavaScript applications cannot access the local hard disk unless they have
been signed. Therefore, it is not common to save the XML in a file on a
browser.
However, on the server, you often want to save XML documents. If you cre-
ated the file with your own generator, you save it like any other file.
When creating a document with a Microsoft DOM parser, you use a
Microsoft-specific extension to save the document. Microsoft parser sup-
ports the
save()
function.
However, as I have just explained, this extension does not work on the

several incompatible standards.
There are essentially two solutions to this problem. Either you define sev-
eral
toXML()
functions, one for each DTD that you want to support, or you
turn to XSLT.
In most cases, I would advocate using XSLT. It is a waste of time to write
as many functions as there are DTDs. XSLT is also more flexible because
you don’t have to write code to add new DTDs or when a DTD changes (and
it happens more often than you might think).
Supporting Several DTDs with XSLT
Listings 9.12 and 9.13 show how to use XSLT to support several DTDs.
The user chooses the DTD from a list box. Unlike the previous version, this
version uses the XSL processor of Internet Explorer. It will not run on
Netscape.
TIP
If you need to support both browsers, you can replace the Internet Explorer XSL proces-
sor with LotusXSL.
LotusXSL comes with several examples that show how to use it in a browser. However,
it is not as stable as using the built-in XSL processor. If at all possible, stick to Internet
Explorer.
296
Chapter 9: Writing XML
EXAMPLE
11 2429 CH09 11/12/99 1:02 PM Page 296
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Listing 9.12: The HTML Code
<HTML>
<HEAD>
<TITLE>Price List Editor</TITLE>

<xml id=”xslt” src=”convert.xsl”></xml>
</BODY>
</HTML>
297
Writing with Flexibility in Mind
11 2429 CH09 11/12/99 1:02 PM Page 297
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Listing 9.13: The JavaScript Code
var products = new Array();
function addProduct(form)
{
// collects data from the form
var name = form.name.value,
dollars = form.dollarsamount.value,
euros = form.eurosamount.value,
productList = form.productlist;
// creates the various objects required
var dollarsPrice = new Price(dollars,”usd”),
eurosPrice = new Price(euros,”eur”),
prices = new Array(dollarsPrice,eurosPrice),
product = new Product(name,prices);
// arrays are zero-based so products.length points
// to one past the latest product
// JavaScript automatically allocates memory
var pos = products.length;
products[pos] = product;
var option = new Option(name,pos);
productList.options[productList.length] = option;
}
function deleteProduct(form)

{
var http = new ActiveXObject(“Microsoft.XMLHTTP”);
http.open(“POST”,” />http.setRequestHeader(“Content-type”,”application/xml”);
http.send(“value=” + makeXML());
document.open();
document.write(http.responseText);
}
function makeXML()
{
var xmlCode = “”;
var i;
for(i = 0;i < products.length;i++)
if(products[i] != null)
299
Writing with Flexibility in Mind
continues
11 2429 CH09 11/12/99 1:02 PM Page 299
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
xmlCode += products[i].toXML();
return element(“products”,””,xmlCode);
}
function resetAll(form,document)
{
priceList = null;
form.output.value = “”;
}
function element(name,attributes,content)
{
var result = “<” + name;
if(attributes != “”)

function Product(name,prices)
{
this.name = name;
this.prices = prices;
this.toXML = product_toXML;
}
function product_toXML()
{
var result = element(“name”,””,escapeXML(this.name)),
i;
for(i = 0;i < this.prices.length;i++)
result += this.prices[i].toXML();
return element(“product”,””,result);
}
// price object
function Price(amount,currency)
{
this.amount = amount;
this.currency = currency;
this.toXML = price_toXML;
}
function price_toXML()
{
return element(“price”,
“currency=\”” + this.currency + “\””,
this.amount);
}
301
Writing with Flexibility in Mind
11 2429 CH09 11/12/99 1:02 PM Page 301

</xsl:stylesheet>
302
Chapter 9: Writing XML
11 2429 CH09 11/12/99 1:02 PM Page 302
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figures 9.5 and 9.6 illustrate the difference between the two DTDs. Figure
9.5 is the structure created so far—it is a complex structure with several
levels of nesting. Figure 9.6, on the other hand, has a flat structure.
303
Writing with Flexibility in Mind
Figure 9.5: The default structure Figure 9.6: The new structure
Figures 9.7 and 9.8 show the difference when selecting one or the other out-
put format in the browser.
OUTPUT
Figure 9.7: Default output format Figure 9.8: New output format
Calling XSLT
The major difference between this application and the previous one is the
exportProduct()
function.
exportProduct()
calls
makeXML()
to generate the
XML document. Depending on the user choice, it may apply an XSLT style
sheet to the result.
function exportProduct(form,xml,xslt)
{
var selected = form.format.selectedIndex,
format = form.format.options[selected].value;
if(format == “default”)

objects, I create two elements:
product
and
price
.
There are two main advantages to designing a DTD that is close to the
internal data structure:
• It is easy to generate the XML document.
• The resulting document is as expressive as the internal data struc-
ture.
XSLT Versus Custom Functions
XSLT has been designed specifically to convert XML documents. It offers a
simple solution to cleanly separate the DTD from the application code. This
separation of roles offers many advantages:
• If the format changes, you don’t have to change your application, only
the style sheet.
304
Chapter 9: Writing XML
11 2429 CH09 11/12/99 1:02 PM Page 304
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.