AJAX-简单的用户名检测1(无刷新)
原理图
register.php
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>ajax无刷新检测</title> 6 <style type="text/css"> 7 body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{list-style: none;margin:0;padding:0;} 8 tr{width:200px;}td{width:80px;padding:5px 0;}td input,textarea{border: 1px solid #79ABFE;} 9 </style> 10 </head> 11 <body> 12 <div class="content"> 13 <script> 14 15 //创建ajax引擎(1号线) 16 function getXmlHttpObject(){ 17 var xmlHttpRequest; 18 //不同浏览器获取对象xmlHttpRequest方法不一样 19 if(window.ActiveXObject){ 20 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); 21 }else{ 22 xmlHttpRequest=new XMLHttpRequest(); 23 } 24 return xmlHttpRequest; 25 } 26 //验证用户名是否存在 27 var myXmlHttpRequest="";//因为chuli也用到了,所以要定义为全局变量 28 //创建方法(2号线 http请求) 29 function checkName(){ 30 //创建对象 31 myXmlHttpRequest=getXmlHttpObject(); 32 //判断是否创建ok 33 if(myXmlHttpRequest){ 34 //通过myXmlHttpRequest对象发送请求到服务器的某个页面 35 var url="./registerPro1.php"; 36 //要发送的数据 37 var data="username="+$('username').value; 38 //打开请求 39 myXmlHttpRequest.open("post",url,true);//ture表示使用异步机制 40 //POST方法 41 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 42 //指定回调函数,chuli是函数名(registerPro里的数据返回给chuli函数) 43 myXmlHttpRequest.onreadystatechange=chuli; 44 //开始发送数据,如果是get请求则填入null即可,如果是post请求则填入实际的数据 45 myXmlHttpRequest.send(data); 46 } 47 } 48 //回调函数(4号线) 49 function chuli(){ 50 //取出从registerPro.php页面返回的数据(4表示完成,200表示成功) 51 if(myXmlHttpRequest.readyState==4){ 52 if(myXmlHttpRequest.status==200){ 53 //①、取出值,根据返回信息的格式定 text(html) 54 //$('result').value=myXmlHttpRequest.responseText; 55 //②、取出xml格式数据(解析) 56 //获取mes节点、这里的mes返回的是节点列表(不知道有几个mes) 57 //var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes"); 58 //取出mes节点值 59 //mes[0]->表示取出第一个mes节点 60 //mes[0].childNodes[0]->表示取出mes节点的第一个子节点 61 //var mes_val=mes[0].childNodes[0].nodeValue; 62 //$("result").value=mes_val; 63 //③、json格式 64 //var mes=myXmlHttpRequest.responseText; 65 //使用eval函数,将mes字串转为对象 66 //var mes_obj=eval("("+mes+")"); 67 //$('result').value=mes_obj.res; 68 //③+、json格式扩展 69 var mes=myXmlHttpRequest.responseText; 70 var mes_obj=eval("("+mes+")"); 71 $('result').value=mes_obj[0].res; 72 } 73 } 74 } 75 //封装一个函数,通过id号获取对象 76 function $(id){ 77 return document.getElementById(id); 78 } 79 </script> 80 <br/> 81 <strong style="color:red">发表留言</strong> 82 <form action="#" method="POST" name="frm"> 83 <table cellpadding="0" cellspacing="0" > 84 <tr> 85 <td >留言标题:</td> 86 <td><input type="text" name="title" autocomplete="off"/></td> 87 </tr> 88 <tr> 89 <td>网名:</td> 90 <td> 91 <input id="username" onkeyup="checkName();" type="text" name="username" autocomplete="off"/> 92 <td><input id="result" type="text" style="width:110px;font-size: 12px;border-width:0;" ></td> 93 </td> 94 </tr> 95 <tr> 96 <td>留言内容:</td> 97 <td><textarea name="content" cols="26" rows="5" autocomplete="off"/ onclick="showNotice(this)"></textarea></td> 98 </tr> 99 <tr> 100 <td></td> 101 <td><input class="btn" type="submit" name="submit" value="提交"/></td> 102 </tr> 103 </table> 104 </form> 105 </div> 106 </body> 107 </html>
registerPro1.php
1 <?php 2 //将数据(text格式,xml格式,json格式)返回到ajax引擎(3号线 http响应 ) 3 4 //header("Content-Type: text/xml; charset=utf-8"); //告诉浏览器,返回的是xml格式 5 header("Content-Type: text/html; charset=utf-8"); //告诉浏览器,返回的是text/json格式 6 $username = $_POST["username"]; 7 //① 8 // if($username=="abc"){ 9 // echo '网名不可用'; 10 // }else{ 11 // echo '网名可用'; 12 // } 13 //② 14 // $info=""; 15 // if($username=="abc"){ 16 // $info.="<res><mes>网名不可用</mes></res>"; 17 // }else{ 18 // $info.="<res><mes>网名可用</mes></res>"; 19 // } 20 // echo $info; 21 //③ 22 // $info=""; 23 // if($username=="abc"){ 24 // //这里的$info返回的是一个字串 25 // $info.='{"res":"不可用","id":"123","age":"5"}'; 26 // }else{ 27 // $info.='{"res":"可用","id":"3","age":"1"}'; 28 // } 29 // echo $info; 30 //③+ 31 $info=""; 32 if($username=="abc"){ 33 //这里的$info返回的是一个字串 34 $info.='[{"res":"不可用","id":"123","age":"5"},{"res":"abc不可用","id":"3","age":"0"}]'; 35 }else{ 36 $info.='[{"res":"可用","id":"1","age":"15"},{"res":"可用","id":"83","age":"9"}]'; 37 } 38 echo $info; 39 ?>
效果图
