1、实时校验Struts利用AJAX实现“实时校验”-验证用户注册时的用户名称是否重名的应用 1、验证用户注册时的用户名称是否重名的应用(1)常规的实现方法在某个用户注册的应用中,当用户注册时检查用户名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待服务器返回信息,继续操作。(2)利用Ajax技术来实现以上的操作则不必等待服务器返回信息用户输入用户名或企业名称的时候,当输入文本框失去焦点(用户的名称输入完毕)的时候,则会自动向服务器发出请求,用户继续做下面的操作,不必点击“检查”,也不必等待服务器返回信息,检查与用户操作是异步的,可同时进行。当服务器信息返回的时候
2、,会自动在面页相应位置显示返回信息,不必刷新页面,相当于局部刷新的效果。(3)本例的时序图1、新建一个Web应用的Project,名称为StrutsAJAXWebApp,同时再添加一个Web组件,其Context的名称为StrutsAJAXWebApp将产生出下面的状态2、添加Struts的系统包3、在Web应用中添加一个包含有注册表单的JSP页面(1)页面名称为userRegister.jsp(2)编辑该JSP以添加一个实现注册的表单,并对用户在注册表单中所输入的用户的名称进行实时检查 userRegister.jsp !- - 用户名称: 用户密码: 4、再添加JavaScript的函数文
3、件common.js设置编辑器中的编码方式编程该common.js文件,其内容如下var httpRequest;function chkUserName() var requestURL = /StrutsAJAXWebApp/register.do?userName=+document.all.userName.value; httpRequest=getHTTPRequestObject(); httpRequest.onreadystatechange = processHttpResponse; httpRequest.open(GET, requestURL, true); htt
4、pRequest.send(null);function getHTTPRequestObject() var httpRequestObject; if (window.XMLHttpRequest) / Mozilla, Safari, . httpRequestObject = new XMLHttpRequest(); else if (window.ActiveXObject) / IE try httpRequestObject = new ActiveXObject(Microsoft.XMLHTTP); catch (e) try httpRequestObject= new
5、ActiveXObject(Msxml2.XMLHTTP); catch (e2) alert(您的浏览器有问题!); return httpRequestObject;function processHttpResponse() if(httpRequest.readyState = 4) if(httpRequest.status = 200) if(httpRequest.responseText!=) /出现错误时 document.getElementById(showStr).style.display = ; document.getElementById(userName).s
6、tyle.background= #FF0000;document.getElementById(showStr).innerText = httpRequest.responseText; /来自响应的原始数据document.getElementById (submitButton).disabled = true; else /没有出现错误时 document.getElementById(userName).style.background= #FFFFFF; document.getElementById(showStr).style.display = none;document.
7、getElementById (submitButton).disabled = false; else if(httpRequest.status = 404) alert(没有找到与所请求的文件相匹配的资源!); else alert(你所请求的页面发生异常,错误代码为:+httpRequest.status); else document.getElementById(showStr).innerHTML = 正在检测用户名称的合法性,请稍等.; 注意:中文问题改变编码5、添加ActionForm组件com.px1987.webajax.actionform.RegisterAction
8、Form ,registerActionForm,org.apache.struts.action.ActionFormuserPassWord 和userName private String userName; private String userPassWord; String action=null;/* * Generated by MyEclipse Struts * Template path: templates/java/JavaClass.vtl */package com.px1987.webajax.actionform;import javax.servlet.ht
9、tp.HttpServletRequest;import org.apache.struts.action.ActionErrors;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionMapping;/* * MyEclipse Struts * Creation date: 09-21-2007 * * XDoclet definition: * struts.form name=registerActionForm */public class RegisterActionFor
10、m extends ActionForm /* * Generated fields */ /* userName property */ private String userName; /* userPassWord property */ private String userPassWord; String action=null; /* * Generated Methods */ /* * Method validate * param mapping * param request * return ActionErrors */ public ActionErrors vali
11、date(ActionMapping mapping, HttpServletRequest request) / TODO Auto-generated method stub return null; /* * Method reset * param mapping * param request */ public void reset(ActionMapping mapping, HttpServletRequest request) / TODO Auto-generated method stub /* * Returns the userName. * return Strin
12、g */ public String getUserName() return userName; /* * Set the userName. * param userName The userName to set */ public void setUserName(String userName) this.userName = userName; /* * Returns the userPassWord. * return String */ public String getUserPassWord() return userPassWord; /* * Set the user
13、PassWord. * param userPassWord The userPassWord to set */ public void setUserPassWord(String userPassWord) this.userPassWord = userPassWord; public String getAction() return action; public void setAction(String action) this.action = action; 5、添加一个Action以对该表单进行响应和处理(1)类名称为RegisterAction,包名称为com.px198
14、7.webajax.action(2)/register将产生出该Action(3)编程该Actionpackage com.px1987.webajax.action;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.Action;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForw
15、ard;import org.apache.struts.action.ActionMapping;import com.px1987.webajax.actionform.RegisterActionForm;import java.io.*;public class RegisterAction extends Action public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) Registe
16、rActionForm registerActionForm = (RegisterActionForm) form;/ TODO Auto-generated method stub String action = request.getParameter(action); if(action.equals(1) doGet(request,response); return mapping.findForward(registerSuccess); public void doGet(HttpServletRequest request, HttpServletResponse respo
17、nse) String action = request.getParameter(action); if(action.equals(1) String userName = request.getParameter(userName); try userName = new String(userName.getBytes(ISO-8859-1), gb2312); catch (UnsupportedEncodingException e) / TODO 自动生成 catch 块 e.printStackTrace(); String errorText=null; if(userNam
18、e.equals(yang) /实际应该改变为查找数据库表来判断有无该用户名存在 errorText = 对不起,此用户名已经存在,请更换用户名注册!; else errorText = ; response.setContentType(text/html; charset=GBK); PrintWriter out; try out = response.getWriter(); out.print(errorText); out.flush(); catch (IOException e) / TODO 自动生成 catch 块 e.printStackTrace(); 7、添加regi
19、sterSuccess.jsp registerSuccess.jsp !- - 您的同步的注册请求被正确地处理了! 8、registerSuccess6、执行该Web页面(1)再部署该应用(2)输入http:/localhost:8080/StrutsAJAXWebApp/userRegister.jsp当我们输入用户名称为:yang时,将出现下面的错误提示内容。(3)如果所输入的用户名称不是为“yang”,此时的submit按钮将改变为“可用”的状态。最后进行提交后则出现下面的正确提交的提示。改进前面的Web应用以实际访问数据库表来获得验证的目标1、再在本 Project中添加一个数据连接
20、接口组件(1)数据连接组件的接口ConnectDBInterface,包名称为com.px1987.webajax.dao(2)编程该接口package com.px1987.webajax.dao;import java.sql.*;public interface ConnectDBInterface public Connection getConnection(); public void closeDBCon();注意:通过接口可以隐藏实现类中的细节,同时只向上层曝露公共方法。2、为上面的接口ConnectDBInterface提供一个实现类(1)类名称为ConnectDBBean,
21、包名称为com.px1987.webajax.dao(2)编程该ConnectDBBean类package com.px1987.webajax.dao;import java.sql.*;public class ConnectDBBean implements ConnectDBInterface/* 下面为采用JDBC-ODBC桥方式*/ String JDBC_ODBC_URL = jdbc:odbc:WebStudyDSN; String JDBC_ODBC_DBDriver = sun.jdbc.odbc.JdbcOdbcDriver;/* 下面为采用JDBC-JTDS 的驱动连接
22、方式*/String JDBC_JTDS_MSSqlServer_DBDriver = net.sourceforge.jtds.jdbc.Driver ;String JDBC_MSSqlServer_URL = jdbc:jtds:sqlserver:/127.0.0.1:1433/WebStudyDB; private java.sql.Connection con = null; public ConnectDBBean() JDBC_ODBC_Connect(); public void JDBC_ODBC_Connect() try /Class.forName(JDBC_ODBC_DBDriver); Class.forName(JDBC_JTDS_MSSqlServer_DBDriver); catch (java.lang.ClassNotFoundException e) /在此先不考虑异常处理 System.out.println(不能正确地加载J
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1