写在前面：
之前很久以前是为了做JavaWeb实验做的一个Ajax异步检测用户名是否重复，今天主要是回忆加记录。
我们都知道网站加载有两种方法：
同步加载：
也就是最常见的网站跳转，通常是整个页面加载，也就是全部加载。
异步加载：
就是我今天要写的一个网页的一部分重新加载，通过逻辑判断，进行一个网页的部分加载，比如今天的检测用户名是否重复。
在注册用户名的时候，我们需要与数据库里已经注册的用户名进行一个判断是否有重复，但是如果利用action进行整个网页的加载未免太大材小用耗费时间，所以通常这时候都是进行异步加载，然后进行逻辑判断有没有和数据库重复。
程序思想流程：
1.在HTML界面通过Ajax，包括open(), setRequestHeader(),send() 来将请求发送到服务器。
2.服务器接收请求，在servlet中处理请求。
3.写一个基于响应的任务，在onreadystatechange()中处理响应。完成异步加载。
一、将请求发送到服务器:
<form action="" method="post">
<input type="text" name="username" id="username"onblur="Check(this)" value="">
<span id="result" ></span>
<input type="password" name="password">
<input type="submit" value="注册">
</form>上面是一个表单，没什么好讲的，onblur是判断焦点的，当光标移出输入框的时候调用Check().这个代码我主要是写来测试异步加载的，所以是没有注册功能的。
var req;
var span;
if(window.XMLHttpRequest){
req=new XMLHttpRequest(); //code for IE7+, Firefox, Chrome, Opera, Safari
}else if(window.ActiveXObject){
req=new ActiveXObject("Microsoft.XMLHTTP"); //code for IE6, IE5
}
//var url="ajax?username="+field.value;
var url="ajax";
url=encodeURI(url);
//url=encodeURI(url);
req.open("post",url,true);
//req.open("post","ajax?username="+encodeURIComponent(field.value),true);
//span.innerHTML="已经提交";
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("username="+field.value);可以看到首先进行了一个判断，这是为了解决兼容性问题，XMLHttpRequest()主要是用于IE7以上以及其他主流的浏览器，而ActiveXObject()主要是用于IE6以下的。这段代码可以照抄就行了。
open()函数主要是用于打开连接，设置传输方式，以及文件位置，第三个方式是否异步，这里选择true。参数传递也可以在这里进行。
setRequestHeader()这个是因为我之前选择了POST方式，所以要在这里设置网头。
send().一般的参数传递是在这里进行。
二、处理请求:
package ajax;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import jdbc.JDBC;
import jdbc.JDBCDAO;
public class Ajax {
public String execute() throws Exception{
HttpServletRequest req=ServletActionContext.getRequest();
HttpServletResponse res=ServletActionContext.getResponse();
res.setContentType("text/html;charset=utf-8"); //防止乱码的重要一步
String username=req.getParameter("username"); //取出传递过来的参数
//String username="hhh";
//String responseStr="";
System.out.println(username);
username=java.net.URLDecoder.decode(username,"UTF-8"); //防止乱码
System.out.println(username);
JDBCDAO jdbc=new JDBCDAO(); //打开数据库
int flag=0;
flag=jdbc.judge(username);
if(flag>0) {
res.getWriter().print("exists"); //这里用getWriter().print()是在后面处理响应的时候能进行判断的
System.out.println(flag);
}else {
res.getWriter().print("可以使用");
System.out.println(flag);
}
return null;
}
}上面是进行处理请求。尽量每一步我都写了注释了。
下面是数据库的操作:
package jdbc;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
public class JDBCDAO {
public JDBCDAO() {
}
public int judge(String username) {
int num=0;
Connection conn=null;
JDBC jdbc=new JDBC();
conn=jdbc.getConn();
try {
String sql="select * from user1 where username='"+username+"'";
Statement stmt=conn.createStatement();
ResultSet rs=stmt.executeQuery(sql);
if(rs.next()) {
num++;
}
rs.close();
stmt.close();
conn.close();
}catch(Exception e) {
System.out.print("查询失败");
e.printStackTrace();
}
return num;
}
}三、响应：
if(field.value==''){
span.style.color="red";
span.innerHTML="用户名不能为空";
return false;
}
req.onreadystatechange = function press() {
if(req.readyState ==0) {
span.style.color = "blue";
span.innerHTML="初始化";
}
if(req.readyState==1){
span.innerHTML="正在加载";
}
if(req.readyState==2){
span.innerHTML="已加载";
}
if(req.readyState==3){
span.innerHTML="正在交互";
}
if(req.readyState == 4) {
if(req.status == 200) {
if(req.responseText == "exists") { //这里的responseText就是之前的getWriter().print()
span.style.color = "red";
span.innerHTML="用户名已经存在";
}else{
span.style.color = "green";
span.innerHTML="您可以使用该用户名"+req.responseText;
}
}
}
};另外给出onreadystatechange()的各参数：
onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
