ajax servlet怎么接收_Ajax异步技术之二：Ajax之用户名校验和封装自己的ajax-CSDN博客

Ajax之用户名校验

功能：

用户名是否被注册校验

思路：

1.用户书写用户名信息，在失去焦点是进行用户校验

2.失去焦点发送请求到服务器，服务器根据用户名信息去查询该用户名是否存在

3.将校验结果响应该客户端

4.在当前页面，也就用户名输入框后显示提示语

技术：

使用ajax技术

代码实现：

reg.jsp

<%

DataServlet

package

checkUnameInfoService方法的实现：

//查询用户名是否存在 
	@Override
	public boolean checkUnameInfoDao(String uname) {
		//声明jdbc变量
		Connection conn=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		//声明变量
		boolean flag=false;
		try{
			//创建连接
			conn=DBUtil.getConnection();
			//创建SQL命令
			String sql="select * from t_user where uname=?";
			//创建SQL命令对象
			ps=conn.prepareStatement(sql);		
			//给占位符赋值
			ps.setString(1, uname);
			//执行
			rs=ps.executeQuery();
			//遍历
			if(rs.next()) {
				flag=true;
			}
		}catch(Exception e) {
			e.printStackTrace();
		}finally {
			//关闭资源
			DBUtil.closeAll(rs, ps, conn);
		}		
		//返回
		return flag;
	}

数据库中有“张三”的校验结果

数据库中没有“赵四”的校验结果

封装自己的Ajax

问题：

我们发现在使用ajax进行业务处理时，ajax的代码其实很多地方是相同的。

这样造成编写代码时出现了重复编写，影响了开发的效率。

解决：

使用封装

实现:相同的保留，不同的传参。

请求方式：method
请求地址：url
请求参数：data 请求参数的格式为键值对格式的字符串，不同的键值对使用&符号隔开.如果没有请求数据传入null 示例："a=1&b=2"
异步同步设置:ansyc
响应处理参数:deal200 该参数接收一个js的函数对象，函数对象中声明ajax响应数据的处理逻辑代码。注意：函数对象需要声明一个形参用来接收要处理的响应数据

代码实现：

AjaxUtil.js

//声明ajax函数

则上面校验用户名的reg.jsp代码改为：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
	 <!-- 引入js文件 -->
	 <script type="text/javascript" src="js/AjaxUtil.js"></script>
	 <!-- 声明js代码域 -->
	 <script type="text/javascript">
	 	//声明用户名校验函数
	 	function checkUname(){
	 		//获取用户名信息
	 		var uname=document.getElementById("uname").value;
	 		myAjax("get","data","uname="+uname,function(data){
	 			if(eval(data)){
						//获取Span对象
						var span=document.getElementById("unameSpan");
						//设置span颜色
						span.style.color="red";
						//将数据填充到span中
						span.innerHTML="用户名已被注册";
					}else{
						//获取Span对象
						var span=document.getElementById("unameSpan");
						//设置span颜色
						span.style.color="blue";
						//将数据填充到span中
						span.innerHTML="用户名OK";
					}
	 		})
	 	}
	 </script>
</head>
<body>
	用户名：<input type="text" name="uname" id="uname" vlaue="" onblur="checkUname()"/><span id="unameSpan"/>
</body>
</html>