<JS：The Definitive Guide > JavaScript 和 XML

最新推荐文章于 2024-11-13 01:18:00 发布

生产的驴

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量94

点赞数

文章标签： javascript ViewUI

创建一个空的XML文档：

var XML={};
XML.newDocument=function(rootTagname,namespaceURL){
if(!rootTagname) rootTagname="";
if(!namespaceURL) namespaceURL="";
if(document.implementation && document.implementation.createDocument){
//This is the W3C standard way to do it
        return document.implementation.createDocument(namespaceURL,rootTagname,null);
    }
else{
//This is the IE way to do it
         //Create an empty document as an ActiveX object
         var doc=new ActiveXObject("MSXML2.DOMDocument");
if(rootTagname){
var prefix="";
var tagname=rootTagname;
var p=rootTagname.indexOf(':');
if(p!=-1){
                  prefix=rootTagname.substring(0,p);
                    tagname=rootTagname.substring(p+1);
                }
//If we have a namespace,we must have a namespace prefix
                //If we don,t have a namespace,we discard any prefix
                if(namespaceURL){
if(!prefix) prefix="a0"; //what firefox uses
                }
else{
                   prefix="";
                }
//Create the root element as a string of text
                var text="<"+(prefix?(prefix+":"):"")+tagname+
                    (namespaceURL?("xmlns:"+prefix+'="'+namespaceURL+'"'):"")
                    +"/>";
//And prase that text into the empty document
              doc.loadXML(text);
         }
return doc;
    }
};

从xml中提取信息

address.xml:

<?xml version="1.0"?>
<contacts>
<contact name="Able Bake"><email>able@example.com</email></contact>
<contact name="Careful Dodger"><email>dodger@example.com</email></contact>
<contact name="Eager Framer" personal="true"><email>frame@example.com</email></contact>
</contacts

HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function makeTable(xmldoc,schema,element){
var table=document.createElement("table");
//Create the header row of <th> elements in a <tr> in a <thead>
var thead=document.createElement("thead");
var header=document.createElement("tr");
for(var i=0;i<schema.columns.length;i++){
var c=schema.columns[i];
var label=(typeof c=="string")?c:c.label;
var cell=document.createElement("th");
                        cell.appendChild(document.createTextNode(label));
                        header.appendChild(cell);
             }
             thead.appendChild(header);
             table.appendChild(thead);
//The remaining rows of of the table go in a <tbody>
var tbody=document.createElement("tbody");
             table.appendChild(tbody);

//Now get the elements that contain our data from the xml document
var xmlrows=xmldoc.getElementsByTagName(schema.rowtag);  //xmlrows is a array
        
//Loop through these elements .Each one contains a row of the table
for(var r=0;r<xmlrows.length;r++){
//This is the XML element that holds the data for the row
var xmlrow=xmlrows[r];
//Create an HTML element to Display the data for the rowtag
var row=document.createElement("tr");

//Loop through the columns secified by the schema object
for(var c=0;c<schema.columns.length;c++){
var sc=schema.columns[c];
var tagname=(typeof sc=="string")?sc:sc.tagname;
var celltext;
if(tagname.charAt(0)=='@'){
//if the tagname begins with '@',it is an attribute name
                                celltext=xmlrow.getAttribute(tagname.substring(1));
                            }
else{
//Find the XML element that holds the data for this columns
var xmlcell=xmlrow.getElementsByTagName(tagname)[0];
//Assume that element has a text node as its first child
var celltext=xmlcell.firstChild.data;
                            }
var cell=document.createElement("td");
                            cell.appendChild(document.createTextNode(celltext));
//Add the cell to the row
                            row.appendChild(cell);
                 }
                 tbody.appendChild(row);
             }

             table.frame="border";
if(typeof element=="string") element=document.getElementById(element);
             element.appendChild(table);
         }



function displayAddressBook(){
var schema={
               rowtag:"contact",
                 columns:[
                          {tagname:"@name",label:"Name"},
              {tagname:"@email",label:"Address"}
                                     ]
            };
var xmlDoc;
if (window.ActiveXObject)
            {
// code for IE
                xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
            }
else if (document.implementation.createDocument)
            {
// code for Firefox, Mozilla, Opera, etc.
                xmlDoc=document.implementation.createDocument("","",null);
            }
else
            {
                alert('Your browser cannot handle this script');
            }
            xmlDoc.async=false;
            xmlDoc.load("address.xml");  //Read the XML data
            makeTable(xmlDoc,schema,"addresses");
        }
</script>
</head>
<body>
<BUTTON onclick="displayAddressBook()">Display Address Book</BUTTON>
<div id="addresses"><!-----table will be inserted here----></div>
</body>
</html>