js处理xml（不同浏览器兼容）
2018-09-25 本文已影响0人
帅气滴糟老头
记录下工作中用到的处理xml的通用代码，顺便吐槽下IE（#狗头）
区分当前浏览器是不是ie浏览器
window.ActiveXObject说明：
ie10以下，window.ActiveXObject返回一个对象，可以用 !!window.ActiveXObject 来判断是否是ie浏览器。
但是从ie11开始，window.ActiveXObject返回的是undefined，但是尽管如此，window.ActiveXObject === undefined 在ie11中是不成立的。下图是在ie11控制台做的测试结果：
ie11测试
其他非ie浏览器（如chrome，firefox，opera，甚至ie的亲弟弟edge），window.ActiveXObject都是undefined，但是和ie11不同，window.ActiveXObject === undefined是成立的，下面只举例在chrome控制台做的测试结果：
chrome测试
所以现在可以用window.ActiveXObject !== undefined来判断当前浏览器，返回true就说明是ie浏览器。
String字符串与xml对象间的互相转换：
/**
* 字符串转xml对象
* @param xmlString
* @returns {*}
* @constructor
*/
function string2Xml(xmlString) {
if (window.ActiveXObject !== undefined) { // for IE
var xmlObject = new ActiveXObject("Microsoft.XMLDOM");
xmlObject.async = "false";
xmlObject.loadXML(xmlString);
return xmlObject;
}
else { // for other browsers
var parser = new DOMParser();
var xmlObject = parser.parseFromString(xmlString, "text/xml");
return xmlObject;
}
}
/**
* xml对象转字符串
* @param xmlObject
* @returns {*}
* @constructor
*/
function xml2String(xmlObject) {
if (window.ActiveXObject !== undefined) { // for IE
return xmlObject.xml;
}
else { // for other browsers
return (new XMLSerializer()).serializeToString(xmlObject);
}
}
xml对象转json对象
ie浏览器不支持children属性，只能用childNodes属性，下面是xml对象转json的代码实现，可以当做工具类使用：
/**
* 将xml对象转json对象
* @param xml
*/
function Xml2Json(xml) {
var js_obj = {};
if (xml.nodeType === Node.ELEMENT_NODE) { // 元素节点
var _attr = xml.attributes;
if (_attr.length > 0) {
for (var j = 0; j < _attr.length; j++) {
// 属性前面用‘@’标注，可以自定义
js_obj['@' + _attr[j].nodeName] = _attr[j].value;
}
}
} else if (xml.nodeType === Node.TEXT_NODE) { // 文本
// 下面正则意思是去掉文本里的空格换行和回车
js_obj = (xml.nodeValue.replace(/[\ +\r\n]/g, "") === "") ? "" : xml.nodeValue;
}
if (xml.hasChildNodes()) {
var nodes = xml.childNodes;
for (var i = 0; i < nodes.length; i++) {
var nodeName = nodes[i].nodeName;
if (typeof(js_obj[nodeName]) === "undefined") {
var _jsObj = Xml2Json(nodes[i]); // 递归
if (_jsObj !== "") {
js_obj[nodeName] = _jsObj;
}
} else {
if (typeof(js_obj[nodeName].push) === "undefined") {
var old = js_obj[nodeName];
js_obj[nodeName] = [];
js_obj[nodeName].push(old);
}
var _jsObj = Xml2Json(nodes[i]); // 递归
if (_jsObj !== "") {
js_obj[nodeName].push(_jsObj);
}
}
}
}
return js_obj;
}
节点类型（xml.nodeType）判断：
Node.ELEMENT_NODE：值为1，元素节点
Node.TEXT_NODE：值为3，文本
Node.COMMENT_NODE：值为8，注释节点
Node.DOCUMENT_NODE：值为9，document节点
下面的是综合上面代码实现的xml对象转json对象的html页面，可以用浏览器打开查看运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现xml转json</title>
</head>
<script type="text/javascript">
/**
* 字符串转xml对象
* @param xmlString
* @returns {*}
* @constructor
*/
function string2Xml(xmlString) {
if (window.ActiveXObject !== undefined) { // for IE
var xmlObject = new ActiveXObject("Microsoft.XMLDOM");
xmlObject.async = "false";
xmlObject.loadXML(xmlString);
return xmlObject;
}
else { // for other browsers
var parser = new DOMParser();
var xmlObject = parser.parseFromString(xmlString, "text/xml");
return xmlObject;
}
}
/**
* 将xml对象转json对象
* @param xml
*/
function Xml2Json(xml) {
var js_obj = {};
if (xml.nodeType === Node.ELEMENT_NODE) { // 元素节点
var _attr = xml.attributes;
if (_attr.length > 0) {
for (var j = 0; j < _attr.length; j++) {
// 属性前面用‘@’标注，可以自定义
js_obj['@' + _attr[j].nodeName] = _attr[j].value;
}
}
} else if (xml.nodeType === Node.TEXT_NODE) { // 文本
js_obj = (xml.nodeValue.replace(/[\ +\r\n]/g, "") === "") ? "" : xml.nodeValue;
}
if (xml.hasChildNodes()) {
var nodes = xml.childNodes;
for (var i = 0; i < nodes.length; i++) {
var nodeName = nodes[i].nodeName;
if (typeof(js_obj[nodeName]) === "undefined") {
var _jsObj = Xml2Json(nodes[i]); // 递归
if (_jsObj !== "") {
js_obj[nodeName] = _jsObj;
}
} else {
if (typeof(js_obj[nodeName].push) === "undefined") {
var old = js_obj[nodeName];
js_obj[nodeName] = [];
js_obj[nodeName].push(old);
}
var _jsObj = Xml2Json(nodes[i]); // 递归
if (_jsObj !== "") {
js_obj[nodeName].push(_jsObj);
}
}
}
}
return js_obj;
}
// xml字符串
var xmlstr = '<?xml version="1.0" encoding="UTF-8"?> '+
'<students>'+
'<student id="1" no="20010001" name="张三" sex="男">'+
'<birthday>1999-1-1</birthday>'+
'</student>'+
'<student id="2" no="20010002" name="李四" sex="男">'+
'<birthday>1998-1-1</birthday>'+
'</student>'+
'</students>';
var xml_Obj = string2Xml(xmlstr);
var json_Obj = Xml2Json(xml_Obj);
document.write(JSON.stringify(json_Obj));
console.log(JSON.stringify(json_Obj));
</script>
<body>
</body>
</html>
运行结果如下：
{
"students": {
"student": [
{
"@id": "1",
"@no": "20010001",
"@name": "张三",
"@sex": "男",
"birthday": {
"#text": "1999-1-1"
}
},
{
"@id": "2",
"@no": "20010002",
"@name": "李四",
"@sex": "男",
"birthday": {
"#text": "1998-1-1"
}
}
]
}
}
