最近做的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事件。

     直接看代码吧！

1. Kutil.prototype.isKeyDownEnter = function(e) {
2.     var _bn = getBrowserName();
3.     var _isie = (_bn == browserName.IE) ? true : false;
4.     var _key = '';
5.     if (_isie) {
6.         _key = e.keyCode;
7.     } else {
8.         _key = e.which;
9.     }
10.     if (_key == 13)
11.         return true;
12.     else
13.         return false;
14. };

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

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

     剩下的判断浏览器方法：

1. var browserName = {
2.     Sa :'Safari',
3.     Fir :'Firefox',
4.     Ope :'Opera',
5.     IE :'Internet Explorer',
6.     Miz :'Mozilla x'
7. }
8. function getBrowserName() {
9.     if (navigator.appName.charAt(0) == 'N') {
10.         if (navigator.userAgent.indexOf(browserName.Sa) != -1) {
11.             return browserName.Sa;
12.         } else {
13.             if (navigator.userAgent.indexOf(browserName.Fir) != -1)
14.                 return browserName.Fir;
15.             else {
16.                 // Gecko
17.                 return browserName.Miz;
18.             }
19.         }
20.     } else {
21.         if (navigator.appName.charAt(0) == 'M') {
22.             if (navigator.userAgent.indexOf(browserName.Ope) != -1) {
23.                 return browserName.Ope;
24.             } else {
25.                 // if(navigator.appVersion.indexOf('MSIE 6')!=1)
26.                 return browserName.IE;
27.             }
28.         }
29.     }
30. }

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

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

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

     或者也可以直接点

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

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

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

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

 

 

    5、JavaScript 的 escape 方法

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

 

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

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

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