ajax简单示例（XML+XSLT+JavaScript+JAVA）（version1）
来源：互联网 发布：极光网络永恒纪元官网 编辑：程序博客网 时间：2024/06/07 22:40
ajax简单示例（XML+XSLT+JavaScript+JAVA）（version1）
简单介绍
这是我前段时间为了培训做的一个demo，用的技术包括XML、XSLT、JavaScript和JAVA，业务是维护组织的列表及组织包括的人员。代码完成70％，但足以演示做法了，我也只是做到这样，让他们自己做一份完整的。
存在问题
这个版本只保证在IE6上运行(稍后再写出兼容ff的版本)
传输方式用的是同步（多是文字传输，延迟不大）
前台处理还没有严格安装mvc的模式去做
基础要求
了解XML和XSLT的基础知识，可以利用XSLT转化简单的XML。
比较熟练的使用JavaScript，会用JavaScript操作DOM。
利用JAVA会简单的XML解析和JDBC的操作。
开发工具
ultraEdit v12
jbuilder 2006
开发思路
开始时把组织和雇员的信息全部查出(初始化时，比只查出组织，而后点击组织再查询并不影响性能)；新增，修改，删除时把需要的数据发送至后台进行处理同时修改本地的dom数据。
文件说明
main.htm 主页面
main.js 主页面的脚本
data.xml 数据
show.xsl 显示数据的xslt
main.jsp 与后台交互的jsp
dealOrg/main.htm 编辑组织的主页面
dealOrg/main.js 编辑组织的主页面脚本
dealOrg/show.xsl 显示 编辑组织主页面的xslt
开发过程
1 用frontpage或是dreamwaver画出静态页面（target.htm）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>
<body>
<div id="divContent" style="WIDTH: 100%; HEIGHT: 100%">
<table height="100%" width="100%" border="1" id="table19">
<tr height="1">
<td align="middle">组织和人员管理</td>
</tr>
<tr height="*">
<td>
<table height="100%" width="100%" border="1" id="table20">
<tr height="50%">
<td>
<table height="100%" width="100%" border="1" id="table21">
<tr height="1">
<td align="middle">组织管理</td>
</tr>
<tr height="1">
<td>
<table cellSpacing="0" cellPadding="0" border="0" id="table22">
<tr>
<td width="1">
<input type="button" value="增加"></td>
<td width="1">
<input type="button" value="修改"></td>
<td width="1">
<input type="button" value="删除"></td>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td>
<table height="100%" width="100%" border="1" id="table23">
<tr height="1">
<td style="OVERFLOW-Y: scroll">
<table width="100%" border="1" id="table24">
<tr>
<th width="50%">组织编号</th>
<th width="50%">组织名称</th>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td>
<div id="divOrg" style="OVERFLOW-Y: scroll; WIDTH: 100%; HEIGHT: 100%">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="50%">
<td>
<table id="table26" height="100%" width="100%" border="1">
<tr height="1">
<td align="middle">人员管理</td>
</tr>
<tr height="1">
<td>
<table id="table27" cellSpacing="0" cellPadding="0" border="0">
<tr>
<td width="1">
<input type="button" value="增加"></td>
<td width="1">
<input type="button" value="修改"></td>
<td width="1">
<input type="button" value="删除"></td>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td>
<table id="table28" height="100%" width="100%" border="1">
<tr height="1">
<td style="OVERFLOW-Y: scroll">
<table id="table29" width="100%" border="1">
<tr>
<th width="50%">人员编号</th>
<th width="50%">人员名称</th>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td>
<div id="divEmp" style="OVERFLOW-Y: scroll; WIDTH: 100%; HEIGHT: 100%">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td align="middle"><input type="button" value="返回"></td>
</tr>
</table>
</div>
</body>
</html>
2 制定xml（data.xml）
<?xml version="1.0" encoding="GBK"?>
<data>
<orgs>
<org>
<code><![CDATA[org1<>]]></code>
<name><![CDATA[name1]]></name>
</org>
<org>
<code><![CDATA[org2]]></code>
<name><![CDATA[name2]]></name>
</org>
</orgs>
<emps selectedOrg="">
<emp org="org1">
<code><![CDATA[emp1]]></code>
<name><![CDATA[name1]]></name>
</emp>
<emp org="org1">
<code><![CDATA[emp2]]></code>
<name><![CDATA[name2]]></name>
</emp>
<emp org="org1">
<code><![CDATA[emp3]]></code>
<name><![CDATA[name3]]></name>
</emp>
<emp org="org2">
<code><![CDATA[emp4]]></code>
<name><![CDATA[name4]]></name>
</emp>
</emps>
</data>
这样的组织形式优点是后台容易查询，缺点前台增加了难度。
3 写出xslt文件（show.xsl）
拷贝target.htm的源码进行修改，按改写为符合xhtml规范，比如原本的<input type="text" size="12">改为<input type="text" size="12"/>
<?xml version="1.0" encoding="GBK"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:apply-templates select="data"></xsl:apply-templates>
</xsl:template>
<xsl:template match="data">
<table height="100%" border="1" width="100%">
<tr height="1">
<td align="center">组织和人员管理</td>
</tr>
<tr height="*">
<td>
<table border="1" width="100%" height="100%">
<tr height="50%">
<td>
<table border="1" width="100%" height="100%">
<tr height="1">
<td align="center">组织管理</td>
</tr>
<tr height="1">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1"><input type="button" value="增加" onClick="addOrg()"/></td>
<td width="1"><input type="button" value="修改" onClick="modifyOrg()"/></td>
<td width="1"><input type="button" value="删除" onClick="delOrg()"/></td>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td>
<table border="1" width="100%" height="100%">
<tr height="1">
<td style="overflow-y:scroll">
<table border="1" width="100%">
<tr>
<th width="50%">组织编号</th>
<th width="50%">组织名称</th>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td>
<div id="divOrg" style="height:100%;width:100%;overflow-y:scroll">
<xsl:apply-templates select="orgs"></xsl:apply-templates>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="50%">
<td>
<table border="1" width="100%" id="table15" height="100%">
<tr height="1">
<td align="center">人员管理</td>
</tr>
<tr height="1">
<td>
<table border="0" id="table16" cellpadding="0" cellspacing="0">
<tr>
<td width="1"><input type="button" value="增加"/></td>
<td width="1"><input type="button" value="修改"/></td>
<td width="1"><input type="button" value="删除"/></td>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td>
<table border="1" width="100%" id="table17" height="100%">
<tr height="1">
<td style="overflow-y:scroll">
<table border="1" width="100%" id="table18">
<tr>
<th width="50%">人员编号</th>
<th width="50%">人员名称</th>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td>
<div id="divEmp" style="height:100%;width:100%;overflow-y:scroll">
<xsl:apply-templates select="emps"></xsl:apply-templates>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td align="center"><input type="button" value="返回"/></td>
</tr>
</table>
</xsl:template>
<xsl:template match="orgs">
<table border="1" width="100%" style="word-break:break-all" id="tbOrg">
<xsl:apply-templates select="org"></xsl:apply-templates>
</table>
</xsl:template>
<xsl:template match="org">
<tr orgCode="{code}" style="cursor:hand" onClick="selectOrg(this)" onDblClick="modifyThisOrg(this)">
<td width="50%"><xsl:value-of select="code"/> </td>
<td width="50%"><xsl:value-of select="name"/> </td>
</tr>
</xsl:template>
<xsl:template match="emps">
<xsl:variable name="selectedOrg" select="@selectedOrg"/>
<xsl:if test="$selectedOrg = ''">
</xsl:if>
<xsl:if test="$selectedOrg != ''">
<table border="1" width="100%" style="word-break:break-all">
<xsl:apply-templates select="emp[@org = $selectedOrg]"></xsl:apply-templates>
</table>
</xsl:if>
</xsl:template>
<xsl:template match="emp">
<tr>
<td width="50%"><xsl:value-of select="code"/> </td>
<td width="50%"><xsl:value-of select="name"/> </td>
</tr>
</xsl:template>
</xsl:stylesheet>
直到用xsl显示xml符合要求
4 添加main.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>组织和人员管理</title>
<script language="javascript" src="main.js"></script>
</head>
<body onLoad="init()" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" scroll="no">
<div id="divContent" style="height:100%;width:100%"></div>
</body>
</html>
5 添加main.js
var domDoc;
var selectedOrgTr;
function loadData(){
domDoc = new ActiveXObject('Microsoft.XMLDOM');
domDoc.async=false;
domDoc.load("data.xml");
return true;
}
function showData(){
var xslDoc = new ActiveXObject('Microsoft.XMLDOM');
xslDoc.async=false;
xslDoc.load("show.xsl");
selectedOrgTr = null;
divContent.innerHTML = domDoc.documentElement.transformNode(xslDoc);
}
function init(){
if(!loadData()){
return;
}
showData();
}
function openDealDialog(nodeXml){
var argArr = new Array();
argArr[0] = nodeXml;
return showModalDialog("dealOrg/main.htm",argArr,"dialogWidth:400px;dialogHeight:200px;resizable:yes");
}
function showOrg(){
var xslDoc = new ActiveXObject('Microsoft.XMLDOM');
xslDoc.async=false;
xslDoc.load("show.xsl");
divOrg.innerHTML = domDoc.documentElement.selectSingleNode("/data/orgs").transformNode(xslDoc);
}
function showEmp(){
var xslDoc = new ActiveXObject('Microsoft.XMLDOM');
xslDoc.async=false;
xslDoc.load("show.xsl");
divEmp.innerHTML = domDoc.documentElement.selectSingleNode("/data/emps").transformNode(xslDoc);
}
function addOrg(){
var newOrgXml="<org isNew='Y'><code><![CDATA[]]></code><name><![CDATA[]]></name></org>";
var rt = openDealDialog(newOrgXml);
if(rt != null){
rt.documentElement.selectSingleNode("/org").setAttribute("isNew","N");
var orgCode = rt.documentElement.selectSingleNode("/org/code").text;
var orgName = rt.documentElement.selectSingleNode("/org/name").text;
domDoc.documentElement.selectSingleNode("//orgs").appendChild(rt.documentElement);
var newTr = tbOrg.insertRow();
newTr.setAttribute("onDblClick","modifyThisOrg(this)");
var newTd0 = newTr.insertCell(0);
newTd0.innerHTML = orgCode;
var newTd1 = newTr.insertCell(1);
newTd1.innerHTML = orgName;
showOrg();
}
}
function delOrg(){
if(selectedOrgTr == null){
alert("请选择需要删除的组织！");
return false;
}
var delNode = domDoc.documentElement.selectSingleNode("//org[code='"+selectedOrgTr.orgCode+"']");
delNode.parentNode.removeChild(delNode);
var nodeList = domDoc.documentElement.selectNodes("//emp[@org='"+selectedOrgTr.orgCode+"']");
for(var i=0; i<nodeList.length;i++){
var node = nodeList[i];
node.parentNode.removeChild(node);
}
tbOrg.deleteRow(selectedOrgTr.rowIndex);
domDoc.documentElement.selectSingleNode("//emps/@selectedOrg").text="";
showEmp();
}
function modifyOrg(){
if(selectedOrgTr == null){
alert("请选择需要修改的组织！");
return false;
}
var modifyNode = domDoc.documentElement.selectSingleNode("/data/orgs/org[code='"+selectedOrgTr.orgCode+"']");
modifyNode.setAttribute("isNew","N");
var modifyOrgXml = modifyNode.xml;
var rt = openDealDialog(modifyOrgXml);
if(rt != null){
rt.documentElement.selectSingleNode("/org").setAttribute("isNew","N");
var orgCode = rt.documentElement.selectSingleNode("/org/code").text;
var orgName = rt.documentElement.selectSingleNode("/org/name").text;
domDoc.documentElement.selectSingleNode("//orgs").replaceChild(rt.documentElement, modifyNode);
selectedOrgTr.cells[0].innerHTML = orgCode;
selectedOrgTr.cells[1].innerHTML = orgName;
showOrg();
}
}
function selectOrg(trObj){
if(selectedOrgTr != null){
selectedOrgTr.bgColor="#FFFFFF";
}
selectedOrgTr = trObj;
selectedOrgTr.bgColor="#EE33EE";
domDoc.documentElement.selectSingleNode("/data/emps").setAttribute("selectedOrg",selectedOrgTr.orgCode);
showEmp();
}
function modifyThisOrg(trObj){
var modifyNode = domDoc.documentElement.selectSingleNode("/data/orgs/org[code='"+trObj.orgCode+"']");
modifyNode.setAttribute("isNew","N");
var modifyOrgXml = modifyNode.xml;
var rt = openDealDialog(modifyOrgXml);
if(rt != null){
rt.documentElement.selectSingleNode("/org").setAttribute("isNew","N");
var orgCode = rt.documentElement.selectSingleNode("/org/code").text;
var orgName = rt.documentElement.selectSingleNode("/org/name").text;
domDoc.documentElement.selectSingleNode("//orgs").replaceChild(rt.documentElement, modifyNode);
selectedOrgTr.cells[0].innerHTML = orgCode;
selectedOrgTr.cells[1].innerHTML = orgName;
showOrg();
}
}
至此首页面可以显示了，还要编写，添加和修改组织的代码，添加和修改雇员的代码（不写了，和组织类似）。
6 dealOrg/main.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>组织管理</title>
<script language="javascript" src="main.js"></script>
</head>
<body onLoad="init()" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" scroll="no">
<div id="divContent" style="height:100%;width:100%"></div>
</body>
</html>
7 dealOrg/main.htm
<?xml version="1.0" encoding="GBK"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:apply-templates select="org"></xsl:apply-templates>
</xsl:template>
<xsl:template match="org">
<xsl:variable name="flag" select="@isNew"/>
<table border="1" width="100%">
<tr height="1">
<td align="center">组织管理</td>
</tr>
<tr height="*">
<td>
<table border="1" width="100%" id="table2">
<tr>
<td width="50%" align="right">组织编号：</td>
<td width="50%">
<input type="text" id="txOrgCode" value="{code}" size="20">
<xsl:if test="$flag = 'N'">
<xsl:attribute name="disabled">true</xsl:attribute>
</xsl:if>
</input>
</td>
</tr>
<tr>
<td width="50%" align="right">组织名称：</td>
<td width="50%"><input type="text" id="txOrgName" value="{name}" size="20"/></td>
</tr>
</table>
</td>
</tr>
<tr height="1">
<td>
<table border="0" width="100%">
<tr>
<td width="*/2"> </td>
<td width="1"><input type="button" value="确定" onClick="onClkOk()"/></td>
<td width="3"> </td>
<td width="1"><input type="button" value="取消" onClick="onClkCancel()"/></td>
<td width="*/2"> </td>
</tr>
</table>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
8 dealOrg/main.js
var domDoc;
function loadData()
{
domDoc = new ActiveXObject('Microsoft.XMLDOM');
domDoc.async=false;
domDoc.loadXML(dialogArguments[0]);
return true;
}
function showData()
{
var xslDoc = new ActiveXObject('Microsoft.XMLDOM');
xslDoc.async=false;
xslDoc.load("show.xsl");
divContent.innerHTML = domDoc.documentElement.transformNode(xslDoc);
}
function init()
{
if(!loadData()){
return;
}
showData();
}
function onClkOk(){
domDoc.documentElement.selectSingleNode("/org/code").text=txOrgCode.value;
domDoc.documentElement.selectSingleNode("/org/name").text=txOrgName.value;
returnValue = domDoc;
window.close();
}
function onClkCancel(){
window.close();
}
参考
Microsoft XML Core Services (MSXML) 4.0
备注
还有前后台交互等等没有写，不过已经足以说明问题了，想要完整的代码，可以留下email，或email给我（lyncn@126.com,liyanningcn@gmail.com）
- ajax简单示例（XML+XSLT+JavaScript+JAVA）（version1）
- 【重要】XSLT学习（九）通过JavaScript转化xml
- XML与XSLT（续）
- Ajax---（Asynchronous JavaScript + XML）
- Ajax 简单的XSLT转换
- Javascript控制XSlt转换XML
- Java小项目--坦克大战（version1.0）
- [JavaScript]AJAX方法简单示例——1（.load()方法）
- JavaScript实现Ajax请求简单示例
- JavaScript实现Ajax请求简单示例
- JavaScript 原生ajax的简单示例
- JavaScript读取XML文件的简单示例
- [XML]学习笔记（八）XSLT
- XSLT学习（一） xml转换
- XSLT学习（十一）编辑xml
- [Ajax]AJAX的简单应用（加法运算示例）
- iGoogle 自定义新闻主页(AJAX+XSLT+XML)
- iGoogle 自定义新闻主页(AJAX+XSLT+XML)
- 另类方法把数据导出成excel
- 跟我一起写 Makefile
- 无奈
- 3香港公司3G提供业务
- 由今天开始，我也要使用Blog了！:)
- ajax简单示例（XML+XSLT+JavaScript+JAVA）（version1）
- 北京待售商品房数量信息将在网上全面公示
- AXD 与 时钟中断!!!
- 检查锁情况的三种方法
- 从ACM会议看中国大陆计算机科学与国外的差距-- 灵芯
- 在切分窗口中固定切分条的位置
- scarborough fair (song)
- 4510B BootLoader!!!!!!!!!
- 类间数据传递问题
