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

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

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

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

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

Login.html 文件如下

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

Login.php文件源码如下

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

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

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