ajax检查用户名重复
1.获取ajax对象
new XMLHttpRequest();
IE6-8: new ActiveXOject("Microsoft.XMLHTTP");
兼容判断：if(XMLHttpRequest){...}else{...}
2.打开链接：open()
open(method,url,async):method:请求方式GET/POST，url:请求地址，async:true(异步，默认)/false(同步)
3.发送请求：send()
如果是POST请求，send方法要带参，带上我们要传输的数据。
POST请求的话，还要修改请求头，写在open方法后：setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
4.监听状态变化
onreadystatechange = function(){...}
5.状态判断:readyState==4&&status==200
readyState:4/3/2/1/0
0：请求未初始化，open()方法未执行
1：send()方法未调用
2：send()方法已经被调用，响应头已经获取，响应头的状态已经返回
3：部分responseText已经获取
4：整个请求过程完成
status:200/404/500
6.responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据
注意：1.后端不做跳转，直接返回数据 2.返回的数据类型肯定是字符串 3.使用print，不要使用println（会有换行） 4.有的浏览器会有缓存问题
如何解决浏览器缓存问题：传输的参数加上时间戳 url=“/ajax/checkUser?username=”+username+"&_timer="+new Date().getTime();
_timer:该参数名只要保证不与其他参数名重复即可
代码演示：检查用户名是否重复
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>检查用户名是否重复</title>
7 </head>
8
9 <body>
10 用户名：<input type="text" name="username" id="username" />
11 <br />
12 <span id="info"></span><br />
13 <button type="button" id="checkUser" onclick="checkUser()">校验</button>
14 <!--用ajax完成post请求时,
15 1.button的类型不能是submit,
16 submit会有一个浏览器默认事件(即提交后会自动刷新页面)
17 2.请求头的Content-Type要改变,写在open之后
18 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
19 3.send(要传输的数据写在这里)
20 -->
21 </body>
22 <script type="text/javascript">
23 function checkUser() {
24 //获取数据
25 var username = document.getElementById("username").value;
26 alert(username);
27 //1.获取ajax对象
28 var xhr = null;
29 if(XMLHttpRequest) {
30 xhr = new XMLHttpRequest();
31 } else if(ActiveXObject) {
32 xhr = new ActiveXObject("Microsoft.XMLHTTP");
33 } else {
34 alert("你是啥？？?");
35 }
36 //2.open 带参数传输
37 xhr.open("GET", "/ajax/checkUser?username="+username, true);
38 //3.send
39 xhr.send();
40 //4.监听状态
41 xhr.onreadystatechange = function() {
42 if(xhr.status == 200 && xhr.readyState == 4) {
43 if(xhr.responseText == "false") {
44 document.getElementById("info").innerHTML="用户名已存在！！";
45 } else {
46 document.getElementById("info").innerHTML="用户名可以使用！！";
47 }
48 } else {
49 console.debug("error");
50 }
51 }
52 }
53 </script>
54
55 </html>
前端代码
1 @WebServlet("/checkUser")
2 public class checkUserServlet extends HttpServlet {
3 private static final long serialVersionUID = 1L;
4 @Override
5 protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
6 String username = request.getParameter("username");
7 System.out.println(username);
8 if("admin".equals(username)) {
9 System.out.println("判断结果为true");
10 response.getWriter().print("false");//不用加ln,会出错
11 }else {
12 response.getWriter().print("true");
13 }
14 }
15 }
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h57346.shtml
