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

　　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 version="1.0" encoding="utf-8"?>

　　<xsl:stylesheet version="1.0"

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

　　<xsl:template match="/">

　　<html>

　　<header>

　　<title>table demo</title>

　　<script src="calendar.js" src="calendar.js" type="text/javascript"></script>

　　<script src="myjs.js" src="myjs.js" type="text/javascript"></script>

　　<link type="text/css" href="css/StyleSheet.css" href="css/StyleSheet.css" rel="stylesheet" />

　　</header>

　　<body>

　　<form runat="server">

　　<div width="100%" align="right">

　　<input type="button" onclick="ToEdit()" value="编辑"></input>

　　</div>

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

　　<table width="100%" border="1" cellpadding="0" cellspacing="0" class="admintable">

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

　　<?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>

　　<script src="calendar.js" src="calendar.js" type="text/javascript"></script>

　　<script src="myjs.js" src="myjs.js" type="text/javascript"></script>

　　<link type="text/css" href="css/StyleSheet.css" href="css/StyleSheet.css" rel="stylesheet" />

　　</head>

　　<body>

　　<form id="form1" method="post">

　　<div>

　　<div width="100%" align="right">

　　<input id="btSave" type="button" onclick="Save()" runat="server" value="保存"></input>

　　<input id="btCancel" type="button" onclick="Show()" runat="server" value="取消"></input>

　　</div>

　　<table width="100%" border="1" cellpadding="0" cellspacing="0" class="admintable">

　　<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'">

　　<input type="text">

　　<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'">

　　<input type="text" onclick="setday(this)">

　　<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'">

　　<input type="text">

　　<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'">

　　<input type="text">

　　<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'">

　　<select>

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

　　</xsl:for-each>

　　</table>

　　</div>

　　</form>

　　</body>

　　</html>

　　</xsl:template>

　　</xsl:stylesheet>

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

　　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;

　　}

　　}

　　}

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

　　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;

　　}

　　}

　　}

　　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;

　　}