您的位置:首页 > Web前端 > JavaScript

<JS:The Definitive Guide > JavaScript 和 XML

2011-12-01 12:49 477 查看
创建一个空的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>

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: