XML in Firefox 1.5, part 3rd: Using JavaScript to handle Xml_

XML in Firefox 1.5, part 3rd: Using JavaScript to handle Xml__java in Firefox

Last Update:2018-07-30 Source: Internet

Author: User

Tags cdata ibm developerworks

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This is the third article in the "XML in Firefox 1.5" series, and you'll learn to work with XML with JavaScript implementations in Mozilla Firefox. In the first two articles, XML in Firefox 1.5, part 1th: XML features overview and XML in Firefox 1.5, part 2nd: Basic XML processing, we learned about various XML-related tools in Mozilla Firefox, and Basic concepts of XML parsing, cascading style sheets (CSS), and XSLT style sheet calls.

After understanding the basic display and style of XML in the Firefox browser, the next feature to focus on is the script. In this article, I'll show you the basic concept of using JavaScript code to work with XML. All of the code examples and screenshots included in this article are created and tested using the Firefox 1.5.0.4 in the Ubuntu linux® system, and the configuration file has not been modified (that is, it has no extensions and retains the default option when installed). If you want to write Cross-browser code for XML processing, you may have to use other browser sniffing techniques, but I'm not introducing them in this article.

Load XML File

You can load an XML document using JavaScript code embedded in the Web page. I'll start with an HTML Web page example that loads a simple XML mailing list format for dynamic updates, and the XML document to load is shown in Listing 1 (labels.xml).
Listing 1. (labels.xml) address label XML

<?xml version= "1.0" encoding= "Iso-8859-1"?>
<labels>
<label id= ' EP ' added= "2003-06-10" >
<name>ezra pound</name>
<address>
<street>45 Usura place</street>
<city>Hailey</city>
<province>ID</province>
</address>
</label>
<label id= ' tse ' added= ' 2003-06-20 ' >
<name>thomas eliot</name>
<address>
<street>3 Prufrock lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
</label>
<label id= "LH" added= "2004-11-01" >
<name>langston hughes</name>
<address>
&LT;STREET&GT;10 Bridge tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</label>
<label id= "CO" added= "2004-11-15" >
<name>christopher okigbo</name>
<address>
<street>7 Heaven ' s gate</street>
<city>Idoto</city>
<province>Anambra</province>
</address>
</label>
</labels>

Listing 2 contains only one linked HTML page, and the link displays "Click Here to load addresses". Click the link and the address label information is added to the page.
Listing 2. HTML pages use JavaScript to load XML for dynamic updates

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"
"Http://www.w3.org/TR/html4/strict.dtd" >
<meta content= "text/html; Charset=iso-8859-1 "http-equiv=" Content-type ">
<title>address book</title>
<script type= "Application/javascript" >
var Element_node = 1
Text_node

function loadaddresses ()
{
xmldoc = Document.implementation.createDocument ("", "", null);
Xmldoc.onload = writelist;
Xmldoc.load ("Labels.xml");
}

function Writelist ()
{
var labels = xmldoc.getelementsbytagname (' label ');
var ol = document.createelement (' ol ');

for (i=0 i < labels.length; i++)
{
var li = document.createelement (' li ');
for (J=0 J < Labels[i].childnodes.length; J + +)
{
if (Labels[i].childnodes[j].nodetype!= element_node) continue;
var CDATA = document.createTextNode (
Labels[i].childnodes[j].firstchild.nodevalue);
Li.appendchild (CDATA);
}
var labelid = document.createTextNode (' +
Labels[i].getattribute (' id ') + ') ';
Li.appendchild (Labelid);
Ol.appendchild (LI);
}
document.getElementById (' Updatetarget '). appendchild (OL);
}
</script>
<body id= ' Updatetarget ' >
<p>
<a href= "javascript:loadaddresses ()" >click here to load addresses</a>
</p>
</body>

The script element embodies the dynamic attribute, defines a JavaScript function loadaddresses, which is called by the link in the HTML. The function creates an empty document instance, and then reads Listing 1 (labels.xml) using the load function. The load function is executed asynchronously, so while the XML document is read in, the script jumps to the next line of execution, allowing you to start running with a trigger function after the XML load starts. Therefore, I set the onload attribute for a separate function writelist. This function traverses the tag using the getElementsByTagName method of the convenient document object model, the text-mode, DOM. If the XML document uses namespaces, use the Getelementsbytagnamens form instead of the above method and specify the namespace as the first argument. In the next section, you'll see an example of this. In Listing 2, XML processing is done using only the basic layer of the DOM (called DOM Level 1). For applications that support namespaces, you need to use DOM Level 2, which extends many level 1 methods to support namespaces. Listing 2 creates a subtree that represents a sequence table, and the HTML main document as a factory (factory) to create the node. In this way, the resulting subtree can be inserted into the HTML main document. Listing 2 reads the source XML tree using normal mode, and then adds the corresponding node to the output HTML subtree.

Executes a looping statement labels[i].childnodes for each label element, looking for name and address child nodes. To avoid performing operations on child nodes of a text node, use the NodeType test. Use the Firstchild.nodevalue method to gain access to the child text of the name element. For the address element, the first child node is a space. You cannot access any of the text content of the child nodes of the address. Use the GetAttribute method to access the ID. Adds all the text that is collected to the list item. After all the list item elements have been compiled, use the AppendChild method to update the HTML document that contains the subtree. You can use the Updatetarget ID tag to add the element (body) of the subtree. When you first load the HTML in Firefox, you see only the links shown in Figure 1.
Figure 1. Browser display after loading listing 2

This article has been transferred from IBM Developerworks China

Please click here to view the full text

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More