以用戶注冊為例:
register.php
<html><head><title>用戶注冊</title><meta http-equiv="content-type" content="text/html;charset=utf-8"/><script type="text/javascript"> //創建ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest; //不同的瀏覽器獲取對象xmlhttprequest 對象方法不一樣 if(window.ActiveXObject){ xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttpRequest=new XMLHttpRequest(); } return xmlHttpRequest; } var myXmlHttpRequest=""; //驗證用戶名是否存在 function checkName(){ myXmlHttpRequest=getXmlHttpObject(); //怎么判斷創建ok if(myXmlHttpRequest){ //通過myXmlHttpRequest對象發送請求到服務器的某個頁面 //第一個參數表示請求的方式, "get" / "post" //第二個參數指定url,對哪個頁面發出ajax請求(本質仍然是http請求) //第三個參數表示 true表示使用異步機制,如果false表示不使用異步 var url="regisgerProcess.php"; //這個是要發送的數據 var data="username="+$('username').value; //打開請求. myXmlHttpRequest.open("post",url,true); //還有一句話,這句話必須. myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //指定回調函數.chuli是函數名 myXmlHttpRequest.onreadystatechange=chuli; //真的發送請求,如果是get請求則填入 null即可 //如果是post請求,則填入實際的數據 myXmlHttpRequest.send(data); } } //回調函數 function chuli(){ //window.alert("處理函數被調回"+myXmlHttpRequest.readyState); //我要取出從registerPro.php頁面返回的數據 if(myXmlHttpRequest.readyState==4){ //取出值,根據返回信息的格式定.text //window.alert("服務器返回"+myXmlHttpRequest.responseText); //$('myres').value=myXmlHttpRequest.responseText; //看看如果取出 xml格式數據 //window.alert(myXmlHttpRequest.responseXML); //取出text或json數據用下面方式:獲取mes節點 var mes=myXmlHttpRequest.responseText; window.alert(mes); //使用 eval 函數將 mes字符串轉換為對應的對象,注意eval函數格式如下: mes_obj = eval ("(" + mes + ")"); window.alert(mes_obj.res); $('myres').value=mes_obj.res; } } //這里我們寫一個函數 function $(id){ return document.getElementById(id); }</script></head><body> <form action="regisgerProcess.php" method="post"> 用戶名字:<input type="text" name="username1" id="username"><input type="button" onclick="checkName();" value="驗證用戶名"> <input style="border-width: 0;color: red" type="text" id="myres"> <br/> 用戶密碼:<input type="password" name="password"><br> 電子郵件:<input type="text" name="email"><br/> <input type="submit" value="用戶注冊"> </form> <form action="???" method="post"> 用戶名字:<input type="text" name="username2" > <br/> 用戶密碼:<input type="password" name="password"><br> 電子郵件:<input type="text" name="email"><br/> <input type="submit" value="用戶注冊"> </form> </body></html>
新聞熱點
疑難解答
圖片精選