读取XML数据，在页面中展现、编辑、保存的实现

 

      最近需要做这样一个需求，数据保存在XML里，在页面上通过表格显示其内容，可以修改内容，再保存到XML。下面把做这个东西的过程记录下来，做个笔记，也给需要的人一些帮助。

      首先考虑用什么方法做，考虑到三个方式：1、C#拼HTML构造table，修改和保存通过Ajax实现。2、XML+XSL，展现和修改用两个XSL文件来做，Ajax修改、保存XML。3、GridView控件。

经过细致考虑，首先第三方案GridView控件满足不了需求，因为XML格式多样，可能涉及到很多的行、列合并和行、列表头合并。第一方案太麻烦，坐起来是细致活和体力活，需求变动后不好修改。所以选择第二方案。开始学习XPath、XSLT。AJAX用js异步调用一般处理文件(ashx)的方式。

1、实现选择框（通过Ajax读取数据库，绑定数据）的绑定时出现错误，最终发现是在读取XML时使用了异步方式与Ajax有冲突，用同步就可以解决了。

2、保存XML。修改后的数据怎么保存到XML了？通过Javascript保存，js不能保存，如果用js保存必须用hta；用AJax保存，怎么能让修改后的XML传到AJAX方法里去，瞎琢磨，试了几种方法，还真让我试出来了，源码

 

js：

var $=function (id){return document.getElementById(id);} var xmlHttp; var curControl; var curValue; function ToEdit(){ var xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.load("myxml.xml"); var xsl = new ActiveXObject("Microsoft.XMLDOM"); xsl.async = false; xsl.load("myxsl_edit.xsl"); document.write(xml.transformNode(xsl)); document.close(); //绑定选择框 LoadSelect(); } //保存xml function Save(){ var oDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");//负责得到响应结果 oDoc.async = false; oDoc.resolveExternals = false; oDoc.load("myxml.xml"); var data = oDoc.selectNodes("//Data[@IsEdit='1']");//读取所有请求大类所属小类的类名 for(var i=0; i < data.length; i++) { var nodeEdit; var nodeID; var nodeType; for(var j=0; j<data[i].attributes.length; j++) { if(data[i].attributes[j].nodeName=="IsEdit") { nodeEdit = data[i].attributes[j].nodeValue; } else if(data[i].attributes[j].nodeName=="id") { nodeID = data[i].attributes[j].nodeValue; } else if(data[i].attributes[j].nodeName=="Type") { nodeType = data[i].attributes[j].nodeValue; } } if(nodeType=="Combox") { var combox = $(nodeID); if(combox!=null) { if(combox.options.length>0) data[i].text = combox.options[combox.selectedIndex].value; } } else { data[i].text = $(nodeID).value; } } var strXML = oDoc.xml; var url="saveXML.ashx"; StartRequest(url,null,AfterEdit,strXML,"POST"); } function AfterEdit() { //可以不用下面两个if语句，没有用异步方式 if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var rtn = xmlHttp.responseText; if(rtn=="true") { alert("保存成功！"); } else { alert("保存失败！"); } Show(); } } } function Show() { // Load XML var xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.load("myxml.xml"); // Load XSL var xsl = new ActiveXObject("Microsoft.XMLDOM"); xsl.async = false; xsl.load("myxsl.xsl"); document.write(xml.transformNode(xsl)); document.close(); } ///绑定下选择框 function LoadSelect() { var allcontrols = document.all; for(var j=0;j<allcontrols.length;j++) { if(allcontrols[j].tagName=="SELECT") { var datainfo = allcontrols[j].flex; //datainfo:tablename^value^name^selectedvalue var datainfo_sp = datainfo.split('</p>); if(datainfo_sp.length>2) { var selectID = datainfo_sp[0]; var selectedValue = datainfo_sp[2]; var datainfo_sp_sp = datainfo_sp[1].split('^'); var table = datainfo_sp_sp[0]; var value = datainfo_sp_sp[1]; var text = datainfo_sp_sp[2]; var control = $(selectID); var param = "table=" + table + "&value=" + value + "&text=" + text; curControl = control; curValue = selectedValue; var callback = BindSelect; StartRequest("getDataSet.ashx", param, BindSelect,null,"GET"); } } } } function BindSelect() { //可以不用下面两个if语句，没有用异步方式 if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var control = curControl; var selectedValue = curValue; var data = xmlHttp.responseText; if(data != null || data !="") { control.add(new Option("","")); var data_sp = data.split('</p>); for(var i=0; i<data_sp.length; i++) { var data_sp_sp = data_sp[i].split('^'); if(data_sp_sp.length>1) control.add(new Option(data_sp_sp[1], data_sp_sp[0])); } for(var i =0;i<control.options.length;i++) { if(control.options[i].value == selectedValue) { control.selectedIndex = i; break; } } } } } } ///绑定下选择框 ///实现Ajax/// function StartRequest(url,param,callback,sendString,type) { if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest();//mozilla浏览器 } else if(window.ActiveXObject) { try { xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");//ＩＥ旧版本 } catch(e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//ＩＥ新版本 } catch(e) { } } if(!xmlHttp) { window.alert("不能创建XMLHTTPREQUEST对象!"); return false; } } var strURL = url + (param != "" && param!=null ? "?" + param : ""); sendString = "param=" + sendString; xmlHttp.open(type,strURL,false); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") xmlHttp.onreadystatechange=callback; xmlHttp.send(sendString); }  

xml

<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="demo.xsl"?> <Content Name="Content1"> <Table ExpandedColumnCount="9" ExpandedRowCount="16" DefaultColumnWidth="60" DefaultRowHeight="14.25"> <Row> <Cell MergeAcross="9" align="center" Type="title"> <Data id="ID1" Type="String">统计</Data> </Cell> </Row> <Row> <Cell MergeDown="2" Type="header"> <Data id="ID2" Type="String">类别</Data> </Cell> <Cell MergeDown="2" Type="header"> <Data id="ID3" Type="String">系数</Data> </Cell> <Cell MergeAcross="7" Type="header"> <Data id="ID4" Type="String">分析</Data> </Cell> </Row> <Row> <Cell Type="header"> <Data id="ID5" Type="String">比例1</Data> </Cell> <Cell Type="header"> <Data id="ID6" Type="String">比例2</Data> </Cell> <Cell Type="header"> <Data id="ID7" Type="String">比例3</Data> </Cell> <Cell Type="header"> <Data id="ID8" Type="String">比例4</Data> </Cell> <Cell Type="header"> <Data id="ID9" Type="String">比例5</Data> </Cell> <Cell Type="header"> <Data id="ID10" Type="String">比例6</Data> </Cell> <Cell Type="header"> <Data id="ID11" Type="String">比例7</Data> </Cell> </Row> <Row> <Cell MergeDown="4" Type="header"> <Data id="ID12" Type="String">红</Data> </Cell> <Cell Type="content"> <