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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:43 PM

javascriptxml

首先考虑用什么方法做，考虑到三个方式：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 { 
var nodeEdit; 
var nodeID; 
var nodeType; 
for(var j=0; 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{ 
if(allcontrols[j].tagName=="SELECT") 
{ 
var datainfo = allcontrols[j].flex; 
//datainfo:tablename^value^name^selectedvalue 
var datainfo_sp = datainfo.split('); 
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('); 
for(var i=0; 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{ 
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

统计

类别

系数

分析

比例1

比例2

比例3

比例4

比例5

比例6

比例7

红

1

01

5.0

2009-10-05

21111

21

21

21

2

2

3

4

4

2

2

2

3

1

2

4

4

2

1

1

小计：

绿

4

4

4

4

4

2

4

4

5

4

4

4

4

2

4

4

6

3

4

4

4

2

3

3

7

4

4

4

4

4

4

4

8

4

4

4

4

3

4

4

9

4

4

4

4

1

5.0

2009-10-14

小计：

蓝

10

4

4

4

4

1

5.0

2009-10-14

11

4

4

4

4

1

5.0

2009-10-14

12

4

4

4

4

1

5.0

2009-10-14

小计：

显示页的xsl

复制代码代码如下:

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

编辑页的xsl

复制代码代码如下:

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

ajax实现得到数据集的ashx代码

复制代码代码如下:

 
 
using System; 
using System.Web; 
using System.Data; 
using System.Data.SqlClient; 
using System.Text; 
using DHCC.HISHR.BO; 
public class getDataSet : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string result = ""; 
string table = context.Request.Params["table"].ToString().Trim(); 
string value = context.Request.Params["value"].ToString().Trim(); 
string text = context.Request.Params["text"].ToString().Trim(); 
string sql = "SELECT " + value + "," + text + " FROM HISHR." + table + " "; 
BOSQLExecuter SQLexec = new BOSQLExecuter(); 
DataSet ds = SQLexec.GetDataSetSQLExecuter(sql); 
if (ds != null) 
if (ds.Tables.Count > 0) 
{ 
DataTable dt = ds.Tables[0]; 
foreach (DataRow dr in dt.Rows) 
{ 
result += "$" + dr[value].ToString() + "^" + dr[text].ToString(); 
} 
if (result.Length > 0) 
result = result.Substring(1); 
} 
//根据ＨＴＴＰ局部请求返回流到页面 
context.Response.Write(result); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 

ajax保存XML的ashx代码

复制代码代码如下:

 
 
using System; 
using System.Web; 
using System.Xml; 
using System.IO; 
public class saveXML : IHttpHandler 
{ 
public string xml; 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string path = System.Web.HttpContext.Current.Request.PhysicalApplicationPath; 
string strXML =context.Request.Form[0]; 
try 
{ 
if (File.Exists(path + "\\myxml.xml")) 
{ 
XmlDocument xmldoc = new XmlDocument(); 
xmldoc.LoadXml(strXML); 
xmldoc.Save(path + "\\myxml.xml"); 
context.Response.Write("true"); 
} 
} 
catch 
{ 
context.Response.Write("false"); 
} 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 

主页面

css

复制代码代码如下:

 
table.admintable { 
border:1px solid #AEDEF2; 
border-collapse: collapse; 
} 
td.other{ 
color: #0066cc; 
font-size:13px; 
color:#05B; 
font-family: 新宋体; 
border:1px solid #AEDEF2; 
} 
td.title { 
width: 671px; 
color: #0066cc; 
background-color: #eef6fe; 
font-size:15px; 
color:#05B; 
border:1px solid #AEDEF2; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#AEDEF2,endColorStr=ghostwhite); 
} 
td.header { 
width: 671px; 
color: #0066cc; 
background-color: #eef6fe; 
font-size:14px; 
color:#05B; 
border:1px solid #AEDEF2; 
} 
td.content { 
border:1px solid #AEDEF2; 
background:ghostwhite; 
font-size:13px; 
font-family: 新宋体; 
color: #333; 
} 