最近有一個(gè)項(xiàng)目要上,決定struts2+hibernate+spring開(kāi)發(fā),可現(xiàn)在AJAX如火如荼,而且功能上也大大方便了程序員開(kāi)發(fā)和WEB頁(yè)面,如果不用,太對(duì)不起Jesse James Garrett(AJAX的創(chuàng)始人)。可我以前一直是做后臺(tái)的開(kāi)發(fā),對(duì)前臺(tái)的JS知識(shí)是鳳毛麟角,直接嘗試用AJAX,時(shí)間、精力浪費(fèi)不起。后來(lái),在與一同事聊天時(shí),提到了prototype.js,說(shuō)學(xué)會(huì)了這個(gè),AJAX將成囊中之物,姑且對(duì)他的話持保留態(tài)度。但在看了這個(gè)JS的源碼后,真是的柳暗花明又一村。
prototype.js是什么?
讓我來(lái)告訴你,prototype.js是由Sam Stephenson寫(xiě)的一個(gè)javascript類(lèi)庫(kù)。這個(gè)構(gòu)思奇妙,而且兼容標(biāo)準(zhǔn)的類(lèi)庫(kù),能幫助你輕松建立有高度互動(dòng)的web2.0特性的富客戶端頁(yè)面。
如果你最近嘗試使用它,你大概了解到文檔并不是作者的一個(gè)強(qiáng)項(xiàng)。和在我以前使用這個(gè)類(lèi)庫(kù)的不少開(kāi)發(fā)者一樣,一開(kāi)始,我不得不一頭扎進(jìn)閱讀prototype.js的源代碼和實(shí)驗(yàn)它的功能中。因此,如果你是偷懶者,可以在GOOGLE里搜索關(guān)于它的東西。
開(kāi)始創(chuàng)建項(xiàng)目
項(xiàng)目介紹:項(xiàng)目中使用了struts2,spring IOC,主要完成了一個(gè)無(wú)刷新檢測(cè)用戶名是否已經(jīng)在數(shù)據(jù)庫(kù)中注冊(cè)的簡(jiǎn)單功能。
本文重點(diǎn)介紹prototype.js,因此關(guān)于struts2的東西,將不重點(diǎn)講解。
首先看一下,struts2的配置文件:
- <action name="register" method="register" class="userAction">
- <result>/register_success.jspresult>
- <result name="input">/register.jspresult>
- action>
- <action name="check" method="check" class="userAction">
- action>
可以看到這里有兩個(gè)Action,“register”是用戶提交注冊(cè)的,“check”是為用戶名檢測(cè)預(yù)留的。兩個(gè)Action的方法都是在userAction中,而這個(gè)類(lèi)交給了spring來(lái)管理,看以下代碼:
- <bean id="userAction" class="com.caitong.pingou.action.UserAction"
- autowire="byName">
- bean>
然后,我們?cè)倏匆幌聈serAction的東西吧。
java 代碼
- public class UserAction extends ActionSupport {
-
- private User user;
- public User getUser() {
- return user;
- }
-
- public void setUser(User user) {
- this.user = user;
- }
-
- public String execute(){
- return null;
- }
-
-
-
-
-
- public void check(){
- HttpServletResponse response = ServletActionContext.getResponse();
- HttpServletRequest request = ServletActionContext.getRequest();
-
- response.setContentType("text/xml;charset=utf-8");
- response.setHeader("Cache-Control","no-cache");
-
- String name = request.getParameter("user.username");
-
- String msgStr="";
- boolean flag = name.equals("abc");
- if(flag){
- msgStr ="對(duì)不起,此用戶名已經(jīng)存在,請(qǐng)更換用戶名";
- }
- else{
- msgStr ="用戶未被注冊(cè),可以使用!";
- }
-
- try{
- response.getWriter().print(msgStr);
- response.getWriter().close();
- }catch(IOException e){
- e.printStackTrace();
- }
- }
-
-
-
-
-
- public String register(){
- if(!abc".equals(user.getUsername()){
- save(User);
- else
- return INPUT;
- reutrn SUCCESS;
- }
基本上在類(lèi)里已經(jīng)注釋過(guò)了,自己的工程是通過(guò)服務(wù)層來(lái)判斷用戶是否已經(jīng)注冊(cè)過(guò),其中服務(wù)層又是調(diào)用DAO層,所有的CLASS都交給SPRING來(lái)管理,其中標(biāo)識(shí)偽代碼的部份,有興趣的人,可以自己試著寫(xiě)一下,從數(shù)據(jù)庫(kù)取數(shù)據(jù),然后判斷。
最后一起看一下WEB層的register.jsp,prototype將粉墨登場(chǎng)
js 代碼
- <%@ page contentType="text/html; charset=utf-8" %>
- <%@ taglib prefix="s" uri="/struts-tags"%>
-
- <html>
- <head>
- <title>注冊(cè)</title>
- <script language="JavaScript" type="text/javascript"
- src="js/prototype.js"></script>
- <script language="JavaScript">
- function showResponse(originalRequest){
- Element.hide($('load'));
- alert(originalRequest.responseText);
- Form.reset($('register'));
- Field.focus($('user.username'));
-
- }
- function showDiv(){
- Element.show($('load'));
- }
-
- function check(){
- var pars=Form.Element.serialize($('user.username'));
- var url='check.action';
-
- if($F('user.username')==""){
- alert("請(qǐng)輸入姓名!");
- return false;
- }
- else{
- var myAjax = new Ajax.Request(
- url,{method:'get',
- parameters:pars,
- onLoading:showDiv,
- onComplete:showResponse,
- onFailure:reportError});
- }
- }
- function reportError(){
- alert('嚴(yán)重故障,請(qǐng)重試!');
- }
-
-
- </script>
-
- <s:head/>
- </head>
-
- <body>
- <center>
- <br/><br/><br/><br/><br/><br/><br/><br/>
- <p><div id="load" style="display:none">正在驗(yàn)證用戶名,請(qǐng)稍后……</div></p>
-
- <s:form action="regiseter" method="post">
- <s:textfield name="user.username" label="UserName"></s:textfield>
- <input type="button" value="檢測(cè)!" onClick="check()"/>
- <s:textfield name="user.password" label="PassWord"></s:textfield>
- <s:textfield name="user.age" label="Age"></s:textfield>
- <s:textfield name="user.sex" label="Sex"></s:textfield>
- <s:submit></s:submit>
- </s:form>
- </center>
-
- </body>
- </html>

]]>