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

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

首先考虑用什么方法做，考虑到三个方式：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"?>

<Row>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Cell>

</Row>

<Row>

</Cell>

</Row>

</Table>

</Content>

显示页的xsl

复制代码代码如下:

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"

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

<xsl:template match="/">

<html>

<title>table demo</title>

</header>

<body>

</div>

<xsl:for-each select="/Content/Table">

<xsl:variable name="width">

<xsl:value-of select="concat(@DefaultColumnWidth,'px')"/>

</xsl:variable>

<xsl:variable name="height">

<xsl:value-of select="@DefaultRowHeight"/>

</xsl:variable>

<xsl:variable name="columncount">

<xsl:value-of select="@ExpandedColumnCount"/>

</xsl:variable>

<xsl:variable name="rowcount">

<xsl:value-of select="@ExpandedRowCount"/>

</xsl:variable>

<xsl:for-each select="Row">

<tr>

<xsl:variable name="oncetime">

<xsl:choose>

<xsl:when test="position()=1">

<xsl:value-of select="1"/>

</xsl:when>

<xsl:when test="position()!=1">

<xsl:value-of select="n "/>

</xsl:when>

</xsl:choose>

</xsl:variable>

<xsl:for-each select="Cell">

<td>

<xsl:attribute name="align">

<xsl:choose>

<xsl:when test="@align!=''">

<xsl:value-of select="@align"/>

</xsl:when>

<xsl:when test="boolean('true')">center</xsl:when>

</xsl:choose>

</xsl:attribute>

<xsl:attribute name="class">

<xsl:choose>

<xsl:when test="@Type='title'">title</xsl:when>

<xsl:when test="@Type='header'">header</xsl:when>

<xsl:when test="@Type='content'">content</xsl:when>

<xsl:when test="boolean('true')">other</xsl:when>

</xsl:choose>

</xsl:attribute>

<xsl:if test="position()=1">

<xsl:attribute name="height">

<xsl:value-of select="$height"/>

</xsl:attribute>

</xsl:if>

<xsl:if test="$oncetime=1 and @MergeDown=''">

<xsl:attribute name="width">

<xsl:value-of select="$width"/>

</xsl:attribute>

</xsl:if>

<xsl:if test="@MergeDown!=''">

<xsl:attribute name="rowspan">

<xsl:value-of select="@MergeDown"/>

</xsl:attribute>

</xsl:if>

<xsl:if test="@MergeAcross!=''">

<xsl:attribute name="colspan">

<xsl:value-of select="@MergeAcross"/>

</xsl:attribute>

</xsl:if>

<xsl:value-of select="Data/text()"/>

</td>

</xsl:for-each>

</tr>

</xsl:for-each>

</table>

</xsl:for-each>

</form>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

编辑页的xsl

复制代码代码如下:

<?xml version="1.0" encoding="utf-16"?>

<xsl:stylesheet version="1.0"

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

<xsl:output method="html"/>

<xsl:template match="/">

<html>

<head>

<title>table demo</title>

</head>

<body>

<div>

</div>

<xsl:for-each select="Content/Table">

<xsl:variable name="width">

<xsl:value-of select="concat(@DefaultColumnWidth,'px')"/>

</xsl:variable>

<xsl:variable name="height">

<xsl:value-of select="@DefaultRowHeight"/>

</xsl:variable>

<xsl:variable name="columncount">

<xsl:value-of select="@ExpandedColumnCount"/>

</xsl:variable>

<xsl:variable name="rowcount">

<xsl:value-of select="@ExpandedRowCount"/>

</xsl:variable>

<xsl:for-each select="Row">

<tr>

<xsl:variable name="oncetime">

<xsl:choose>

<xsl:when test="position()=1">

<xsl:value-of select="1"/>

</xsl:when>

<xsl:when test="position()!=1">

<xsl:value-of select="n "/>

</xsl:when>

</xsl:choose>

</xsl:variable>

<xsl:for-each select="Cell">

<td>

<xsl:attribute name="align">

<xsl:choose>

<xsl:when test="@align!=''">

<xsl:value-of select="@align"/>

</xsl:when>

<xsl:when test="boolean('true')">center</xsl:when>

</xsl:choose>

</xsl:attribute>

