ajax简单示例（XML+XSLT+JavaScript+JAVA）（version1）
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）
| 组织和人员管理 | ||||||||||||||||||||||
| ||||||||||||||||||||||
2 制定xml（data.xml）
]]>
这样的组织形式优点是后台容易查询，缺点前台增加了难度。
3 写出xslt文件（show.xsl）
拷贝target.htm的源码进行修改，按改写为符合xhtml规范，比如原本的改为
组织和人员管理
组织管理
组织编号
组织名称
人员管理
人员编号
人员名称
直到用xsl显示xml符合要求
4 添加main.htm
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="
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
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
7 dealOrg/main.htm
组织管理
组织编号：
组织名称：
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给我（[email protected],[email protected]）