<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>
相关文章推荐
- JavaScript: The Definitive Guide
- JavaScript正则表达式(JavaScript:The Definitive Guide笔记)
- JavaScript: The Definitive Guide
- JavaScript权威指南(JavaScript The Definitive Guide)- Paper Reading
- 【translate】JavaScript: The Definitive Guide, 5th Edition - (1)
- Note Two : studying JavaScript: The Definitive Guide, 4th Edition
- JavaScript - The Definitive Guide Read Log 5
- use noscript html tag when user disable the javascript in browser, guide user how to enable the js in different browser and retu
- JS: The Definitive Guide 笔记 - Array
- 【translate】JavaScript: The Definitive Guide, 5th Edition - (0)
- Note One —— studying JavaScript: The Definitive Guide, 4th Edition
- Note Three: studying JavaScript: The Definitive Guide, 4th Edition
- Literals VS Identifiers(JavaScript: The Definitive Guide学习摘要2)
- [JavaScript: The Definitive Guide]笔记(1)
- JavaScript: The Definitive Guide, 6th Edition Chapter 1 Note 1
- How does the certain version of a certain brower support the JavaScript Standard?(come from Javascript:The definitive guide, 4th
- JavaScript - The Definitive Guide Read Log 6
- 类型转换总结(JavaScript: The Definitive Guide学习摘要3)
- JavaScript中的prototypes(JavaScript: The Definitive Guide学习摘要7)
- js读取xml的<![CDATA[]]>存放内容