不用jQuery
- 创建XMLHttpRequest对象
- 设置回调函数
- 在执行函数前先判断XMLHttpRequest对象发送的求情服务器是否以收到并作出回应,再判断响应状态码是否是正常状态
- 在回调函数中解析出response响应的数据
- 根据解析的数据做出判断
- 初始化XMLHttpRequest组件
- XMLHttpRequest发送请求
- 在后端创建UserServlet类
- 重写doGet()和doPost()方法
- 在方法中解析出客户端发送的数据,判断用户是否存在
- 返回判断的结果
XMLHttpRequest对象的readyState 属性
- readyState属性实时记录XMLHttpRequest对象的状态
- XMLHttpRequest对象的五种状态
-
- 0: 请求未初始化 xmlHttpRequest.readyState == 0
- 1: 服务器连接已建立 xmlHttpRequest.readyState == 1
- 2: 请求已接收 xmlHttpRequest.readyState == 2
- 3: 请求处理中 xmlHttpRequest.readyState == 3
- 4: 请求已完成，且响应已就绪 xmlHttpRequest.readyState == 4
onreadystatechange 事件
- 当readyState状态发生改变时会触发该事件
- 当readyState == 4 时表示
HTTP Status Code(服务器对请求返回的状态码,表示对请求处理的结果)
- 200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
- 404 （未找到） 服务器找不到请求的网页。(服务器对客户端说:你要求的资源我在我这里找不到.通常是路径设置错误)
- 500 （服务器内部错误） 服务器遇到错误，无法完成请求。(浏览器发送请求,服务器对请求资源解析时出现错误,通常是资源的代码在解析时出现错误,就是代码写错了...)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
function validate() {
var name = $("#name").val();
if (name == null || name == "") {
$("#nameDiv").html("用户名不能为空");
}else{
//创建xmlHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
//设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
var url = "UserServlet";
xmlHttpRequest.open("POST", url, true);
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data = "name="+name;
xmlHttpRequest.send(data);
/*var url = "UserServlet?name="+name;
xmlHttpRequest.open("GET", url, true);
xmlHttpRequest.send(null);*/
function callBack(){
| if (xmlHttpRequest.readyState == 4 |
| |
&& xmlHttpRequest.status == 200) { |
| |
var data = xmlHttpRequest.responseText; |
| |
if (data == "true") { |
| |
$("#nameDiv").html("用户名已被使用！"); |
| |
} else { |
| |
$("#nameDiv").html("用户名可以使用！"); |
| |
} |
| |
|
}
}
}
</script>
</head>
<body>
<form action="" id="form1">
<table>
<tr>
<td>用 户 名：</td>
<td><input type="text" name="name" id="name"
onblur="validate();"/> <font color="#c00fff">*</font></td>
<td>
<div id="nameDiv" style="display: inline"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
1 @WebServlet("/UserServlet")//用注解添加Servlet的路径
2 public class UserServlet extends HttpServlet {
3 @Override
4 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
5 System.out.println("jintu");
6 String name = req.getParameter("name");
7 boolean flag = false;
8 if (name.equals("admin")) {
9 flag = true;
10 }
11 PrintWriter out = resp.getWriter();
12 out.print(flag);
13 out.flush();
14 out.close();
15 }
16
17 @Override
18 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
19 this.doGet(req, resp);
20 }
21 }
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="js/jquery-1.12.4.min.js"></script>
7 <script>
8 $(document).ready(function () {
9 $("#name").blur(function () {
10 var name = this.value;
11
12 if (name == null || name.trim() == "") {
13 $("#nameDiv").html("用户名不能为空");
14 } else {
15 $.ajax({
16 //要提交的URL路径
17 "url": "UserServlet",
18 //发送请求的方式
19 "type": "POST",
20 //要发送到服务器的数据
21 "data": "name=" + name,
22 //指定返回的数据格式
23 "dataType": "text",
24 //响应成功后要执行的代码
25 "success": callBack,
26 //请求失败后要执行的代码
27 "error": function () {
28 alert("未知错误")
29 }
30 });
31
32 function callBack(data) {
33 if (data == "true") {
34 $("#nameDiv").html("用户名重复");
35
36 } else {
37 $("#nameDiv").html("可以使用");
38 }
39
40 }
41 }
42 });
43 })
44 </script>
45 </head>
46 <body>
47 <form action="" id="form1">
48 <table>
49 <tr>
50 <td>用 户 名：</td>
51 <td><input type="text" name="name" id="name"
52 /> <font color="#c00fff">*</font></td>
53 <td>
54 <div id="nameDiv" style="display: inline"></div>
55 </td>
56 </tr>
57 </table>
58 </form>
59 </body>
60 </html>