<xsl:attribute name="class">

<xsl:value-of select="'adminth'"/>

</xsl:attribute>

<xsl:if test="position()=1">

<xsl:attribute name="height">

<xsl:value-of select="$height"/>

</xsl:attribute>

</xsl:if>

<xsl:if test="$oncetime=1 and @MergeDown=''">

<xsl:attribute name="width">

<xsl:value-of select="$width"/>

</xsl:attribute>

</xsl:if>

<xsl:if test="@MergeDown!=''">

<xsl:attribute name="rowspan">

<xsl:value-of select="@MergeDown"/>

</xsl:attribute>

</xsl:if>

<xsl:if test="@MergeAcross!=''">

<xsl:attribute name="colspan">

<xsl:value-of select="@MergeAcross"/>

</xsl:attribute>

</xsl:if>

<xsl:attribute name="class">

<xsl:choose>

<xsl:when test="@Type='title'">title</xsl:when>

<xsl:when test="@Type='header'">header</xsl:when>

<xsl:when test="@Type='content'">content</xsl:when>

<xsl:when test="boolean('true')">other</xsl:when>

</xsl:choose>

</xsl:attribute>

<xsl:for-each select="Data">

<xsl:choose>

<xsl:when test="@IsEdit='1' and @Type='String'">

<xsl:attribute name="value">

<xsl:value-of select="text()"/>

</xsl:attribute>

<xsl:attribute name="id">

<xsl:value-of select="@id"/>

</xsl:attribute>

<xsl:attribute name="style">

<xsl:value-of select="concat('width:',$width)"/>

</xsl:attribute>

</input>

</xsl:when>

<xsl:when test="@IsEdit='1' and @Type='Date'">

<xsl:attribute name="value">

<xsl:value-of select="text()"/>

</xsl:attribute>

<xsl:attribute name="id">

<xsl:value-of select="@id"/>

</xsl:attribute>

<xsl:attribute name="style">

<xsl:value-of select="concat('width:',concat(string(number(translate($width,'px',''))+30),'px'))"/>

</xsl:attribute>

</input>

</xsl:when>

<xsl:when test="@IsEdit='1' and @Type='Number'">

<xsl:attribute name="value">

<xsl:value-of select="text()"/>

</xsl:attribute>

<xsl:attribute name="id">

<xsl:value-of select="@id"/>

</xsl:attribute>

<xsl:attribute name="style">

<xsl:value-of select="concat('width:',$width)"/>

</xsl:attribute>

</input>

</xsl:when>

<xsl:when test="@IsEdit='1' and @Type='Double'">

<xsl:attribute name="value">

<xsl:value-of select="text()"/>

</xsl:attribute>

<xsl:attribute name="id">

<xsl:value-of select="@id"/>

</xsl:attribute>

<xsl:attribute name="style">

<xsl:value-of select="concat('width:',$width)"/>

</xsl:attribute>

</input>

</xsl:when>

<xsl:when test="@IsEdit='1' and @Type='Combox'">

<xsl:attribute name="id">

<xsl:value-of select="@id"/>

</xsl:attribute>

<xsl:attribute name="flex">

<xsl:value-of select="concat(concat(@id,'</p><p><br></p>),concat(@DataSource,'</p><p><br></p>),concat(text(),'</p><p><br></p>))"></xsl:value-of>

</xsl:attribute>

<xsl:attribute name="style">

<xsl:value-of select="concat('width:',$width)"/>

</xsl:attribute>

</select>

</xsl:when>

<xsl:when test="boolean('true')">

<span>

<xsl:value-of select="text()"/>

<xsl:attribute name="id">

<xsl:value-of select="@id"/>

</xsl:attribute>

<xsl:attribute name="style">

<xsl:value-of select="concat('width:',$width)"/>

</xsl:attribute>

</span>

</xsl:when>

</xsl:choose>

</xsl:for-each>

</td>

</xsl:for-each>

</tr>

</xsl:for-each>

</table>

</div>

</form>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

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

复制代码代码如下:

<%@ WebHandler Language="C#" %>

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代码

复制代码代码如下:

<%@ WebHandler Language="C#" %>

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;

}

主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Show();

</script>

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;

}

显示数据页图

编辑数据页图