Ajax判断输入数据是否合法具体流程（后端和前端）

实现用户在前端注册界面输入用户名后台判断输入是否合法以及数据库中是否有存在数据 使用ssm+前端ajax

具体流程

1.首先用户进入regist.jsp注册界面

鼠标移入输入框获取焦点，调用script中的checkUsername()函数

<tr>
			<th><span class="requiredField">*</span>用户名:</th>
			<td><input type="text" id="username" name="username"
			class="text" maxlength="20" onblur="checkUserName()">
			<span id="span1" style="color:green;"></span></td>
</tr>

2.进入function函数

根据请求路径，过滤checkName.do并发送给checkName的控制器（controller）

//    			//打开网络连接 :请求方式、请求路径、是否异步
    			xmlHttp.open("POST","http://localhost:8080/GouWu/checkName.do",true)

并且通过XMLHttpRequest，获取用户输入的数据并向后台发送

xmlHttp = new XMLHttpRequest();
			//打开网络连接 :请求方式、请求路径、是否异步
			xmlHttp.open("POST","http://localhost:8080/GouWu/checkName.do",true)
			
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8")
			//发送请求字段，以键值对的形式发送	
			xmlHttp.send("username="+inputName);

完整function

function checkUserName(){
	//获取输入的用户名
	var inputName= document.getElementById("username").value;
	var tip = document.getElementById("span1");
	if(inputName==null||inputName=="")
		{
		 tip.innerHTML ="用户名不能为空";
		}else{
			var xmlHttp=null;
			//XMLHttpRequest是浏览器内置的网络请求对象 xObjext("")适配其他版本		
			xmlHttp = new XMLHttpRequest();
			//打开网络连接 :请求方式、请求路径、是否异步
			xmlHttp.open("POST","http://localhost:8080/GouWu/checkName.do",true)
			//设置请求头
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8")
			//发送请求字段，以键值对的形式发送	
			xmlHttp.send("username="+inputName);
			xmlHttp.onreadystatechange= function(){
				//200是网络响应状态码，如404 500
				//readyState:0,1,2,3,4
				if(xmlHttp.readyState==4&&xmlHttp.status==200)
					var result = xmlHttp.responseText;
					if(result =="0"){
						tip.innerHTML = "用户名不可用"
					}else if(result == "1"){
						tip.innerHTML = "用户名可用"
					}else if(result == "2"){
						tip.innerHTML = "用户名不能为空"
					}else{
						tip.innerHTML = "出错了"
					}
			}
		}
	
}

3.进入UserController部分

通过@RequestMapping("/checkName")注解，后台发送给该controller
通过@RequestParam String username接受XMLHttpRequest.send()传递过来的username
并设置HttpServletReponse设置响应的对象接受后续方法传过来的参数，并返回给前端
接下来controller的首要任务是调用userService的方法

@RequestMapping("/checkName")
//接受请求参数的注解
//三种输出方式
public void checkName(@RequestParam String username,HttpServletResponse resp) {
	String result=userService.checkName(username);
	//用httpservletresponse向前端响应结果
	try {
		resp.getWriter().write(result);
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
}

4.进入UserService部分

进行业务逻辑判断，首先判断输入的用户名是否为空格或者是空
若不是才继续调用mapper进行处理查询数据库，设置User对象作为数据库查询的返回值

@Autowired
public UserMapper usermapper;

public String checkName(String username) {
	String name=username.trim();
	if(name==null||name.equals(" ")) {
		//返回一个结果，提示用户名不能为空
		return "2";	
	}
	else {
		//
		User user=usermapper.selectByUserName(name);
		if(user==null) {//可以注册
			return "1";
		}
		else {
			return "0";//重复
		}
	}
}

5.进入mapper部分

首先创建UserMapper.java并定义UserService中selectByUserName的方法

public interface UserMapper {
	
	public  User selectByUserName(String username);
	
}

然后在UserMapper.xml中写查询的sql语句
注意如果是前端传过来的数据需要用 #{前台参数}来获取，若只是后台的多表查询之类的则只需写变量名。

 <mapper namespace="com.qf.edu.mapper.UserMapper">
	
	<select id="selectByUserName" parameterType="String"
		resultType="com.qf.edu.pojo.User">
			select *from user where username =#{username}
		</select>
	
</mapper>

另：如果是自定义结果集 paramterType需改为resultMap并且值定义为的自定义结果集的id
例:

   <resultMap type="com.qf.edu.pojo.Product" id="findAllProduct"></resultMap>
   
   <select id="selectAllProduct" resultMap="findAllProduct">   </select>

6.至此后台查询工作做完开始逐层返回

首先返回到service 层

根据所写的业务逻辑，如果数据库没有用户所输入的用户名就返回1，否则返回0

User user=usermapper.selectByUserName(name);
		if(user==null) {//可以注册
			return "1";
		}
		else {
			return "0";//重复
		}

再返回到controller层

String result=userService.checkName(username);
		//用httpservletresponse向前端响应结果
		
		try {
			resp.getWriter().write(result);
		} 

result是存储controller调用service，之后service再调用mapper所返回的结果
然后通过httpservletresponse返回给前端界面

在regist.jsp界面中

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。因此下面代码会被执行

xmlHttp.onreadystatechange= function(){
			//200是网络响应状态码，如404 500
			//readyState:0,1,2,3,4
			if(xmlHttp.readyState==4&&xmlHttp.status==200)
				var result = xmlHttp.responseText;
				if(result =="0"){
					tip.innerHTML = "用户名不可用"
				}else if(result == "1"){
					tip.innerHTML = "用户名可用"
				}else if(result == "2"){
					tip.innerHTML = "用户名不能为空"
				}else{
					tip.innerHTML = "出错了"
				}
		}

tip是提示的span1标签的id，通过innerHTML方法来显示不同条件下应该显示的提示

附：部分xmlhttp.readyState的值及解释：
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

xmlhttp.status的值及解释：
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本