Struts2+Ajax实现检测用户名是否唯一
搞了慢慢两天，终于弄明白了怎么在Struts2框架中使用Ajax检测用户名的存在了。虽然，比起那些大牛们来，这速度确实够慢的，不过，最终弄出来还是满满的成就感啊。
闲话休提，言归正传。直接上代码：
Action：
1 package com.bbs.action; 2 3 import javax.servlet.http.HttpServletRequest; 4 import javax.servlet.http.HttpServletResponse; 5 import org.apache.struts2.ServletActionContext; 6 7 import com.bbs.model.*; 8 import com.opensymphony.xwork2.*; 9 10 @SuppressWarnings("serial") 11 public class CheckUser extends ActionSupport { 12 //private String username; 13 public String execute() throws Exception { 14 HttpServletRequest req = ServletActionContext.getRequest(); 15 HttpServletResponse res = ServletActionContext.getResponse(); 16 String username = req.getParameter("username"); 17 res.setContentType("text/html;charset=UTF-8"); 18 String responseStr = ""; 19 UserDAO udao = new UserMySQLDAO(); 20 if (udao.ValiUserByName(username)) { 21 res.getWriter().print("exists"); 22 } else { 23 responseStr = "你可以使用该用户名"; 24 res.getWriter().print(responseStr); 25 } 26 return null; 27 } 28 }
这里第一行的package是我自己定义的Action包。网上有好多例子是JavaScript与JSP通信或者Servlet通信，但是鲜有与Action传递参数的例子。但我就是想让JSP做纯粹是展现的东西，并且如果再加上Servlet话，会破坏原有的MVC清晰架构，所以在这一点上，我相信自己的坚持是对的。
至于怎么检测用户名是否在数据库中存在，这就是一个很easy的问题了，此处就不讲了，重点讲一下我是怎么架构的，其他无关紧要的细节，或者一搜就能搜到的解释，本着简明扼要的原则，一概忽略之。
JavaScript：
1 var req; 2 var span; 3 function Check(field) { 4 span = document.getElementById("result"); 5 if(field.value == '') { 6 span.style.color = "red"; 7 span.innerHTML="用户名不能为空"; 8 return false; 9 } 10 if(window.XMLHttpRequest) { //其他非IE浏览器支持 11 req = new XMLHttpRequest(); 12 }else if(window.ActiveXObject) { //微软的IE支持 13 req = new ActiveXObject("Microsoft.XMLHTTP"); 14 } 15 16 req.onreadystatechange = press; 17 req.open("POST", "http://localhost:8080/BBS/CheckUser?username="+field.value, true); 18 req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 19 req.send(""); 20 } 21 22 function press() { 23 if(req.readyState < 4) { 24 span.style.color = "blue"; 25 span.innerHTML="正在检测"; 26 } 27 if(req.readyState == 4) { 28 if(req.status == 200) { 29 if(req.responseText == "exists") { 30 span.style.color = "red"; 31 span.innerHTML="用户名已经存在"; 32 }else { 33 span.style.color = "green"; 34 span.innerHTML="您可以使用该用户名"; 35 } 36 } 37 } 38 }
这一段代码是用来实现Ajax用户名检测的部分。第5-9行是检测用户名为空的代码，很好理解。重点是后面的部分。首先，建立一个XMLHttpRequest对象，这是实现Ajax的核心部分，只有用它才能用来
向后台发送请求，发送请求分两步：打开连接，发送请求。
打开连接用open方法。
open方法的原型 open("method","URL",[,asyncFlag[,"userName"[,"password"]]]);
method：POST/GET。这两种方法的区别就不详细介绍了，到处都有介绍。需要注意一点是：必须要有双引号，我就因为没加引号，找了半天才找到原因，汗。
asyncFlag：true代表异步，一般情况下我们应该选择这个；false代表同步。
后面的username和password则专用于一些远程服务。
发送请求用send方法。
send(content)；//content 是请求参数。一般情况下可以省略。
setRequestHeader():在发送之前要设置请求头。
onreadystatechange参数用来设置相应的回调函数。
后面的press就是那个回调函数。
关于status的各种解释此处从略。
这里的span就是用来在用户名输入框后面做语句展现的。
HTML代码：
1 <input id="regusername" type="text" name="username" size="50" maxlength="12" value="" autocomplete="off" onblur="Check(this)"/> 2 <span id = "result"></span>
Action部分：
1 <package name="server" namespace="/" extends="struts-default"> 2 <action name="CheckUser" class="com.bbs.action.CheckUser"> 3 <result name="success">Welcome.jsp</result> 4 <result name="input">Register.jsp</result> 5 </action> 6 </package>
其实此处的result部分，无所谓了，因为注意一下前面的Action最后返回的是null，为什么是null呢？因为前面的JavaScript部分，有一句是利用responseText与字符串比较来产生不同的效果。
如果是success或者input的话，会直接将跳转后的页面（Welcome.jsp/Register.jsp）返回过来。此处又折腾了半天，汗。
另外虽然好多资料都讲到responseText是一个字符串，但是实际上，不能完全按照字符串的处理方法去处理他，刚开始我用equals函数，没有反应，后来改成==才能达到效果。
总之，费了九牛二虎之力终于还是搞定了，还是觉得自己很菜很菜，但是只要相信自己一定能做到，那么你就肯定能做到。遇到困难不要急躁，总会有办法的。虽然有点鸡汤，但望诸君切记。
下一步，打算实现Ajax分页。
