实现基本异步数据传输，略去与数据库交换，先直接在PHP端判断：用户名为 user1 即为不可用，
测试时外加了 普遍的 “Loading..." 功能，此功能可直接在PHP中循环延时 for($i=0;$i<10000000;$i++) 即可
最终效果如下：
代码如下，供日后回味参考...
PHP 部分 ： 其中 user 为传送过来的元素
for($i=0;$i<10000000;$i++); $user = $_GET['user']; $str = ""; if($user == "user1") $str .="User name already exists !"; else $str .="User name is ok ~"; //echo json_encode($str) ; echo ($str) ;
jQuery 部分：
<script language="javascript" src="jquery.min.js" src="ajaxlib.js"src="ajaxgold.js"></script> <script language="javascript" type="text/javascript"> $(function(){ $("#check").ajaxSend(function(){ $(this).html("<font style='background:#990000; color:#ffffff;'> Loading...</font>"); }); }); function startCheck(oInput){ if(!oInput.value){ oInput.focus(); $("#check").html("User name can not be empty !"); return; } /* $.ajax({ url: 'config.php', type: 'GET', dataType: 'json', data: oInput.value, success: showResult }); */ $.get("config.php", {user: oInput.value }, function(data){ showResult(data); } ); } function showResult(oText){ var oSpan = document.getElementById("check"); oSpan.innerHTML = oText; if(oText.indexOf("exists")>=0) oSpan.style.color = "red"; else oSpan.style.color = "green"; } </script>
CSS 样式设置部分：
<style type="text/css"> body{ padding-left:200px; } </style> </head> <body> <form name="form1"><table> <tr> <td>用户名：</td> <td colspan="2"><input type="text" name="User" onblur="startCheck(this)"/></td> <td><span id="check"></span></td> </tr> <tr> <td>输入密码：</td> <td colspan="2"><input type="password" name="passw1"/></td><td></td> </tr> <tr> <td>重复密码：</td> <td colspan="2"><input type="password" name="passw2"/></td><td></td> </tr> <tr> <td></td><td><input type="submit"value="注册"/></td> <td><input type="reset" value="重置"/></td><td></td> </tr> </table></form> </body>
学了数据库再慢慢从中搜索...