一个基础都不太熟的小菜鸟要搞些东西有时候还真挺不容易，这边就注册用户时即时检查用户名是否可用来简单的学学ajax吧。

去参考其他CMS开源系统中的代码，太过繁杂，于是自己找了些资料整理了一个简单的例子

参考资料 《Ajax+PHP程序设计实战详解》，位于第九章的例子

主要就是将文件中的检测修改为 查询数据库

多的不说直接上代码吧，需要的可以多看下注释 

Login.html 文件如下

  1. <html> 
  2. <head> 
  3. <title>用户注册</title> 
  4. <script type="text/javascript"> 
  5. var xmlHttp; 
  6. function createXMLHttpRequest() 
  7. { 
  8.     //在IE下创建XMLHttpRequest对象 
  9.     try 
  10.     { 
  11.         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
  12.     } 
  13.     catch(e) 
  14.     {        
  15.     try 
  16.     { 
  17.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  18.     }  
  19.     catch(oc) 
  20.     { 
  21.         xmlHttp = null; 
  22.     } 
  23.     } 
  24.     //在Mozilla和Safari等非IE浏览器下创建XMLHTTPRequest对象 
  25.     if(!xmlHttp && typeof XMLHttpRequest != "undefined")  
  26.     { 
  27.         xmlHttp = new XMLHttpRequest(); 
  28.     } 
  29.     return xmlHttp; 
  30. } 
  31. //方式请求 
  32. function startRequest() 
  33. { 
  34.     //获取用户输入的信息 
  35.     var UserID = document.getElementById("UserID").value; 
  36.     //输入的用户名是否为空 
  37.     if(UserID!="") 
  38.     { 
  39.         //创建XMLHttpRequest对象 
  40.         createXMLHttpRequest(); 
  41.         var url = "Login.php?UserID="+encodeURI(UserID); //指定url 
  42.         xmlHttp.open("GET",url,true); 
  43.         xmlHttp.onreadystatechange = handleStateChange;  //指定回调函数 
  44.         xmlHttp.send(null);   
  45.     } 
  46.     else 
  47.     { 
  48.         alert("请填写您的用户名!"); 
  49.     } 
  50. } 
  51. function handleStateChange() 
  52. { 
  53.     if(xmlHttp.readyState<4) 
  54.     { 
  55.         span.innerHTML="正在读取数据..."; 
  56.     } 
  57.  
  58.     if(xmlHttp.readyState==4) 
  59.     { 
  60.         if(xmlHttp.status == 200)  
  61.         { 
  62.             span.innerHTML=xmlHttp.responseText; 
  63.         } 
  64.         else{ 
  65.             alert("错误，请求页面异常!"); 
  66.         } 
  67.     } 
  68. }  
  69. </script> 
  70. </head> 
  71. <body> 
  72. <form action="#"> 
  73. <center> 
  74. <h3>Ajax+php验证用户名是否可用</h3> 
  75. <table> 
  76. <tr> 
  77. <td>用户名:  <input type="text" name="UserID" id="UserID" onchange="startRequest()" /> 
  78. <span id="span"></span></td> 
  79. </tr> 
  80. <tr> 
  81. <td>密&nbsp;&nbsp;码:   <input type="text" name="Pwd" id="Pwd"/></td> 
  82. </tr> 
  83. <tr> 
  84. <td> 
  85. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  86. <input type="button" name="Reg" id="Reg" value="注册"/> 
  87. <input type="button" name="Log" id="Log" value="登录"/> 
  88. </td> 
  89. </tr> 
  90. </table> 
  91. </center> 
  92. <form>  
  93. </body> 
  94. </html> 

Login.php文件源码如下

  1. <?php 
  2. //设置PHP的显示语言 
  3. header('Content-Type:text/html;charset=UTF-8'); 
  4. //让程序先等待一秒 
  5. sleep(1);  
  6. //获取输入的用户名 
  7. $tmp=$_GET["UserID"]; 
  8. $db_host="localhost"; 
  9. $db_name="canphp"; 
  10. $db_username="root"; 
  11. $db_password="rootpass"; 
  12. $link = mysql_connect($db_host, $db_username,$db_password ) or  die ('Can\'t connet db！' . mysql_error()); 
  13. mysql_select_db($db_name, $link) or die ('Can\'t select db : ' . mysql_error()); 
  14. $query="select * from cp_user where username='$tmp'"; 
  15. $result = mysql_query($query) or  die ($query.mysql_error()); 
  16. $rows=mysql_num_rows($result); 
  17. if($rows>0) 
  18. { //存在记录
  19.    echo "用户名已存在";  
  20. }else{ 
  21.   echo("还没有被注册！");  
  22. }  
  23. ?> 

文件中的部分信息需要按需修改下，如服务端处理文件中的数据库及表信息

先记录到这边吧，具体的原理也还不太懂，以后有用到 理解了再做补充 :-)