<!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-width: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-width: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; ?>