SpringSide开发实战（六）：AJAX，在地狱中漫步 - 编程入门网

SpringSide开发实战（六）：AJAX，在地狱中漫步

说到AJAX，每个人都不会陌生，毕竟这两年它太流行了。然而，真正哪些地方需要AJAX ，并不是每个人都能够把握得很好。使用AJAX可以开发豪华的基于浏览器的富客户端界面， 然而其开发量的庞大和调试的艰难，让每一个程序员如同生活在地狱中一般。

我认为，真正需要AJAX的不外乎两种情况：

1、用户不希望他关注的信息离开他的视线的时候。比如填写某些表单的时候，有时候辛 辛苦苦填写的东西，一点提交按钮，全没了，如果某个字段验证失败，则所有的东西都要从 头再填，着实让人郁闷。虽然设计较好的网站可以保留用户填写的信息，但是在提交后页面 刷新的一瞬间，用户仍然有一种不安感。

2、用户不希望一点小的更新就刷新整个庞大的页面的时候。比如用户回复一篇很长且充 满图片的文章，虽然回复的内容只有几个字，但是却要等待页面漫长的刷新，也会造成不好 的用户体验。

如果单单只是为了实现绚丽的效果而使用AJAX，我个人认为不可取。

根据以上的总结，我这里想实现这样一个注册用户的功能，让用户在提交信息的时候不 需要刷新页面，所有的字段验证全部发回服务器端进行，验证的错误信息再显示到表单页面 ，整个过程不刷新页面，知道注册成功后跳转到首页，如下图：

1、供用户填写的表单

2、用户填写信息后，表单变为不可编辑，并提示数据正在提交

SpringSide开发实战（六）：AJAX，在地狱中漫步(2)

3、如果验证失败，显示错误信息，同时表单变为可用让用户修改

4、注册成功后，提示注册成功，然后跳转到首页

SpringSide开发实战（六）：AJAX，在地狱中漫步(3)

看似简单的功能，我却足足花了两天时间才搞定，所以形容为在地狱里漫步。下面，大 家会看到我的设计思路和遇到的各种问题。

要做AJAX开发，首先当然少不了挑选一个AJAX框架。我最喜欢的是Prototype，因为我讨 厌复杂的功能。在SpringSide中集成有Prototype，我们只需要在jsp文件中加入如下代码， 就可以使用了：

< script　src ="scripts/prototype.js" ></ script >

事实上，我只使用了Prototype的一个函数，它就是Ajax.Request()，它简化了我们繁琐 的实例化XHR、监控请求状态的过程，语法如下：

var　ajax　=　 new　Ajax.Request(url,　 { method:　" get "　, onComplete:onResponse}　);

method为方法类型，如get,post等；onComplete为回调函数，通常在这个函数中完成对 相应数据的解析和显示。

看似水落石出，只要在用户点击注册按钮的时候调用这个函数就可以做到异步提交数据 了。

SpringSide开发实战（六）：AJAX，在地狱中漫步(4)

问题一、如何将表单中的数据发回服务器？

我们都知道，当我们提交整个网页的时候，其表单中的数据也一并POST过去了，基本上 无需我们操心；而AJAX不然，AJAX向服务器提交请求的时候，除了url，其它屁信息都没有 。没有办法，我们只有自己取出表单中的数据，把它添加到url参数中，然后传递给服务器 。因此，当提交按钮被点击时，我的处理函数是这样的：

function　onSubmit()　{ 　　 var　url　=　 " RegUser.do?method=submit " ; 　　 // 将表单数据添加到url中以便于使用GET传递到服务器 　　　 var　inputs　=　userForm.all.tags( " input " ); 　　 for ( var　i = 0 ; i　<　inputs.length; i ++ )　{ 　　　　 url　=　url　+　 " & "　 +　inputs[i].name　+　 " = "　 +　

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!