最近做的AJAX注册的经验总结

技术：AJAX+Struts1.29+Spring2.5+JdbcTemplate

总的设计其实没什么好讲的，但是这样的情况下，我放弃了hibernate的ORM而改用jdbc的模式，放弃了struts的actionForm而纯AJAX提交表单，而令我大大的增加了工作量。主要还是敲那些信息业务的字段。要想想，注册页面的信息有多少个字段啊。虽然这些大部分日后可以重用。但花费在选择JDBC和AJAX提交的时间，反思之下还在考虑到值得不？当吸取经验吧，下面先反思一下。

struts这次的作用仅仅是作为一个接收AJAX数据的服务端。而用JDBC是因为这次的需求认为改动比较灵活，因为那部分数据改动比较大，用jdbc的话修改表结构起来比较简单（直接修改表然后添加些新字段到SQL语句即可），而hibernate的话修改表结果导致修改的地方就更多了。所以尝试一下了，也当温故知新吧，JDBC快遗忘了。还有一点，相对hibernate，JDBC查询的速度还要快那么点。

其他没什么好讲的，业务和模型层。最大收获就是封装了几个生成省份、部门规模、工作状况等类。这些通常注册页面都用到的。

这次收获最大的还是学习AJAX、JavaScript、DIV以及CSS方面。

第一次真正的投入使用JavaScript的一个出名的framework，“prototype”。这是一个强大的JavaScript工具包，虽然体积相对来说也不少，共130K(1.6.0.3)。但却十分值得你去品味她。

说到JavaScript，我想很多编程人员都会头痛浏览器兼容性的问题。没错，作为view层的每个设计者设置美工，无不为浏览器间的调试而不断努力。因为没有一个老大来统一世界吧(W3C别找我麻烦) 。尽管有W3C在不断的为统一规范努力，但是某些浏览间还是存在差异的，一不小心可能就掉进去陷阱甚至捉迷藏去了。真的很头痛，所以学习好规范是十分重要。

其实说那么多，只是想说，framework的好处就是把这一切多替我们想好了，您只要使用它，就不需要担心兼容性的问题了（前提是她不存在BUG）。但当然了，framework的功能还是有限的，JavaScript的framework也是开源并且不需要编译，你还更容易的查看源码来学习，甚至扩展。目前很多的framework的扩展不断开发中。

好囖，重点部分。

1、IE(IE6及之前版本)的BUG。此BUG在做图片合并的时候触发几率级高。line white space

在<td>和</td>中间，如果直接连着<img>标签的话，有时候图片会在下面无缘无故的添加一条白色的线条。大概1像素高。

如果你有幸遇到这个BUG，恭喜你。正在莫名其妙的查看间距之类的时候，希望看到这个贴。

解决办法：
1.1、 </img>后面一定要连着</td>换行也不行。要问原因就找IE去。
1.2、 把图片的CSS样式加上display: block;

2、监听键盘Enter事件。

直接看代码吧！

Kutil.prototype.isKeyDownEnter = function(e) {

var _bn = getBrowserName();

var _isie = (_bn == browserName.IE) ? true : false;

var _key = '';

if (_isie) {

_key = e.keyCode;

} else {

_key = e.which;

}

if (_key == 13)

return true;

else

return false;

};

调用的时候记得传入e或者even

其中有个判断浏览器的方法，判断方法其实可以很简单，但是因为有其他方法了就直接调用了。或者直接判断是否支持e.keyCode即可了。甚至prototype里面就有判断浏览器的方法了，而且更丰富。我这里就做了是否IE判断而已。兼容性不全面的。不过基于个人习惯吧，还是用自己封装并且熟悉的东西了。

剩下的判断浏览器方法：

var browserName = {

Sa :'Safari',

Fir :'Firefox',

Ope :'Opera',

IE :'Internet Explorer',

Miz :'Mozilla x'

}

function getBrowserName() {

if (navigator.appName.charAt(0) == 'N') {

if (navigator.userAgent.indexOf(browserName.Sa) != -1) {

return browserName.Sa;

} else {

if (navigator.userAgent.indexOf(browserName.Fir) != -1)

return browserName.Fir;

else {

// Gecko

return browserName.Miz;

}

}

} else {

if (navigator.appName.charAt(0) == 'M') {

if (navigator.userAgent.indexOf(browserName.Ope) != -1) {

return browserName.Ope;

} else {

// if(navigator.appVersion.indexOf('MSIE 6')!=1)

return browserName.IE;

}

}

}

}

3、插入css样式。
这个也是常常遇到的，错误示范就不做了。来些正确兼容的。

$('name').style.cssText = 'display=""';

上面例子为给一个原来没有display css样式的元素添加上样式。其中$()为prototype里面的一个方法，等于document.getElementById()。

或者也可以直接点

$('name').className = 'cssName';

红色字体的cssName为对应css样式里面的某样式名。

prototype在这些处理方面也有对应的方法，如addClassName(className)，hasClassName(className)等多元化方法。

4、关于float属性。
div里面加了这个属性之后你会用起来十分舒服，有感觉到了吗？但是之后可能要加上clear或者parentNode加上此属性处理不然会牵涉邻居。但一般不处理其实影响也不大。

5、JavaScript 的 escape 方法

可以把汉字换码，避免乱码情况。

----------------------------------------------

想到的其实就以上几个了，剩下的的其实都是一些思想上学到的东西了。如把OO思想带入JavaScript的代码里面，还有使用prototype的一些常用方法等。

这次任务的时间花得比预期的多很多，心理压力很大。但是代码的重用性的确很高，特别再做注册页面的话。咔咔。使用prototype和JavaScript方面也越来越得心应手了。剩下的就是css方面的进一步研究和学习了，有些名词的作用还是不大清楚的。