js动态生成xml数据格式

最新推荐文章于 2025-06-21 12:00:00 发布

原创最新推荐文章于 2025-06-21 12:00:00 发布 · 1.1w 阅读

10 ·

CC 4.0 BY-SA版权

JS中实用的小方法专栏收录该内容

16 篇文章

订阅专栏

博客介绍了如何使用JavaScript动态生成XML数据，并分享了简化生成过程的方法，以及对初步尝试XML数据解析的简单探讨，目前支持解析单层结构的XML标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后来才发现我们只需这样把字符串按xml的形式传递给底层即可.

 var xml='<Setup>'+  
    '<ProtocolList>'+ 
        '<Protocol>'+  
            '<Name> onvif </Name>'+
            '<UserName> admin </UserName>'+
            '<PassWord> admin </PassWord>'+   
            '<Port> 8000 </Port>'+
            '<MediaPort> 8000 </MediaPort>'+
        '</Protocol>'+
        '<Protocol>'+ 
            '<Name> rtsp </Name>'+
            '<UserName> admin </UserName>'+
            '<PassWord> admin </PassWord>'+ 
            '<Port>8088</Port>'+
            '<MediaPort> 554 </MediaPort>'+
        '</Protocol>'+
        '<Protocol>'+ 
            '<Name> infinova </Name>'+
            '<UserName> admin </UserName>'+
            '<PassWord> admin </PassWord>'+ 
            '<Port> 90 </Port>'+
            '<MediaPort> 90 </MediaPort>'+  
        '</Protocol>'+
    '</ProtocolList>'+ 
    '<Function>'+
        '<PlayBack> onvif </PlayBack>'+  
        '<Other> rtsp </Other>'+
    '</Function>'+
'</Setup>'

更新于2017/5/19：在学习了一段时间的React后，知道了其实虚拟DOM就是用js对象结构来表示一个DOM结构，然后进行动态生成和操作，类比我这里生成的XML数据，没有那么复杂，不用去管属性，我这边只需要生成XML格式数据就好，就跟生成HTML标签一样，所以决定借鉴后改一下，这样就不用傻傻地一个个去生成了。

<Setup>  
    <ProtocolList>  
        <Protocol> 
            <Name> onvif </Name>  
            <UserName > admin </UserName>  
            <PassWord > admin </PassWord>  
            <Port> 8000 </Port>  
            <MediaPort> 8000 </MediaPort> 
        </Protocol> 
        <Protocol> 
            <Name> rtsp </Name> 
            <UserName> admin </UserName> 
            <PassWord> admin </PassWord>  
            <Port>8088</Port>  
            <MediaPort> 554 </MediaPort>  
        </Protocol>
        <Protocol>  
            <Name> infinova </Name> 
            <UserName> admin </UserName>
            <PassWord> admin </PassWord> 
            <Port> 90 </Port> 
            <MediaPort> 90 </MediaPort> 
        </Protocol>
    </ProtocolList>  
    <Function> 
        <PlayBack> onvif </PlayBack> 
        <Other> rtsp </Other> 
    </Function>
</Setup >

动态生成：

    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)

目前只能解析形如:<xxx>data</xxx>还没进行嵌套的处理

parseXml(tag,tagName,dataArray)

tag为xml格式的数据

tagName为需要解析的数据的标签名

dataArray为存放数据的数组