Editing XML Documents with Internet Explorer
You can alter the contents of an XML document in Internet Explorer. To do this, you use methods such s createElement, insertBefore, createTextNode, and appendChild.
As an example, I'll alter the document meetings.xml by inserting a new element, <MEETING_CHAIR>, like this:
<?xml version="1.0"?>
<MEETINGS>
<MEETING TYPE="informal">
<MEETING_CHAIR>Ted Bond</MEETING_CHAIR>
<MEETING_TITLE>XML In The Real World</MEETING_TITLE>
<MEETING_NUMBER>2079</MEETING_NUMBER>
<SUBJECT>XML</SUBJECT>
<DATE>6/1/2002</DATE>
<PEOPLE>
<PERSON ATTENDANCE="present">
<FIRST_NAME>Edward</FIRST_NAME>
<LAST_NAME>Samson</LAST_NAME>
</PERSON>
.
.
.
I begin by creating the new node, corresponding to the <MEETING_CHAIR> element, and inserting it into the document with the insertBefore method:
<HTML>
<HEAD>
<XML ID="meetingsXML" SRC="meetings.xml"></XML>
<SCRIPT LANGUAGE="JavaScript">
<!—
function alterDocument()
{
var xmldoc, rootNode, meetingsNode, meetingNode, createdNode,
createdTextNode
xmldoc = document.all.meetingsXML
rootNode = xmldoc.documentElement
meetingsNode = rootNode.firstChild
meetingNode = meetingsNode.firstChild
createdNode = xmldoc.createElement("MEETING_CHAIR")
createdNode = meetingsNode.insertBefore(createdNode, meetingNode)
.
.
.
Now I will create the text node inside this new element. The text node will hold the text "Ted Bond", and I'll create it with the createTextNode method and append it to the <MEETING_CHAIR> element with the appendChild method:
<HTML>
<HEAD>
<XML ID="meetingsXML" SRC="meetings.xml"></XML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function alterDocument()
{
var xmldoc, rootNode, meetingsNode, meetingNode, createdNode,
createdTextNode
xmldoc = document.all.meetingsXML
rootNode = xmldoc.documentElement
meetingsNode = rootNode.firstChild
meetingNode = meetingsNode.firstChild
createdNode = xmldoc.createElement("MEETING_CHAIR")
createdNode = meetingsNode.insertBefore(createdNode,meetingNode)
createdTextNode = xmldoc.createTextNode("Ted Bond")
createdNode.appendChild(createdTextNode)
.
.
.
Now I've altered the document—but at this point, it exists only inside the xmldoc object. How do I display it in the browser? The DOMDocument object actually has a save method that enables you to save the document to a new file like this: xmldoc.save("new.xml"). However, you can't use that method without changing the security settings in Internet Explorer—by default, browsers aren't supposed to be capable of writing files on the host machine.
I'll take a different approach. In this case, I'll store the XML document's text in a hidden control in an HTML form (a hidden control simply holds text invisible to the user), and send the data in that form to a server-side Active Server Pages (ASP) script. That script will just echo the document back to the browser, which, in turn, will display it. Here's the ASP script, echo.asp, where I set the MIME type of this document to "text/xml", add an <?xml?> processing instruction, and echo the XML data back to Internet Explorer. (ASP scripts such as this one are beyond the scope of this book, but we'll take a brief look at them in Chapter 20, "WML, ASP, JSP, Servlets, and Perl.")
<%@ LANGUAGE="VBSCRIPT" %>
<%
Response.ContentType = "text/xml"
Response.Write "<?xml version=" & Chr(34) &
"1.0" & Chr(34) & "?>" & Chr(13) & Chr(10)
Response.Write Request("data")
%>
I have an ASP server on my host machine, so the URI that I'll send the XML document to is http://default/db/echo.asp. I do that by using the HTML form's submit method (which works exactly as if the user had clicked a Submit button in the form) after loading the XML document into the page's hidden control:
<HTML>
<HEAD>
<XML ID="meetingsXML" SRC="meetings.xml"></XML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function alterDocument()
{
var xmldoc, rootNode, meetingsNode, meetingNode, createdNode,
createdTextNode
xmldoc = document.all.meetingsXML
rootNode = xmldoc.documentElement
meetingsNode = rootNode.firstChild
meetingNode = meetingsNode.firstChild
createdNode = xmldoc.createElement("MEETING_CHAIR")
createdNode = meetingsNode.insertBefore(createdNode, meetingNode)
createdTextNode = xmldoc.createTextNode("Ted Bond")
createdNode.appendChild(createdTextNode)
document.all.data.value = meetingsXML.documentElement.xml
document.form1.submit()
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM NAME="form1" ACTION="http://default/db/echo.asp" METHOD="POST">
<INPUT TYPE="HIDDEN" NAME="data">
<INPUT TYPE="BUTTON" VALUE="Alter the document" onclick="alterDocument()">
</FORM>
</CENTER>
</BODY>
</HTML>
Now when the user clicks the button with the caption Alter the document, the code in this page alters the XML document and sends it to the server. The ASP script on the server echoes the XML document back to the browser, which displays it, as you see in Figure 7.11. You can see the new <MEETING_CHAIR> element in that figure.
We've put JavaScript to work in this chapter, parsing and accessing XML documents. In the next chapter, I'm going to put JavaScript to work treating XML data as database objects.