<!DOCTYPE html> <html> <head> <title>用户注册</title> <meta charset="utf-8"> <script language="javascript" type="text/javascript" > //创建ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest; //不同浏览器获取xmlHttpRequest对象方法不一样 if(window.ActiveXObject){ //window.alert("ie"); xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else{ //window.alert("no ie"); xmlHttpRequest=new XMLHttpRequest(); } return xmlHttpRequest; } var myXmlHttpRequest=""; //验证用户名是否存在 function checkName(){ myXmlHttpRequest=getXmlHttpObject(); //怎么判断创建ok if(myXmlHttpRequest){ //window.alert("创建成功"); //通过myXmlHttpRequest对象发送请求到服务器的某个页面 //第一个参数表示请求的方式，"get"/"post" //第二个参数指定url,对哪个页面发出ajax请求（本质仍然是http请求) //第三个参数表示true 表示使用异步机制，如果false表示不使用异步 //var url="/registerProcess.php?username="+new Date()+$("username").value; /*var url="/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;*/ var url="/registerProcess.php"; //这个是要发送的数据 var data="username="+$("username").value; //打开请求,准备发送,,true表示同步处理 myXmlHttpRequest.open("post", url, true); //还有一句话，这句话必须 //在编程过程中，建议用Post，post会更好一些 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //指定回调函数.chuli是函数名 myXmlHttpRequest.onreadystatechange=chuli; //真的发送请求，如果是get请求则填入 null即可 //如果是post请求，则填入实际的数据 myXmlHttpRequest.send(data); //状态改变的触发器 //myXmlHttpRequest.open("get"); }else{ //window.alert("创建失败"); } } //回调函数 function chuli(){ //window.alert("处理函数被调回"+myXmlHttpRequest.readyState); //我要取出从regiseterPro.php页面返回的数据 if(myXmlHttpRequest.readyState==4){ //取出值，根据返回信息的格式定.text //window.alert("服务器返回"+myXmlHttpRequest.responseText); //$("myres").value=myXmlHttpRequest.responseText; //看看如何取出xml格式数据 //window.alert(myXmlHttpRequest.responseXML); //获取mes节点 var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes"); //取出mes节点值 //window.alert(mes.length); //mes[0]->表示取出第一个mes节点 //mes[0].childNodes[0]->表示第一个mes节点的第一个子节点 var mes_val=mes[0].childNodes[0].nodeValue; //window.alert(mes_val); $("myres").value=mes_val; } } function $(id){ return document.getElementById(id); } </script> </head> <body> <form > 用户名字<input type="text" name="username1" id="username" /><input type="button" value="验证用户名" onclick="checkName()"/> <input type="text" style="border-0;color:red" id="myres"/> <br/> 用户密码<input type="password" name="password" id="password"/><br/> 电子邮件<input type="text" name="email" id="email"/><br/> <input type="submit" value="用户注册"/><br/><br/> 用户名字<input type="text" name="username1" /> <input type="text" style="border-0;color:red"/> <br/> 用户密码<input type="password" name="password"/><br/> 电子邮件<input type="text" name="email"/><br/> <input type="button" value="用户注册"/> </form> </body> </html>
服务器端代码
<?php //这里两句话很重要，第一句话告诉浏览器返回的数据是xml格式 header("Content-type: text/xml; charset=utf-8"); //如果这里写成Content-type: text/html，会报错，得不到数据 //告诉浏览器不要缓存数据 header("Cache-Control:no-cache"); //接收数据（这里要和请求方式对应 _POST 还是 _GET $username=$_POST['username']; $info=""; if($username=="shunping"){ $info.="<res><mes>用户名不可以用，对不起</mes></res>";//注意，这里数据是返回给请求的页面 }else if($username!=""){ $info.="<res><mes>用户名可以用，恭喜</mes></res>"; } echo $info; ?>