JavaScript XML封装类实现与使用详解

作者:青柠时间:2026-10-23 19:25:51浏览:261

本文介绍了一个用于简化XML操作的JavaScript封装类。该类通过检测浏览器类型,兼容IE的ActiveXObject与非IE标准的DOMParser,实现了从字符串加载XML、从URL获取XML、解析节点路径及获取节点值等功能。文中提供了完整的封装代码及具体的调用DEMO,展示了如何处理XML数据并提取所需信息,适用于需要在前端进行XML数据处理的场景。

XML封装类核心实现

具体实现代码如下所示:

function XMLObject() {
{ 
this.isIE = true;
if (window.ActiveXObject) { isIE = true; } else { isIE = false; }
var node_xml;
var xmlDoc;
if (isIE) {
xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
} 
} else {
if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("", "", null);
} 
} 
xmlDoc.async = false;
xmlDoc.resolveExternals = false;
xmlDoc.validateOnParse = false;
xmlDoc.preserveWhiteSpace = true;
// 从字符串创建XML对象(接收XML字符串参数)
this.LoadXMLForString = function (XMLStr) {
{ 
if (isIE) {
{ 
xmlDoc.loadXML(XMLStr);
} 
} else {
{ 
var oParser = new DOMParser();
xmlDoc = oParser.parseFromString(XMLStr, "text/xml");
} 
} 
// 从外部文件创建XML对象(接收文件路径参数)
this.getXMLForURL = function (url) {
{ 
// xmlDoc.load(url);
if (isIE) {
xmlDoc.load(url);
} 
} else {
{ 
xmlDoc = getXML(url).responseXML;
} 
} 
// 获取指定路径下的节点数组
this.getXMLArray = function (name) {
var keys = name.split('.');
var node = xmlDoc.documentElement; // 获取根节点
var rtn = new Array();
var n = 0;
for (var i = 0; i < keys.length; i++) {
var childs = node.childNodes; // 获取子节点列表
var key = keys[i];
for (var k = 0; k < childs.length; k++) {
var child = childs[k];
if (child.nodeName == key) { // 判断子节点名称是否匹配
if (i == keys.length - 1) {
rtn[n] = child;
n++;
} else {
node = child;
break;
} 
} 
} 
} 
node_xml = rtn;
return rtn;
} 
// 获取指定节点的文本值
this.getNodeValue = function (name) {
{ 
return this.getValue(xmlDoc, name);
} 
// 根据节点对象获取其下子节点的内容
this.getValue = function (node, name) {
{ 
var keys = name.split('.');
for (var i = 0; i < keys.length; i++)
{ 
var childs = node.childNodes; // 获取子节点列表
var key = keys[i];
for (var k = 0; k < childs.length; k++)
{ 
var child = childs[k];
if (child.nodeName == key)
{ // 判断子节点名称是否匹配
if (child.childNodes.length == 1)
{ 
// 若无子节点,则返回文本值
if (!window.ActiveXObject)
{ 
return childs[k].textContent;
} 
else
{ 
return childs[k].text
} 
} 
} else {
{ 
// 若还有子节点,继续向下分析
node = child;
break;
} 
} 
} 
} 
return "";
} 
function GetXMLHTTP() {
{ 
var xmlhttp;
if (window.ActiveXObject) {
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
} else if (window.XMLHttpRequest)
{ xmlhttp = new XMLHttpRequest(); }
return xmlhttp;
} 
function getXML(url) {
var xmlHttp = GetXMLHTTP();
if (xmlHttp != null) {
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
} else {
alert("Your browser does not support XMLHTTP.11");
return false;
} 
return xmlHttp;
} 
} 

XML操作调用示例

调用方法DEMO


具体调用代码如下:

var strXML = "<?xml version='1.0' encoding='utf-8'?><ekuy><user><name><cnname>小猪</cnname></name><age>27</age></user><user><name><cnname>小霞</cnname></name><age>26</age></user><user><name><cnname>小章</cnname></name><age>25</age></user></ekuy>";
var XMLObj = new XMLObject();
XMLObj.LoadXMLForString(strXML)
// XMLObj.getXMLForURL("test.xml");
var list = XMLObj.getXMLArray('user'); // 获取节点数组
document.write(XMLObj.getNodeValue('ekuy.user.name.cnname')); // 直接获取节点内容
// 循环节点,获取节点下子节点内容
for (var i = 0; i < list.length; i++) {
var obj = list[i];
document.write(XMLObj.getValue(obj, 'name.cnname'));
document.write(XMLObj.getValue(obj, 'age'));
document.write('<br\/>');
} 

代码功能较为简单,仅供参考。

作者最新文章