一、瀏覽器對XML DOM的支持
1.判斷瀏覽器對DOM2.0級別的XML的支持
alert(document.implementation.hasFeature("XML", "2.0")); // true
2.解析XML
// 在ie8以下創建XML
function createXML() {
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.DOMDocument", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument.6.0"], i, len;
for (i = 0, len = versions.length; i < len ; i++)
{
try
{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}
catch (error){}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
// 解析XML字符串為XML DOM對象
function parseXml (xml) {
var xmlDom;
if (typeof DOMParser != "undefined")
{
xmlDom = (new DOMParser()).parseFromString(xml, "text/xml");
var errors = xmlDom.getElementsByTagName("parsererror");
if(errors.length)
{
throw new Error(errors[0].textContent);
}
//alert(xmlDom.documentElement.tagName);
} else if (typeof ActiveXObject != "undefined")
{
xmlDom = new createXML();
xmlDom.loadXML(xml);
if (xmlDom.parseError != 0)
{
throw new Error(xmlDom.parseError.reason);
}
//alert(xmlDom.xml);
} else {
throw new Error("不支持xml dom");
}
return xmlDom;
}
// 測試
var xmldom = null;
try {
xmldom = parseXml("<root><child/></root>");
} catch (ex){
alert(ex.message);
}
alert(xmldom);
3.序列化xml
function serializeXml(xmldom){
if (typeof XMLSerializer != "undefined"){
return (new XMLSerializer()).serializeToString(xmldom);
} else if (typeof xmldom.xml != "undefined"){
// Less IE8
return xmldom.xml;
} else {
throw new Error("Could not serialize XML DOM.");
}
}
// 測試
var xmldom = null;
try {
xmldom = parseXml("<root><child/></root>");
} catch (ex){
alert(ex.message);
}
var serizlize = serializeXml(xmldom);
alert(serizlize); // <root><child/></root>
4.加載xml文件
function parseXmlFile(file) {
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}
try
{
xmlDoc.async=false;
xmlDoc.load(file);
}
catch(e) {alert(e.message)}
return xmlDoc;
}
二、瀏覽器對XPATH的支持
1.判斷瀏覽器對DOM3的XPath的支持
alert(document.implementation.hasFeature("XPath", "3.0")); // true
2.跨瀏覽器兼容
/**根據
* param context : XML DOM上下文環境
* param expression : XPath的查詢表達式
* param namespaces : 命名空間
*/
function selectNodes(context, expression, namespaces){
var doc = (context.nodeType != 9 ? context.ownerDocument : context);
if (typeof doc.evaluate != "undefined"){
var nsresolver = null;
if (namespaces instanceof Object){
nsresolver = function(prefix){
return namespaces[prefix];
};
}
var result = doc.evaluate(expression, context, nsresolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
var nodes = new Array();
if (result !== null){
for (var i=0, len=result.snapshotLength; i < len; i++){
nodes.push(result.snapshotItem(i));
}
}
return nodes;
} else if (typeof context.selectNodes != "undefined"){
// 創建命名空間字符串
if (namespaces instanceof Object){
var ns = "";
for (var prefix in namespaces){
if (namespaces.hasOwnProperty(prefix)){
ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' ";
}
}
doc.setProperty("SelectionNamespaces", ns);
}
var result = context.selectNodes(expression);
var nodes = new Array();
for (var i=0,len=result.length; i < len; i++){
nodes.push(result[i]);
}
return nodes;
} else {
throw new Error("No XPath engine found.");
}
}
var xmldom = null;
try {
xmldom = parseXml("<yc:root xmlns:yc=\"http://www.yc.com/\"><yc:child>zhangshan</yc:child><yc:child>lisi</yc:child></yc:root>");
} catch (ex){
alert(ex.message);
}
var result = selectNodes(xmldom.documentElement, "yc:child",
{ yc: "http://www.yc.com/"});
for(var i = 0, len = result.length; i < len; i++) {
alert(result[i].firstChild.nodeValue); // zhangshan,lisi
}
三、瀏覽器對XLST的支持 將xml文件用xsl文件修飾，形成為html文件，html文件包括xml的內容和xsl的樣式
下面我們來講一個例子，大體是用javascript操作xml文件和xsl文件，將他們合并為html形式的文件當然，
我們返回的是html形式的字符串，以下是具體步驟：
1.準備文件cdcatalog.xml和cdcatalog.xsl
①cdcatalog.xml文件：
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited with XML Spy v2007 (http://www.altova.com) -->
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
</catalog>
②cdcatalog.xsl文件：
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited with XML Spy v2007 (http://www.altova.com) -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Title</th>
<th align="left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
2.用javascript將兩個文件加載，用上述的parseXmlFile函數
var xmldom = parseXmlFile("xml/cdcatalog.xml");
var xsltdom = parseXmlFile("xml/cdcatalog.xsl");
3.將xml文件和xsl文件轉換為字符串
function transform(context, xslt){
if (typeof XSLTProcessor != "undefined"){
// 創建XSLTProcessor對象
var processor = new XSLTProcessor();
// 導入xslt樣式表
processor.importStylesheet(xslt);
// 轉化為文檔
var result = processor.transformToDocument(context);
// 序列化為字符串
return (new XMLSerializer()).serializeToString(result);
} else if (typeof context.transformNode != "undefined") {
return context.transformNode(xslt);
} else {
throw new Error("No XSLT processor available.");
}
}
var result = transform(xmldom, xsltdom);
alert(result); // html形式的字符串
4.接下來就是將result返回的字符串拷貝下來，放入一個html文件中就可以看到效果了。XML 跨瀏覽器
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
推薦閱讀更多精彩內容
- 2017年第一篇博客，從去年11月份開始到現在已經幾個月沒有動筆了。寫這篇博客的契機是，有個哥們在自己的博客系統上...
- 我們用瀏覽器打開文件的時候會發現如果是doc文件， 會用記事本打開，出現亂碼， 但是如果在web.xml里面配置了...
