由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示。我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。现在我们就以我做的这个添加管理员,验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术。

首先我们来看一下我们的form表单:

  1. <td>
  2. 用户名
  3. </td>
  4. <td>
  5. <input type="text" name="admin.username" value=""
  6. onblur="checkusername(this,'AdminAction!exists')" />
  7. </td>
  8. <td>
  9. <span id="namemessage" style="color: red;"></span>
  10. </td>
  11. </tr>
  12. <tr bgColor="#d6fdd0">
  13. <td>
  14. 密码
  15. </td>
  16. <td>
  17. <input type="password" name="admin.password" value="" />
  18. </td>
  19. <td>
  20. <span></span>
  21. </td>
  22. </tr>

我们可以看到当我们的用户名的文本域注册了一个onblur事件,当用户名这个文本域失去焦点的时候我们就会让他去执行checkusername方法,好,下面让我们来看一下我们的js是怎么实现的ajax:

  1. <script type="text/javascript">
  2. var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象
  3. function checkusername(field, url) {
  4. var uername = field.value;
  5. if (uername == "" || uername.length < 3) {
  6. document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";
  7. return;
  8. } else {
  9. if (window.ActiveXObject) // IE浏览器
  10. {
  11. xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  12. } else if (window.XMLHttpRequest) //除IE外的其他浏览器实现
  13. {
  14. xmlHttpRequest = new XMLHttpRequest();
  15. }
  16. if (null != xmlHttpRequest) {
  17. //当利用get方法访问服务器端时带参数的话,直接在"AjaxServlet"后面加参数,                   下面send方法为参数null就可以,用post方法这必须在把参数加在send参数内,如下
  18. xmlHttpRequest.open("get", url+"?admin.username="+uername, true);
  19. //关联好ajax的回调函数
  20. xmlHttpRequest.onreadystatechange = ajaxCallback;
  21. //真正向服务器端发送数据
  22. // 使用post方式提交,必须要加上如下一行,get方法就不必加此句
  23. xmlHttpRequest.setRequestHeader("Content-Type",
  24. "application/x-www-form-urlencoded");
  25. xmlHttpRequest.send(null);
  26. }
  27. }
  28. }
  29. function ajaxCallback() { //ajax一次请求会改变四次状态,所以我们在第四次(即一次请求结束)进行处理就OK,
  30. if (xmlHttpRequest.readyState == 4) { //请求成功
  31. if (xmlHttpRequest.status == 200) {
  32. var responseText = xmlHttpRequest.responseText;
  33. document.getElementById("namemessage").innerHTML = responseText;
  34. }
  35. }
  36. }
  37. </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方法里面去看一下:

  1. public String exists() throws Exception{
  2. System.out.println(admin==null);
  3. boolean boo=dao.exists(admin.getUsername());
  4. //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图
  5. HttpServletResponse response = ServletActionContext.getResponse();
  6. //设置字符集
  7. response.setCharacterEncoding("UTF-8");
  8. PrintWriter out = response.getWriter();
  9. if(boo){
  10. //直接输入响应的内容
  11. out.println("*用户名已存在*");
  12. /**格式化输出时间**/
  13. out.flush();
  14. out.close();
  15. }
  16. out.println("*用户名可用*");
  17. return null;
  18. }

熟悉ajax的同学看到这段代码应该很清楚了吧。这里主要是利用了PrintWriter 来把我们的后台信息输出到我们的前台,这里我 就不详细解释了。好了,写到这,我们这个利用struts2+ajax实现的我们的异步验证。下面就是具体的实现效果:

struts2+ajax实现异步验证实现的更多相关文章

  1. struts2+ajax实现异步验证

    由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示.我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在 ...

  2. formValidator向struts2 ajax传參验证

    话不多说,直接上代码 页面head里面的formvalidator验证配置 <script type="text/javascript"> $(document).re ...

  3. ssm框架整合+Ajax异步验证

    SSM框架是目前企业比较常用的框架之一,它的灵活性.安全性相对于SSH有一定的优势.说到这,谈谈SSM和SSH的不同点,这也是企业常考初级程序员的面试题之一.说到这两套框架的不同,主要是持久层框架Hi ...

  4. AJAX(二)-实现验证码异步验证功能

    案例实现效果 用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错 前端代码 checkcode.jsp <%-- Created by IntelliJ IDEA. User: cxs ...

  5. ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册

    在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面 ...

  6. ajax异步验证用户名密码,提示路径错误

    使用thinkphp框架异步验证用户名和密码的时候,ajax路径错误可能有多重情况.我遇到的是,我自感路径没问题,且先前使用无错.由于多人合作使用svn,所以在更新代码后,使用firebug显示一直是 ...

  7. 利用js制作异步验证ajax方法()

    如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...

  8. MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证

    原文:MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证 MVC中,关于往后台提交的方法有: 1.Html.BeginForm():同步 2.Ajax.BeginForm():异 ...

  9. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

随机推荐

  1. 高精度运算专题3-乘法运算(The multiplication operation)

    这个专题呢,我就来讲讲高精度的乘法,下面是三个计算乘法的函数,第一个函数是char类型的,要对字符串进行数字转换,而第二个是两个int类型的数组,不用转换成数字,第三个则更为优化,用a数组-b数组放回 ...

  2. xml 和json 数据格式及解析

    来源:http://blog.jobbole.com/79252/ 引言 NOKIA 有句著名的广告语:“科技以人为本”.任何技术都是为了满足人的生产生活需要而产生的.具体到小小的一个手机,里面蕴含的 ...

  3. 关于 HIVE Beeline 问题

    1  启动 hiveserver2 服务,启动 beeline -u jdbc:hive2:// 正常 ,启动 beeline -u jdbc:hive2://127.0.0.1:10000 包如下错 ...

  4. buffer小解

    Buffer代表一个缓冲区,存储二进制数据,是字节流 创建: 创建Buffer有4种方式: 1.new Buffer(size) 以字节为单位创建指定大小的Buffer eg: var buf= ne ...

  5. Base64技术:把对象转变成字符串

    需求:在安卓移动端和服务器进行数据交互的时候,有些时候需要上传,下载文件.如果所有的参数都变成字符串,会更加方便. 原理:Base64只是把byte[]数组进行了编码,然后再解码的过程,文档内容无法直 ...

  6. TODO:小程序的使用体验

    TODO:小程序的使用体验 2017.01.09小程序如期而至,话说十年前的今天2007.01.09是第一代iPhone发布日期. 清晨朋友圈发了一张小程序的截图,很多朋友问用什么版本的微信才有小程序 ...

  7. 数据查找之80-20原则的JavaScript代码实现

    作为前端开发人员,无论在工作还是找工作(笔试/面试),或多或少会涉及一些数据结构的知识. 数据结构即计算机存储和组织数据的方式. 常用的结构:数组.栈.队列.链表.树.图.堆和散列表 关于数据,我们常 ...

  8. innerhtml 和value值有什么区别

    value 值写在标签里面的,innerHTML写在<button type="button" onclick="myFunction()">Try ...

  9. 判断数字 字母 isDigit(), isalpha()

    判断是否是数字 isdigit isNumber      二者区别http://www.cnblogs.com/xiashengwang/p/3219925.html     需要包含头文件  #i ...

  10. 尚未配置为Web项目.指定的本地IIS URL http://localhsst/..要打开项目,需要配置虚拟目录 。是否立即创建虚拟目录 解决

    1.编辑.csproj文件 2.修改 UseIIS节点改为false,再次打开程序即可