本文解决问题：通过原生Ajax快速实现用户信息检测功能
编辑
0 架构思维
要想实现这个功能我们需要先分析一下大致思路，我总结下分三步骤：
1 注册页面设计
2 表单提交通过ajax接收
3 php后台实现数据库的查询并实现信息反馈
1 实现页面设计
实现页面功能很简单，您此时需要会的技术为HTML CSS足矣。不过记住一点，我们要把最后的html文件改为php文件后缀。
废话不多说，直接贴代码：
//register.php <html lang="en" class="is-centered is-bold"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>检测用户名是否被占用</title> <link href="css/login.css" rel="stylesheet"> </head> <body> <section style="background: transparent;"> <form class="box py-3 px-4 px-2-mobile" role="form" name="form" > <div class="is-flex is-column is-justified-to-center"> <h1 class="title is-3 mb-a has-text-centered"> 注册 </h1> <div class="inputs-wrap py-3"> <div class="control"> <input class="input" type="text" id="username" name="username" placeholder="用户名" value="" required></input> <!-- <a href="javascript:;" onClick="checkName()">[检测用户名]</a> --> </div> <div class="control"> <input class="input" type="password" id="password" name="password" placeholder="密码" required></input> </div> <div class="control"> <input class="input" type="password" id="password2" name="password2" placeholder="确认密码" required></input> </div> <div class="control"> <button class="button is-submit is-primary is-outlined" onClick="checkName()"> 提 交 </button> </div> </div> <footer class="footer-box"> <a href="login.html"> 已有账号，点击去登陆 </a> </footer> </div> </form> </section> </body> </html>
不过此时你的也买你很显然是这个熊样子：（奇丑无比）
编辑
因此，引入页面对应的css样式表就显得无比的重要了，css样式表说白了就是给你的页面穿上华丽的衣服。
register.css页面样式表如下：
.title{ color:rgb(116, 116, 116); font-size: 32px; text-align: center; } .box{ width: 300px; height: 150px; } .py-3{ width: 200px; height: 30px; } .is-flex{ width: 300px; height: 350px; border: 18px solid #083d82; background-color: rgb(255, 255, 255); } .inputs-wrap{ margin: 0 auto; } .control .input{ width: 200px; height: 26px; margin-bottom: 25px; border: 1px solid #083d82; border-radius: 5px; } .control button{ width: 200px; border-radius: 5px; border: 1px solid #b99fb5; font-size: 16px; color: #ffffff; background-color: #2f2fe7; margin-left: 2px; } .footer-box{ width: 240px; height: 100px; margin-top: 110px; margin-left: 45px; color: #02632c; font-size: 12px; } .footer-box input{ float: left; } .footer-box a{ font-size: 12px; margin-left: 80px; color: rgb(248, 91, 91); text-decoration: none; }
随后我们就会发现，目前的样式是无比的舒心：
编辑
到了这一步，其实距离我们实现校验功能还差了些火候，接下来咱们就赶快进入第二步。
2 表单提交通过ajax接收
没有js的页面完全就是一个傻逼的静态页面，静的让人瘆得慌。因此，你就可以想象一下，我这废话说的是多么的有水平了。进入正题：
<script> function checkName(){ var username = form.username.value; if(username==""){ window.alert("请填写用户名！"); form.username.focus(); return false; } createRequest('checkName.php',username); } function createRequest(url,username){ http_request = false; if(window.XMLHttpRequest){ http_request = new XMLHttpRequest(); if(http_request.overrideMimeType){ http_request.overrideMimeType("text/xml"); } } else if(window.ActiveXObject){ try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e1) { return false; } } } if(!http_request){ window.alert("不能创建XMLHTTP实例"); return false; } http_request.onreadystatechange = alertContents; http_request.open("POST",url,true); http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); http_request.send("username="+username); } function alertContents(){ if(http_request.readyState == 4) { if(http_request.status ==200){ window.alert(http_request.responseText); } else{ window.alert("您请求的页面发现错误"); } } } </script>
看到没有，路老师直接把爽歪歪的代码给贴了上去，而且可气的是根本就没有给你贴任何注释，是不是看不懂了？这就是路老师想让你跟着我的脚步往下继续看，就会逐渐的明白的：
首先是第一个函数checkName()，这个函数就是当你点击提交按钮的时候触发的一个傻瓜式的方法，你点击，它就动，你不点，它就一动不动。
function checkName(){ var username = form.username.value; if(username==""){ window.alert("请填写用户名！"); form.username.focus(); return false; } createRequest('checkName.php',username); }
该函数获取username用户账户，并检测该用户名是否为空，如果为空，就给你个大逼斗，提醒你“请填写用户名！”。如果输入了内容，就会顺势调用createRequest()函数。该函数是是实现了两个功能，第一个功能是检测浏览器兼容性，第一个if检测的是Google是否兼容，后两个检测的是IE和其他浏览器是否兼容；第二个功能就是将输入的页面信息打包成post方式的包，传递给后台php去处理加工。
function createRequest(url,username){ http_request = false; if(window.XMLHttpRequest){ http_request = new XMLHttpRequest(); if(http_request.overrideMimeType){ http_request.overrideMimeType("text/xml"); } } else if(window.ActiveXObject){ try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e1) { return false; } } } if(!http_request){ window.alert("不能创建XMLHTTP实例"); return false; } http_request.onreadystatechange = alertContents; http_request.open("POST",url,true); http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); http_request.send("username="+username); }
此时你会突然的发现，还有一个alertContents函数没有给老子介绍呢，不介绍完，别想给老子睡觉。放心吧骚年，像路老师这么年轻帅气的美男子怎么可能忘记这点细节呢？
仔细看alertContents()函数，一句话说明：就是检测php后端返回的信息是否成功的状态。readyState 的状态数有很多个，4代表完成，详细的见上篇文章的介绍。
function alertContents(){ if(http_request.readyState == 4) { if(http_request.status ==200){ window.alert(http_request.responseText); } else{ window.alert("您请求的页面发现错误"); } } }
说了半天了，中间也罗嗦了很多次php后端逻辑实现数据库的操作，具体是个啥呢？不卖关子，直接代码伺候：
3 php后台实现数据库的查询并实现信息反馈
require_once("config.php"); $username = trim($_POST['username']); try { //连接服务器 $pdo = new PDO(DB_DSN,DB_USER,DB_PWD); } catch (PDOException $e) { echo $e->getMessage(); } $sql = 'select * from users where username = :username'; $res = $pdo->prepare($sql); $res->bindParam(':username',$username); if($res->execute()){ $rows = $res->fetch(PDO::FETCH_ASSOC); if($rows){ echo "很抱歉！用户名【".$username."】已经被注册！您可以换一个用户名！"; }else{ echo "祝贺您！用户名【".$username."】没有被注册，您可以放心使用！"; } }
这还需要路老师给你解释吗？类似的代码前期的文章枯燥地给你都介绍了，别看枯燥，其实一点就着！
下一篇 玩玩ThinkPHP
