最近在看ajax 捣鼓了很久，终于整出来个无刷新验证用户名，新手，勿喷

请求页面代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>ajax无刷新验证</title>
 6         <script type="text/javascript">
 7             //创建ajax对象
 8             function createAJAX() {
 9                 var HTTPrequest = '';
10                 try {
11                     HTTPrequest = new XMLHttpRequest();       //for opera ff chrome 
12                 } catch(microsoft) {
13                     try {
14                         HTTPrequest = new ActiveXObiect("Msxml2.XMLHTTP");     //for ie (msxml3及以上使用)
15                     }catch(othermicrosoft) {
16                         try {
17                             HTTPrequest = new ActiveXObiect("Microsoft.XMLHTTP");    //for ie (msxml2.6以下使用)
18                         }catch(n) {
19                             HTTPrequest = '';       //other
20                         }    
21                     }    
22                 }
23                 return HTTPrequest;
24             }
25             var xmlHttp = '';  //声明全局ajax对象变量，方便使用
26             //获取信息
27             function getHTTP() {
28                 xmlHttp = createAJAX();  //创建ajax对象
29                 if(xmlHttp) {
30                     var url = 'regName.php';        
31                     var postval = 'username=' + document.getElementById('username').value;
32                     xmlHttp.open('post',url,true);    //准备数据
33                     xmlHttp.onreadystatechange = process;   //绑定处理函数
34                     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //定义传输文件的http头信息,post请求时添加
35                     xmlHttp.send(postval);                 //发送数据,post请求时需添加参数，get请求添null即可    
36                 }
37             }
38             
39             //处理函数
40             function process() {
41                 if(xmlHttp.readyState == 4) {
42                     if(xmlHttp.status == 200) {
43                         var txt = xmlHttp.responseText;
44                             document.getElementById('txt').innerHTML = txt;
45                     }    
46                 }    
47             }
48         </script>
49     </head>
50 
51     <body>
52         <form action="" method="post" name="frm">
53             <label for="username">用&nbsp;户&nbsp;名：</label>
54             <input type="text" name="username" id="username" onblur="getHTTP()"/>
55             <span id="txt" style="color:#f60;font-size:12px;"></span>
56         </form>
57     </body>
58 </html>

ok，下面是被请求的页面代码：

 1 <?php
 2     $name = $_POST['username'];
 3     //用户名验证
 4     function regName() {
 5         global $name;
 6         if($name == '' || strlen($name) < 6) {
 7             //echo var_dump($_POST);
 8             echo '<font color=\'green\'>'.$name.'</font>&nbsp;&nbsp;不可用,至少为不为空的6位字符!';    
 9         }elseif(preg_match('/[\s+@#$~.\/\\\]/',$name)) {
10             echo '<font color=\'green\'>'.$name.'</font>&nbsp;&nbsp;不可用,用户名不能包含<font color=\'red\'>$ . ~ @ # \ /和空格</font>等特殊字符,且不能以空格开始,可用空格结束!';    
11         }else {
12             echo '<font color=\'green\'>'.$name.'</font>&nbsp;&nbsp;可用!';    
13         }    
14     }
15     if($name != '') {
16         regName();    
17     }
18 ?>

注：我用的是post请求，也可用get请求。

posted @ 2012-09-25 11:24  himi  阅读(496)  评论(0)  编辑  收藏  举报