欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajax检查用户名重复

程序员文章站 2022-03-25 16:29:30
1.获取ajax对象 new XMLHttpRequest(); IE6-8: new ActiveXOject("Microsoft.XMLHTTP"); 兼容判断:if(XMLHttpRequest){...}else{...} 2.打开链接:open() open(method,url,asy ......

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 }