`
yuxuguang
  • 浏览: 139182 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js解析xml的通用函数

XML浏览器IEJavaScriptHTML 
阅读更多

分享一个js解析xml的通用函数，终于体会到了只要获得对象一切皆有可能！面向对象就是不一样啊

废话少说，直接看代码吧，已经加了很详细的注释了，看不懂就先学习学习再来看了！

最近看了些书，说浏览器判断是非常糟糕的设计思想，因为除了ie和火狐外大多数浏览器都会伪装自己为ie

而当新的浏览器出来的时候代码就不能自动适应了（例如最近出来的google浏览器），所以解决的最终办法是用功能检测模型去执行代码，而且把标准代码先判断执行，这样不够是什么浏览器都可以兼容了，而且新出来的浏览器只要支持这个功能就可以执行这个代码，这样就不用修改代码来适应不同浏览器了。

//把浏览器判断换成 功能检测模型，而且把标准代码先判断执行，更加合适和具有兼容性
    //由于直接执行不兼容的代码会报错，所以采用try catch解决

 

parseXML.js

var XMLJS = function(){};

XMLJS.apply = function(o, c, defaults){
    if(defaults){
        // no "this" reference for friendly out of scope calls
        XMLJS.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};

XMLJS.apply(XMLJS, {
docObjs : new Array,
/**
* 初始化xml对象文件连接池
*/
initDocs : function(count)
{
   if(count == null) 
    count = 3;
  
   for(var i = 0; i < count; i++)
   {
    XMLJS.docObjs[i] = new Object;
    //把浏览器判断换成代码判断，而且把标准代码先判断执行，更加合适和具有兼容性
    //由于直接执行不兼容的代码会报错，所以采用try catch解决
    try
    {
     XMLJS.docObjs[i].doc = new DOMParser();
     XMLJS.docObjs[i].doc.async = false;
     XMLJS.docObjs[i].free = true;
    }
    catch(e)
    {
     XMLJS.docObjs[i].doc = new ActiveXObject('Microsoft.XMLDOM');
     XMLJS.docObjs[i].doc.async = false;
     XMLJS.docObjs[i].free = true;
    }

   }
},

/**
* 获得空闲xml文件docObj对象
*/
getFreeDocObj : function ()
{
   var docObj = null;
  
   for(var i = 0; i < XMLJS.docObjs.length; i++)
   {
    if(XMLJS.docObjs[i].free)
    {
     XMLJS.docObjs[i].free = false;
     docObj = XMLJS.docObjs[i];
     break;
    }
   }
  
   return docObj;
},

/**
* 解析xml
*/
parseXML : function (xmlContent)
{
   var docObj = XMLJS.getFreeDocObj();
   try
   { 
    var XmlDom = docObj.doc.parseFromString(xmlContent,"text/xml");
    docObj.free = true;
    return XmlDom;
   }
   catch(e)
   {
    docObj.doc.loadXML (xmlContent);//解析字符串不能用load必须用loadXML.(load解析载入文档的)
    var doc = docObj.doc;
    docObj.free = true;
    return doc;
   }
},

/**
* 解析xml
*/
parseXML2 : function (xmlContent)
{
   var xmlDoc;
   try
   { 
    xmlDoc = new DOMParser();
    var XmlDom = xmlDoc.parseFromString(xmlContent,"text/xml");
    return XmlDom;
   }
   catch(e)
   {
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.loadXML(xmlContent);
    return xmlDoc;
   }
},

/**
* 获取xml子节点
* @param{domNode}dom节点
* @param{subNodeName}子节点名称
*/
getXMLSubNodes : function (domNode, subNodeName)
{
   var subNodes = [];
  
   var currentNode = domNode;
   var childNodes = null;
  
   var paths = subNodeName.split ("/");
  
   for (var i = 0; paths != null && i < paths.length-1; i++)
   {
    if (paths[i] == "")
     continue;
   
    childNodes = currentNode.childNodes;
  
    for (var j = 0; childNodes != null && j < childNodes.length; j++)
    {
     if (childNodes[j].nodeName.toLowerCase() == paths[i].toLowerCase())
     {
      currentNode = childNodes[j];
      break;
     }
    }
   }
  
   childNodes = currentNode.childNodes;
  
   for (var i = 0; i < childNodes.length; i++)
   {
    if (childNodes[i].nodeName.toLowerCase() == paths[paths.length-1].toLowerCase())
     subNodes.push (childNodes[i]);
   }
  
   return subNodes;
},

/**
* 获取xml根节点
* @param{doc}xml对象
*/
getXMLRootNode : function (doc)
{
   if (doc == null)
    return null;
  
   return doc.documentElement;
},

getXMLChildNodes: function(root)
{
   var itemNodes = [];
   var nodes = root.childNodes;
  
   for(var i=0;i<nodes.length;i++)
   {
    if(nodes[i].nodeType == 1)
    {
     itemNodes.push(nodes[i]);
     //alert(nodes[i].nodeName + nodes[i].nodeType);
    }
   }
  
   return itemNodes;
},

getXMLChildNode: function(doc_el, nodeName)
{
   var element = doc_el.getElementsByTagName (nodeName);
   return element.documentElement;
},

/**
* 获取xml节点的值
* @param{doc}xml对象
* @param{NodeName}节点名称
*/
getXMLNodeValue : function (doc,nodeName)
{
   if (doc == null)
   {
    return null;
   }
   return XMLJS.getXMLSingleNodeValue (doc.documentElement, nodeName);
},

/**
* 简化 DOM 访问的函数
* @param{doc_el} req.responseXML.documentElement
* @param{name} getElementsByTagName("name"), element name
* @param{idx} element index,exp:elements[0].firstChild.data
* @return nodevalue
* 
*/
getXMLSingleNodeValue: function(doc_el, nodeName)
{
   var element = doc_el.getElementsByTagName (nodeName);
   var nodevalue = "";
   if(element[0].firstChild != null)
   {
    nodevalue =element[0].firstChild.nodeValue;
   }
   return nodevalue;
   //return element[0].firstChild.nodeValue;
},

/**
* 获取xml节点的值
* @param{doc}xml对象
* @param{NodeName}节点名称
*/
getAttributeNodeValues : function (doc_el,nodeName,attributeName)
{
   if (doc_el == null)
   {
    return null;
   }
   var values = [];
   var len = doc_el.length;
   var value = "";
   for(var i = 0; i < len; i++)
   {
    if(doc_el[i].nodeName == nodeName)
    {
     value = doc_el[i].getAttribute(attributeName);
     values.push(value);
    }
   }
   return values;
},

/**
* 获取节点属性值的方法
* @param{doc_el} req.responseXML.documentElement
* @param{attributeName} node Attribute name
* @return nodevalue
* 
*/
getAttributeNodeValue: function(doc_el,attributeName)
{
   var nodevalue = "";
   if(doc_el != null)
   {
    nodevalue =doc_el.getAttribute(attributeName);
   }
   return nodevalue;
}

});
/**
* @deprecated 调用初始化xml文件对象方法,必须在定义后才能调用
* 
*/
XMLJS.initDocs();

 

 

 

 

test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>testXML</title>
<script type="text/javascript" src="parseXML.js"></script>
<style type="text/css">
html,body{font-size:14px;color:#333333; margin:0px;padding:0px; line-height:120%; overflow:hidden;}
</style>

<script type="text/javascript">

function subArticle()
{
//var appendixXML = "<response sessionID='48C14D02578E9D28D3E897671378E331' status='ok' />";
var appendixXML = "<response sessionID='48C14D02578E9D28D3E897671378E331' status='ok'><aa id='a1' cc='dd'></aa><aa id='a2' cc='ee'></aa><bb id='b1'></bb></response>";
//var appendixXML = "<?xml version=\"1.0\" encoding=\"gbk\"?><diagram><title><dept></dept><aname></aname><titlehtml></titlehtml><child><title><dept></dept><aname></aname><titlehtml></titlehtml><child></child></title><title><dept></dept><aname></aname><titlehtml></titlehtml><child></child></title></child></title></diagram>";
//测试,示例代码：
var doc = XMLJS.parseXML(appendixXML);
var root = XMLJS.getXMLRootNode(doc);
//根节点属性要传入root
var sessionID = XMLJS.getAttributeNodeValue(root,"sessionID");
alert(sessionID);//48C14D02578E9D28D3E897671378E331

var nodes = XMLJS.getXMLChildNodes(root);//根节点下面所有子节点元素对象
//alert(nodes);//[object Element],[object Element],[object Element]

var aa_id = XMLJS.getAttributeNodeValues(nodes,"aa","id");
//alert(aa_id);//a1,a2

var aa_cc = XMLJS.getAttributeNodeValues(nodes,"aa","cc");
//alert(aa_cc);//dd,ee

var bb_id = XMLJS.getAttributeNodeValues(nodes,"bb","id");
//alert(bb_id);//b1

// var titles = XMLJS.getXMLChildNodes(root);
// var title = titles[0];
// var dept = XMLJS.getXMLSingleNodeValue(title,"dept");
// alert(dept);
}

</script>
</head>
<body>
<center>
<div id="testxml" onClick="subArticle()" style="margin:5px;text-align:center; vertical-align:middle; font-size:18px; color:#FF0000;">testxml onclick hear!</div>
</center>
</body>
</html>

 

 

 

另外再分享一个实际中的应用：

获得编辑器中生成的xml，并解析成目录树形式的html输出预览

应用到xml解析的部分已经加亮显示了

viewArticle.js

var isIE    = navigator.userAgent.indexOf("MSIE")>0;

function $(id)
{
return document.getElementById(id);
}

function StringBuffer()
{
var arr = new Array;
this.append = function(str)
{
    arr[arr.length] = str; 
};

this.toString = function()
{
    return arr.join(""); 
};
}
//为了火狐的预览setTimeout设置全局变量
var viewhtml = "";
var editor_win = null;

function getAppendixHTMLFromXML(type,position,left,top,width,height,position)
{
if(left == null)
   left = 720;
if(top == null)
   top = 30;
if(width == null)
   width = 220;
if(height == null)
   height = 400;
if(position == null)
   position = "absolute";
  

var container = "";
if(type.toLowerCase() == "nodiv")
{
   container = "<fieldset><legend style='font-weight:bold;font-size:14px;'>目录</legend>";
}
else
{
   container = "<div style='margin:0px;padding:0px;position:" + position + ";left:" + parseInt(left) + "px;top:" + parseInt(top) + "px;width:" + parseInt(width) + "px;height:" + parseInt(height) + "px;'><fieldset><legend style='font-weight:bold;font-size:14px;'>目录</legend>";
}

var appendixXML = $("Editor").contentWindow.getAppendixXML();
var doc = XMLJS.parseXML(appendixXML);
var root = XMLJS.getXMLRootNode(doc);
var titles = XMLJS.getXMLChildNodes(root);

var sb = new StringBuffer();
sb.append(container);

var titlediv = parseXMLTree(titles);
sb.append(titlediv);

if(type.toLowerCase() == "nodiv")
{
   sb.append ("</fieldset>");
}
else
{
   sb.append ("</fieldset></div>");
}

return sb.toString();
}

//文章预览
function article_preview()
{
var EditorHTML = $("Editor").contentWindow.getHTML();
//var appendixXML = $("Editor").contentWindow.getAppendixXML();
//var xmltree = creatXMLTree(appendixXML);
//var xmltree = getAppendixHTMLFromXML();
var xmltree = $("Editor").contentWindow.getAppendixHTML(null,null,null,null,null,null);
var viewhtml = EditorHTML + xmltree;
openPreviewWin(viewhtml)
}

function openPreviewWin(viewhtml)
{
if(isIE)
{
   var starthtml = "<html>"
   + "<head>"
   + "<title>article preview</title>"
   + "<style>"
   + "html,body{font-size:12px;padding-top:3px;padding-left:3px;padding-right:0px;margin:0px}"
   + "p{margin:0;padding:0;}"
   + "</style>"
   + "</head>"
   + "<body>";
   var endhtml = "</body></html>";
   viewhtml = starthtml + viewhtml + endhtml;
  
   editor_win = window.open('', "_blank", '');
   editor_win.document.open('text/html', 'replace');
   editor_win.opener = null ;
   editor_win.document.writeln(viewhtml);
   editor_win.document.close();
}
else
{
   if(editor_win == null)
   {
    editor_win = window.open('view.html', "_blank", '');
   }
  
   if(editor_win.document.body.innerHTML)
   {
    editor_win.document.body.innerHTML = viewhtml;
   }
   else
   {
    setTimeout(openPreviewWin,100);
   }
}
}


function creatXMLTree(appendixXML)
{
var doc = XMLJS.parseXML(appendixXML);
var root = XMLJS.getXMLRootNode(doc);
var titles = XMLJS.getXMLChildNodes(root);

var sb = new StringBuffer();
var container = "<div id='title' style='position:absolute;left:720px;top:30px;width:220px;height:400px;padding:2px;margin:2px;border: 1px solid #cccccc;'>";
sb.append(container);

var titlediv = parseXMLTree(titles);
sb.append(titlediv);

sb.append("</div>");

return sb.toString();
}

function parseXMLTree(titles)
{
if(!titles)
{
   return;
}

var sb = new StringBuffer();
var xmlnode = "";

for(var i = 0; i < titles.length; i++)
{
var title = titles[i];
   var dept      = XMLJS.getXMLSingleNodeValue(title,"dept");
   var aname     = XMLJS.getXMLSingleNodeValue(title,"aname");
   var titlehtml = XMLJS.getXMLSingleNodeValue(title,"titlehtml");
   var margin = "";
   for(var j = 1; j < dept; j++)
   {
    margin += "&nbsp;&nbsp;&nbsp;&nbsp;";
   }
   xmlnode = "<div>" + margin + "<a href='#" + aname + "' style='text-decoration:none;'>" + titlehtml + "</a></div>";
   sb.append(xmlnode);
  
   var child     = title.lastChild;
if(child.hasChildNodes())//递归调用
   {
    var childs = XMLJS.getXMLChildNodes(child);
    xmlnode = parseXMLTree(childs);
    sb.append(xmlnode);
   }
  
}
return sb.toString();
}

 

 

 

原文地址：http://hi.baidu.com/zdz8207/blog/item/934e8eb14ec51d520823020a.html

分享到：
| java程序使用jquery AJAX
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现ajax通用函数

    在实际项目中，我们还可以进一步优化这个通用函数，比如添加对其他数据类型的处理（如XML、HTML），支持跨域请求，处理预检请求（CORS），以及添加请求超时等功能。 在提供的压缩包文件中，有一个名为`doi18n.js`的...

    ajax通用函数，兼容市面所有浏览器，纯javascript实现

    }这个通用 `ajax` 函数通过使用 JavaScript 实现了一个跨浏览器的 AJAX 请求。它首先检查是否支持 `ActiveXObject`（针对旧版 Internet Explorer）或 `XMLHttpRequest` 对象。然后，它会初始化一个请求，设置请求...

    JS操作xml对象转换为Json对象示例

    在这个例子中，`xml2js`库的`Parser`对象能够解析XML字符串并将其转换为JSON对象。如果在解析过程中出现错误，它会通过回调函数的`err`参数返回错误信息。 此外，还可以使用`DOMParser` API在浏览器环境中解析XML...

    纯javascript+xml配置验证

    2. **JavaScript解析XML**：在客户端使用JavaScript读取并解析XML文件，获取验证规则。 3. **事件监听**：为表单元素添加事件监听器，如`onsubmit`，在用户提交表单时触发验证。 4. **执行验证**：遍历表单数据，...

    JavaScript 通用库

    2. **XMLEncode(str)**：此函数用于对字符串进行XML编码，确保字符串中的特殊字符不会导致XML解析错误。XML编码通常涉及将 `, `&gt;`, `&`, `'`, `"` 等字符替换为相应的实体引用，如 `&lt;`, `&gt;`, `&amp;`, `&apos;...

    JQuery解析XML数据的几个简单实例

    JQuery解析XML数据的几个简单实例中，JQuery是JavaScript的一个库，它简化了JavaScript编程。在处理XML数据方面，JQuery提供了一套非常便捷的方法来解析和操作XML文档。XML是“可扩展标记语言”（Extensible Markup ...

    Web开发资料集合(Ajax,Javascript,XML)

    为了学习和掌握这些技术，开发者需要熟悉JavaScript语法、DOM操作、XML结构和解析方法，以及如何使用Ajax技术构建异步通信。同时，了解并熟练运用相关的库和框架，如jQuery的$.ajax()函数或者fetch API，可以帮助更...

    xml手册,xml手册,xml手册

    在解析XML时，有两种主要的解析器类型：DOM（Document Object Model）和SAX（Simple API for XML）。DOM将整个XML文档加载到内存中，形成一个节点树，允许快速访问任何部分。而SAX是一种事件驱动的解析器，逐行读取...

    JavaScript操作XML文件之XML读取方法

    JavaScript操作XML文件之XML读取方法主要讨论了如何使用JavaScript进行XML文件的读取操作。本文将详细介绍如何在JavaScript中通过DOM（文档对象模型）技术读取XML文件内容，并对文件中的数据进行遍历。 首先，XML...

    JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐) .zip

    3. **解析XML数据** 通过DOM（Document Object Model）接口，我们可以遍历XML文档，提取数据。例如，假设XML文件有以下结构： ```xml &lt;column1&gt;Value1 &lt;column2&gt;Value2 &lt;!-- 更多行... --&gt; ``` 我们...

    JS通用程序库

    根据提供的文件信息，本文将对“JS通用程序库”中的几个关键函数进行详细的解析与说明。此库包含了一些常用的JavaScript函数，旨在简化开发过程并提高代码的可复用性。 ### 1. Trim(str) #### 功能描述 该函数用于...

    C++结构体和json/xml之间互相转换

    在现代软件开发中，数据交换通常涉及JSON（JavaScript Object Notation）和XML（eXtensible Markup Language）这两种格式，它们是网络传输数据的标准格式。JSON因其简洁和易读性而广泛应用于API接口，而XML则在更...

    JavaScript 通用库（一）

    2. **XMLEncode(str)**: 这个函数用于对字符串进行XML编码，以确保字符串在XML文档中正确解析，避免特殊字符导致的解析错误。通常，它会将 `, `&gt;`, `&`, `'`, `"` 等特殊字符替换为对应的XML实体，如 `替换为 `&lt;`...

    ajax-xml-aspnet读存数据基础代码

    - **ajaxxml.aspx.cs**: 这是C#后端代码文件，实现了对Ajax请求的处理逻辑，包括解析XML数据、执行数据库操作等。 - **Default.aspx.cs**: 同样是C#后端代码，负责处理Default.aspx页面上的事件和逻辑。 - **Default...

    xml 中连接数据库的方法

    - 解析返回的结果集，将数据转换为XML格式。 2. **Python + PyODBC 或 MySQLdb** - Python有多种库可以连接数据库，如PyODBC（通用ODBC接口）和MySQLdb（针对MySQL）。 - 使用`pyodbc.connect()`或`MySQLdb....

    基于XML的MVC模型

    - **Common**：这个文件夹可能包含一些通用的脚本或库文件，如XML处理函数，可能被model.asp引用。 综上所述，基于XML的MVC模型利用XML数据岛技术在ASP环境下实现了数据的动态处理和展示，结合MVC设计模式的优点，...

    JavaScript格式化json和xml的方法示例

    1. 解析XML字符串以创建DOM对象。 2. 遍历DOM树，根据元素的层级关系进行适当的缩进。 3. 输出格式化后的XML字符串。 使用原生JavaScript完成上述步骤可能需要一些复杂的操作，因此在实际开发中，我们可能会使用第...

    XML轻松学习手册--XML肯定是未来的发展趋势，不论是网页设计师还是网络程序员，都应该及时学习和了解

    各浏览器开发商已经达成协议，对XML实行严格而挑剔的解析，任何细小的错误都会被报告。你可以将上面的myfile.xml修改一下，比如将改为，然后用IE5直接打开myfile.xml，会得到一个出错信息页面： &lt;?xml version="1.0...

    JavaScript库实现了热敏打印机ESC _ POS协议，并提供了XML接口，用于准备打印模板.zip

    总的来说，这个JavaScript库结合了ESC/POS协议和XML接口，为Web开发者提供了一种便捷的、跨平台的热敏打印机控制工具，简化了在浏览器环境中实现热敏打印的过程。通过深入理解和应用这个库，开发者可以构建出灵活、...

    JQuery解析HTML、JSON和XML实例详解

    最后，JQuery在解析XML文件方面同样表现不俗。XML（eXtensible Markup Language）是一种通用的标记语言，用于存储和传输数据，也是Web服务通信中广泛使用的格式。在本例中，JQuery通过`$.get()`方法获取了一个名为`...

Magicbox
Global site tag (gtag.js) - Google Analytics