JavaScript解析XML格式字符串

我们在做项目的时候，有时会以XML格式来传递数据，比如，后端的读取数据库某条记录，以XML的形式返回给前端，类似如下这样一段XML格式的代码：

<ReqStr>
	<User>
		<UserID>10</UserID>
		<UserCode>XX010</UserCode>
		<UserName>张三</UserName>
		<UserSex>女</UserSex>
		<DepartmentID>1</DepartmentID>
	</User>
	<User>
		<UserID>11</UserID>
		<UserCode>XX011</UserCode>
		<UserName>李四</UserName>
		<UserSex>男</UserSex>
		<DepartmentID>2</DepartmentID>
	</User>
	<User>
		<UserID>12</UserID>
		<UserCode>XX012</UserCode>
		<UserName>王五</UserName>
		<UserSex>男</UserSex>
		<DepartmentID>3</DepartmentID>
	</User>
</ReqStr>

例：前端获取到上面的字符串后，如果要读取XML里的员工号（UserCode），员工姓名（UserName）等信息该如何才能实现呢？

第一步：

把XML格式的字符串转换成XML对象，如下：

function loadXML(flag, xml) {
    var xmlDoc;
    if (window.ActiveXObject) {
        var aVersions = ["MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument", "Microsoft.XmlDom"];
        for (var i = 0; i < aVersions.length; i++) {
            try {
                xmlDoc = new ActiveXObject(aVersions[i]);
                break;
            } catch (oError) {
            }
        }
        if (xmlDoc != null) {
            xmlDoc.async = false;
            if (flag == true) {
                xmlDoc.load(xml);
            } else {
                xmlDoc.loadXML(xml);
            }
            return xmlDoc.documentElement;
        }
    } else {
        if (document.implementation && document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument("", "", null);
            if (xmlDoc != null) {
                if (flag == true) {
                    xmlDoc.async = false;
                    xmlDoc.load(xml);
                } else {
                    var oParser = new DOMParser();
                    xmlDoc = oParser.parseFromString(xml, "text/xml");
                }
                return xmlDoc.documentElement;
            }
        }
    }
    return null;
}

调用上面的方法

var xml = loadXML(false, 'XML格式的字符串');//第二个参数传XML格式的字符串

第二步：

读取XML属性的JS方法，如下：

function getValue(xml,tagName,i){
    if (window.ActiveXObject) {
        return xml.selectNodes(tagName)[i].Text;
    } else {
        return xml.ownerDocument.getElementsByTagName(tagName)[i].firstChild.nodeValue;
    }
}

调用上面的方法

//参数说明
//xml：XML对象
//"UserCode"：元素名
//i：索引
var UserCode = getValue(xml, "UserCode", i);

第三步：

获取XML元素的长度，如下：

function getLen(xml,tagName,i){
    if (window.ActiveXObject) {
        return xml.selectNodes(tagName).length;
    } else {
        return xml.ownerDocument.getElementsByTagName(tagName).length;
    }
}

调用上面的方法

//参数说明
//xml：XML对象
//"UserCode"：元素名
var UserCode = getLen(xml, "UserCode");

最后看段完整的代码：

var Str = "<ReqStr>"+
	"<User>"+
	"<UserID>10</UserID>"+
	"<UserCode>XX010</UserCode>"+
	"<UserName>张三</UserName>"+
	"<UserSex>女</UserSex>"+
	"<DepartmentID>1</DepartmentID>"+
	"</User>"+
	"<User>"+
	"<UserID>11</UserID>"+
	"<UserCode>XX011</UserCode>"+
	"<UserName>李四</UserName>"+
	"<UserSex>男</UserSex>"+
	"<DepartmentID>2</DepartmentID>"+
	"</User>"+
	"<User>"+
	"<UserID>12</UserID>"+
	"<UserCode>XX012</UserCode>"+
	"<UserName>王五</UserName>"+
	"<UserSex>男</UserSex>"+
	"<DepartmentID>3</DepartmentID>"+
	"</User>"+
	"</ReqStr>";
var xml = loadXML(false, Str);
// 遍历节点名称并输出
for (var i = 0; i < getLen(xml, 'User'); i++) {
	console.log(getValue(xml, 'UserID', i));
	console.log(getValue(xml, 'UserCode', i));
	console.log(getValue(xml, 'UserName', i));
	console.log(getValue(xml, 'UserSex', i));
	console.log(getValue(xml, 'DepartmentID', i));
}