XML in Internet Explorer 5
The support for XML in Internet Explorer 5 is fairly substantial. Here’s an
overview:
• Direct viewing of XML—The Microsoft XML implementation lets users view XML directly. You can also view XML using XSL or CSS in Internet Explorer.
• Extensible Stylesheet Language (XSL) support—The Microsoft XSL processor, which is based on the latest W3C Working Draft, allows developers to apply style sheets to XML data and to display the data in a dynamic and flexible way that can be customized.
• High-performance, validating XML engine—The Internet Explorer’s XML engine has been enhanced. It fully supports W3C XML 1 and XML namespaces, which let you qualify element names uniquely on the Web and thus avoid conflicts between elements with the same name.
• XML Document Object Model (DOM)—The XML DOM is a standard object application programming interface that gives developers control of XML document content, structure, and formats. The Microsoft XML implementation includes support for the W3C XML DOM recommendation and is accessible from Web page scripts, Visual Basic, C++, and other languages.
• XML schemas—Schemas define the rules of an XML document, including element names and data types, which elements can appear in combination, and which attributes are available for each element.
At last, it’s time to start working with the actual data in an XML document.
Loading XML Documents
To work with an XML document in Internet Explorer 5, you can load it in two ways. To show both ways in action, I’ll use the XML document, school.xml, which records a school class on XML, including the names of students in the class:
<?xml version="1.0"?>
<SCHOOL>
<CLASS type="seminar">
<CLASS_TITLE>XML In Theory And Practice</CLASS_TITLE>
<CLASS_NUMBER>10.306</CLASS_NUMBER>
<SUBJECT>XML</SUBJECT>
<START_DATE>1/1/2001</START_DATE>
<STUDENTS>
<STUDENT status="attending">
<FIRST_NAME>Mark</FIRST_NAME>
<LAST_NAME>Swansburg</LAST_NAME>
</STUDENT>
<STUDENT status="withdrawn">
<FIRST_NAME>Thomas</FIRST_NAME>
<LAST_NAME>Preston</LAST_NAME>
</STUDENT>
</STUDENTS>
</CLASS>
</SCHOOL>
The first way of working with school.xml is to load it in with the Microsoft.
XMLDOM object, creating a new ActiveX object. To see how this works, I’ll read in school.xml and retrieve the name of the second student. After creating a new ActiveX object, I use the load method to load in school.xml with JavaScript:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Finding Element Values in an XML Document
</title>
<script type="text/javascript" language="javascript">
function getStudentData()
{
var xmldoc;
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.load("school.xml");
.
.
.
}
</head>
</html>
Now I get the root element of the XML document (which contains all the other elements), using the documentElement property of this new object. I’m now free to navigate around the XML document by using the firstChild, nextChild, previousChild, and lastChild methods, which let you access the child elements of an element, and the firstSibling, nextSibling, previousSibling, and lastSibling methods, which let you access elements on the same level. To get the root element of the XML document, you start with the documentElement method; then navigate to the second student element and create objects corresponding to the student’s first and last names:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Finding Element Values in an XML Document
</title>
<script type="text/javascript" language="javascript">
function getStudentData()
{
var xmldoc;
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.load("school.xml");
nodeSchool = xmldoc.documentElement;
nodeClass = nodeSchool.firstChild;
nodeStudents = nodeClass.lastChild;
nodeStudent = nodeStudents.lastChild;
nodeFirstName = nodeStudent.firstChild;
nodeLastName = nodeFirstName.nextSibling;
.
.
.
</head>
</html>
To recover the data from the XML document—that is, the content of an element—you use the nodeValue property. Here’s how I retrieve the name of the second student in school.xml and display it in a <DIV> element in the document’s body:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Finding Element Values in an XML Document
</title>
<script type="text/javascript" language="javascript">
function getStudentData()
{
var xmldoc;
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.load("school.xml");
nodeSchool = xmldoc.documentElement;
nodeClass = nodeSchool.firstChild;
nodeStudents = nodeClass.lastChild;
nodeStudent = nodeStudents.lastChild;
nodeFirstName = nodeStudent.firstChild;
nodeLastName = nodeFirstName.nextSibling;
outputMessage = "Name: " +
nodeFirstName.firstChild.nodeValue + ' '
+ nodeLastName.firstChild.nodeValue;
message.innerHTML=outputMessage;
}
</script>
</head>
<body>
<center>
<h1>
Finding Element Values in an XML Document
</h1>
<div id="message"></div>
<p>
<input type="button" value="Get Second Student's Name"
onclick="getStudentData()" />
</p>
</center>
</body>
</html>
Note also that I’m adding a button to the Web page to run the JavaScript that will read the second name. You can see the results in Figure 15.2. When the user clicks the button, the browser reads in school.xml and displays the name of the second student. We’ve made some progress.
Figure 15.2 Accessing data in an XML document in Internet Explorer.
Using Data Islands
Starting with Internet Explorer 5, you can also use data islands to handle XML. Data islands enclose XML inside a standard HTML (or XHTML) document. You create a data island with the <xml> element, enclosing the XML you want to use in the <xml> element:
<xml id="xmlid">
<xmldata>
<data>Here's some data!</data>
</xmldata>
</xml>
The <xmldata> and <data> elements are XML elements, so I could have named them anything. Using the <xml> element’s ID, you can access the XML in the element. By using the <xml> element’s src attribute, you can also use a data island to handle an external XML document. To get the root element of the XML document, you use the XMLDocument property. Here’s how I convert the previous example to use a data island instead of the Microsoft.XMLDOM object (note that since the <xml> element is specific to Internet Explorer, this document is not strictly conforming XHTML):
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Finding Element Values in an XML Document Using Data Islands
</title>
<xml id="schoolXML" src="school.xml"></xml>
<script type="text/javascript" language="javascript">
function getStudentData()
{
xmldoc= document.all("schoolXML").XMLDocument;
nodeSchool = xmldoc.documentElement;
nodeClass = nodeSchool.firstChild;
nodeStudents = nodeClass.lastChild;
nodeStudent = nodeStudents.lastChild;
nodeFirstName = nodeStudent.firstChild;
nodeLastName = nodeFirstName.nextSibling;
outputMessage = "Name: " +
nodeFirstName.firstChild.nodeValue + ' '
+ nodeLastName.firstChild.nodeValue;
message.innerHTML=outputMessage;
}
</script>
</head>
<body>
<center>
<h1>
Finding Element Values in an XML Document Using
Data Islands
</h1>
<div id="message"></div>
<p>
<input type="button" value="Get Second Student's Name"
onclick="getStudentData()" />
</p>
</center>
</body>
</html>
This example works as the previous example did, as you see in Figure 15.3. Now we’ve seen two ways of working with an XML document in Internet Explorer—by loading the document in explicitly and by using a data island. I’ll use both approaches in this chapter but will use data islands the most because it’s the most common technique.
Figure 15.3 Accessing data with data islands in an XML document in Internet Explorer.
Extending XHTML
One of the attractive aspects of XHTML is that because it’s based on XML, you can extend it with your own elements and attributes. I’ll take a look at an example here, and elaborate the process in this chapter.
NOTE: Note that the material on extending XHTML is only in the working draft stage, and will probably change. You can find more information at www.w3.org/TR/xhtml-building/.
For example, standard XHTML documents have a <head> and <body>; I’ll add a new element, <foot>, to hold a footer for the document. To add this element, I’ll create a new DTD named extend.dtd, which defines this new element. I’ll also give this new element an attribute, footattribute, to show how that works. To create an attribute, you use the <!ATTLIST> element (see the Immediate Solutions section “Specifying Attributes in DTDs”). Here’s another important point; W3C says that new XHTML elements should have their own namespace, and I’ll give them the namespace doc here, like this:
<!ELEMENT doc:foot (#PCDATA) >
<!ATTLIST doc:foot
footattribute CDATA #IMPLIED
>
.
.
.
You also have to specify how the new element fits in with the other elements in XHTML to make sure the documents you create are valid. The <doc:foot> element is a child element of the <html> element, so you have to indicate that. In the XHTML 1.0 Transitional DTD, the <html> element is defined this way:
<!ELEMENT html (head, body)>
I’ll augment the <html> element’s content model to include the <doc:foot> element this way:
<!ELEMENT doc:foot (#PCDATA) >
<!ATTLIST doc:foot
footattribute CDATA #IMPLIED
>
<!ELEMENT html (head, body, doc:foot)>
.
.
.
When you redefine an element like this, the new definition takes precedence over the old one (although browsers like Internet Explorer are not yet up to redefining elements this way). Having redefined the <html> element to contain the <doc:foot> element, I can include the rest of the XHTML 1.0 Transitional DTD with a parameter entity. You use parameter entities in DTDs to include resources in exactly this way, and I’ll define a parameter entity named xhtml10T.dtd to stand for the entire XHTML 1.0 Transitional DTD. I can then include that DTD with the parameter entity reference %xhtml10T.dtd; this way:
<!ELEMENT doc:foot (#PCDATA) >
<!ATTLIST doc:foot
footattribute CDATA #IMPLIED
>
<!ELEMENT html (head, body, doc:foot)>
<!ENTITY % xhtml10T.dtd PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
%xhtml10T.dtd;
That completes the new DTD, extend.dtd. You can indicate how you want text in the new element displayed in a style sheet, which I’ll call extend.css; here are the contents of that style sheet:
doc:foot {font-size: 8pt; color: #FF0000}
p (color: #FF0000}
The following code shows how you can use the new DTD in a new XHTML page using the <doc:foot> element, along with the style sheet extend.css. Note that I’m now declaring the doc namespace and making the XHTML namespace the default namespace:
<!DOCTYPE html PUBLIC "-//Extender//DTD XHTML-Extensions 1.0//EN"
"http://www.starpowder.com/steve/extend.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:doc="http://www.starpowder.com/steve/extend.dtd">
<head>
<title>
Extending XHTML
</title>
<link rel="stylesheet" href="extend.css" />
</head>
<body>
<p>
Here is some text.
</p>
</body>
<doc:foot>
This is the page's foot.
</doc:foot>
</html>
That’s just one way to extend XHTML—we’ll see others as well. For example, now that we’re into the details of XML and extending XHTML, I’ll also discuss how XHTML 1.1 modules work, so you can see how to get into the heart of those modules and incorporate entirely new elements into existing XHTML 1.1 elements.
Page 2 of 5. Goto Page 1 | 3 | 4 | 5
|
