由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示。我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。现在我们就以我做的这个添加管理员,验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术。
首先我们来看一下我们的form表单:
- <td>
- 用户名
- </td>
- <td>
- <input type="text" name="admin.username" value=""
- οnblur="checkusername(this,'AdminAction!exists')" />
- </td>
- <td>
- <span id="namemessage" style="color: red;"></span>
- </td>
- </tr>
- <tr bgColor="#d6fdd0">
- <td>
- 密码
- </td>
- <td>
- <input type="password" name="admin.password" value="" />
- </td>
- <td>
- <span></span>
- </td>
- </tr>
- <script type="text/javascript">
- var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象
- function checkusername(field, url) {
- var uername = field.value;
- if (uername == "" || uername.length < 3) {
- document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";
- return;
- } else {
- if (window.ActiveXObject) // IE浏览器
- {
- xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
- } else if (window.XMLHttpRequest) //除IE外的其他浏览器实现
- {
- xmlHttpRequest = new XMLHttpRequest();
- }
- if (null != xmlHttpRequest) {
- //当利用get方法访问服务器端时带参数的话,直接在"AjaxServlet"后面加参数, 下面send方法为参数null就可以,用post方法这必须在把参数加在send参数内,如下
- xmlHttpRequest.open("get", url+"?admin.username="+uername, true);
- //关联好ajax的回调函数
- xmlHttpRequest.onreadystatechange = ajaxCallback;
- //真正向服务器端发送数据
- // 使用post方式提交,必须要加上如下一行,get方法就不必加此句
- xmlHttpRequest.setRequestHeader("Content-Type",
- "application/x-www-form-urlencoded");
- xmlHttpRequest.send(null);
- }
- }
- }
- function ajaxCallback() { //ajax一次请求会改变四次状态,所以我们在第四次(即一次请求结束)进行处理就OK,
- if (xmlHttpRequest.readyState == 4) { //请求成功
- if (xmlHttpRequest.status == 200) {
- var responseText = xmlHttpRequest.responseText;
- document.getElementById("namemessage").innerHTML = responseText;
- }
- }
- }
- </script>
通过上面的注释我想大家应该能看懂一些内容吧,我们首先去验证填写的内容是否为空,如果为空就给用户以提示。如果不为空的话就去判断一下当前的浏览器,然后根据浏览器去设置xmlHttpRequest对象,xmlHttpRequest对象是什么东西呢?XMLHttpRequest 对象用于在后台与服务器交换数据的对象,他主要的作用:
· 在不重新加载页面的情况下更新网页
· 在页面已加载后从服务器请求数据
· 在页面已加载后从服务器接收数据
· 在后台向服务器发送数据
XMLHttpRequest是Ajax最核心的对象,它有以下几个重要的方法或属性:
●open():建立到服务器的新请求。
●send():向服务器发送请求。
●abort():退出当前请求。
●readyState:提供当前 HTML 的就绪状态。
●responseText:服务器返回的请求响应文本。
其中XMLHttpRequest 对象的 open() 方法有以下五个参数:
●request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。
●url:要连接的 URL。
●asynch:如果希望使用异步连接则为true,否则为 false。该参数是可选的,默认为 true。
●username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。
●password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。
通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。
得到XMLHttpRequest 对象之后,我们就利用这个对象去后台执行我们的请求,在执行我们请求的时候一定要注意关联好我们的回调函数:xmlHttpRequest.onreadystatechange = ajaxCallback;这里的回调函数的名字可以随便起,并不是固定死的。我们可以看到我们上面的程序请求是发送给了AdminAction中的exists方法了,好,下面我们去action方法里面去看一下:
- public String exists() throws Exception{
- System.out.println(admin==null);
- boolean boo=dao.exists(admin.getUsername());
- //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图
- HttpServletResponse response = ServletActionContext.getResponse();
- //设置字符集
- response.setCharacterEncoding("UTF-8");
- PrintWriter out = response.getWriter();
- if(boo){
- //直接输入响应的内容
- out.println("*用户名已存在*");
- /**格式化输出时间**/
- out.flush();
- out.close();
- }
- out.println("*用户名可用*");
- return null;
- }
熟悉ajax的同学看到这段代码应该很清楚了吧。这里主要是利用了PrintWriter 来把我们的后台信息输出到我们的前台,这里我 就不详细解释了。好了,写到这,我们这个利用struts2+ajax实现的我们的异步验证。下面就是具体的实现效果: