js动态生成xml数据格式
后来才发现我们只需这样把字符串按xml的形式传递给底层即可.
var xml=''+
''+
''+
' onvif '+
' admin '+
' admin '+
' 8000 '+
' 8000 '+
' '+
''+
' rtsp '+
' admin '+
' admin '+
'8088 '+
' 554 '+
' '+
''+
' infinova '+
' admin '+
' admin '+
' 90 '+
' 90 '+
' '+
' '+
''+
' onvif '+
' rtsp '+
' '+
' '
更新于2017/5/19：在学习了一段时间的React后，知道了其实虚拟DOM就是用js对象结构来表示一个DOM结构，然后进行动态生成和操作，类比我这里生成的XML数据，没有那么复杂，不用去管属性，我这边只需要生成XML格式数据就好，就跟生成HTML标签一样，所以决定借鉴后改一下，这样就不用傻傻地一个个去生成了。
onvif
admin
admin
8000
8000
rtsp
admin
admin
8088
554
infinova
admin
admin
90
90
onvif
rtsp
动态生成：
function CreatXmlDoc(obj){
this.tagName=obj.tagName;
var children=obj.children.map(function(item){
if(typeof item =="object")
{
item=new CreatXmlDoc(item)
}
return item
})
this.children=children;
}
CreatXmlDoc.prototype.render=function(){
var el=document.createElement(this.tagName);
var children=this.children || [];
children.forEach(function(child){
var childEl=(child instanceof CreatXmlDoc)
? child.render()
:document.createTextNode(child)
el.appendChild(childEl);
})
return el
}
var obj={
tagName:'Setup',
children:[
{
tagName:'ProtocolList',
children:[
{
tagName:'Protocol',
children:[
{
tagName:'Name',
children:["onvif"]
},
{
tagName:'UserName',
children:["admin"]
},
{
tagName:'PassWord',
children:["admin"]
},
{
tagName:'Port',
children:["8000"]
},
{
tagName:'MediaPort',
children:["8000"]
},
]
},
{
tagName:'Protocol',
children:[
{
tagName:'Name',
children:["onvif"]
},
{
tagName:'UserName',
children:["admin"]
},
{
tagName:'PassWord',
children:["admin"]
},
{
tagName:'Port',
children:["8000"]
},
{
tagName:'MediaPort',
children:["8000"]
},
]
},
{
tagName:'Protocol',
children:[
{
tagName:'Name',
children:["onvif"]
},
{
tagName:'UserName',
children:["admin"]
},
{
tagName:'PassWord',
children:["admin"]
},
{
tagName:'Port',
children:["8000"]
},
{
tagName:'MediaPort',
children:["8000"]
},
]
},
]
},
{
tagName:'Function',
children:[
{
tagName:'PlayBack',
children:["onvif"]
},
{
tagName:'Other',
children:["rtsp"]
}
]
}
]
}
doc=new CreatXmlDoc(obj);
SetupSerial=(new XMLSerializer()).serializeToString(doc.render());
var reg = new RegExp(' xmlns="http://www.w3.org/1999/xhtml"',"g");
SetupSerial=SetupSerial.replace(reg,"");
console.log(SetupSerial);
(兼容IE8)
动态生成：
Array.prototype.map = function(callback,context){
context = context || window;
var newAry = [];
for(var i = 0,len = this.length; i < len;i++) {
if(typeof callback === 'function') {
var val = callback.call(context,this[i],i,this);
newAry[newAry.length] = val;
}
}
return newAry;
}
function CreatXmlDoc(obj){
this.tagName=obj.tagName;
var children=obj.children.map(function(item){
if(typeof item =="object")
{
item=new CreatXmlDoc(item)
}
return item
})
this.children=children;
}
CreatXmlDoc.prototype.render=function(){
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var el=xmlDoc.createElement(this.tagName);
var children=this.children || [];
children.map(function(child){
var childEl=(child instanceof CreatXmlDoc)
? child.render()
:xmlDoc.createTextNode(child)
el.appendChild(childEl);
})
return el
}
var xmlObj={
tagName:'Setup',
children:[
{
tagName:'ProtocolList',
children:[
{
tagName:'Protocol',
children:[
{
tagName:'Name',
children:["onvif"]
},
{
tagName:'UserName',
children:["admin"]
},
{
tagName:'PassWord',
children:["admin"]
},
{
tagName:'Port',
children:["8000"]
},
{
tagName:'MediaPort',
children:["8000"]
},
]
},
{
tagName:'Protocol',
children:[
{
tagName:'Name',
children:["onvif"]
},
{
tagName:'UserName',
children:["admin"]
},
{
tagName:'PassWord',
children:["admin"]
},
{
tagName:'Port',
children:["8000"]
},
{
tagName:'MediaPort',
children:["8000"]
},
]
},
{
tagName:'Protocol',
children:[
{
tagName:'Name',
children:["onvif"]
},
{
tagName:'UserName',
children:["admin"]
},
{
tagName:'PassWord',
children:["admin"]
},
{
tagName:'Port',
children:["8000"]
},
{
tagName:'MediaPort',
children:["8000"]
},
]
},
]
},
{
tagName:'Function',
children:[
{
tagName:'PlayBack',
children:["onvif"]
},
{
tagName:'Other',
children:["rtsp"]
}
]
}
]
}
doc=new CreatXmlDoc(xmlObj);
console.log(doc.render().xml)
这样操作起来就方便多了，而且结构也是金字塔式，既方便我们观看，又节约了代码；
2017/5/31今天又来试一下解析xml数据，由于目前只是初步尝试，所以解析数据的时候还没有进行"深解析"；
var doc=new CreatXmlDoc(
"Setup",
[
new CreatXmlDoc(
"Protocol",
[
new CreatXmlDoc(
"Name",
[
new CreatXmlDoc(
"Name1",
[
"onvif1"
]
),
]
),
new CreatXmlDoc(
"Name2",
[
new CreatXmlDoc(
"Name1",
[
"onvif1"
]
),
]
),
]
),
]
)
var res=[];
function parseXml(tag,tagName,dataArray){
$($.parseXML(tag)).find(tagName).each(function(i,item)
{
if(item.childNodes[0].nodeValue!=null)
{
dataArray.push(item.childNodes[0].nodeValue);
}
})
}
var doc=doc.render().xml;
parseXml(doc,"Name1",res)
console.log(res)
目前只能解析形如:
parseXml(tag,tagName,dataArray)
tag为xml格式的数据
tagName为需要解析的数据的标签名
dataArray为存放数据的数组