超级详细讲解如何利用AJAX+Struts2异步检测用户名是否重复（附源码）

写在前面：

之前很久以前是为了做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 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

 

 

 

 

 

 

 

 

 

迟一点我会把代码上传到我的github上.

github传送门

CSDN下载