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

最新推荐文章于 2022-05-21 22:51:08 发布

原创最新推荐文章于 2022-05-21 22:51:08 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #prototype #hibernate #jdbc #struts

AJAX 同时被 2 个专栏收录

2 篇文章

订阅专栏

笔记

2 篇文章

订阅专栏

本文分享了使用AJAX和Prototype框架进行Web开发的经验，包括解决IE浏览器图片显示问题、监听键盘事件、插入CSS样式等内容，并探讨了JavaScript编程技巧。

    技术：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方面的进一步研究和学习了，有些名词的作用还是不大清楚的。