您好,登錄后才能下訂單哦!
這篇文章主要介紹php+Ajax無(wú)刷新驗(yàn)證用戶名操作的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
具體如下:
AJAX 簡(jiǎn)介
AJAX = Asynchronous JavaScript And XML(異步 JavaScript 及 XML)
AJAX 是 Asynchronous JavaScript And XML 的首字母縮寫(xiě)。
AJAX 并不是一種新的編程語(yǔ)言,而僅僅是一種新的技術(shù),它可以創(chuàng)建更好、更快且交互性更強(qiáng)的 web 應(yīng)用程序。
AJAX 使用 JavaScript 在 web 瀏覽器與 web 服務(wù)器之間來(lái)發(fā)送和接收數(shù)據(jù)。
通過(guò)在幕后與 web 服務(wù)器交換數(shù)據(jù),而不是每當(dāng)用戶作出改變時(shí)重載整個(gè) web 頁(yè)面,AJAX 技術(shù)可以使網(wǎng)頁(yè)更迅速地響應(yīng)
Ajax請(qǐng)求
傳統(tǒng)的 web 應(yīng)用程序會(huì)把數(shù)據(jù)提交到 web 服務(wù)器(使用 HTML 表單)。在 web 服務(wù)器把數(shù)據(jù)處理完畢之后,會(huì)向用戶返回一張完整的新網(wǎng)頁(yè)。
由于每當(dāng)用戶提交輸入,服務(wù)器就會(huì)返回新網(wǎng)頁(yè),傳統(tǒng)的 web 應(yīng)用程序往往運(yùn)行緩慢,且越來(lái)越不友好。
通過(guò) AJAX,web 應(yīng)用程序無(wú)需重載網(wǎng)頁(yè),就可以發(fā)送并取回?cái)?shù)據(jù)。完成這項(xiàng)工作,需要通過(guò)向服務(wù)器發(fā)送 HTTP 請(qǐng)求(在幕后),并通過(guò)當(dāng)服務(wù)器返回?cái)?shù)據(jù)時(shí)使用 JavaScript 僅僅修改網(wǎng)頁(yè)的某部分。
一般使用 XML 作為接收服務(wù)器數(shù)據(jù)的格式,盡管可以使用任何格式,包括純文本。
無(wú)刷驗(yàn)證新用戶名
自己最近看視頻自學(xué)ajax,想把一些實(shí)例分享給大家,第一個(gè)案列是無(wú)刷新驗(yàn)證用戶名是否可用。
一、效果圖
1、用戶可用
2、用戶不可用
3、項(xiàng)目文件(register.php-注冊(cè)頁(yè)面 和process.php-判斷用戶名是否可用)
二、代碼
register.php-注冊(cè)頁(yè)面以及ajax發(fā)送請(qǐng)求
<!doctypehtml> <htmllang="en"> <head> <meta charset="UTF-8"> <title>注冊(cè)</title> <scripttype="text/javascript"> //創(chuàng)建ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest; //不同瀏覽器獲取對(duì)象XMLHttpRequest if(window.ActiveXObject){ xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP"); } else{ xmlHttpRequest=newXMLHttpRequest(); } return xmlHttpRequest; } var myXmlHttpRequest=""; //驗(yàn)證用戶名是否存在 function checkName(){ myXmlHttpRequest=getXmlHttpObject(); //判斷xmlHttpRequest是否成功 if(myXmlHttpRequest){ //通過(guò)myXmlHttpRequest對(duì)象發(fā)送請(qǐng)求到服務(wù)器的某個(gè)頁(yè)面 //第一個(gè)參數(shù)標(biāo)示請(qǐng)求的方式,‘get'、‘post' //第二個(gè)參數(shù)指定url,對(duì)那個(gè)頁(yè)面發(fā)送ajax請(qǐng)求(本質(zhì)仍然是http請(qǐng)求) /*XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser,bstrPassword); */ varurl="/Ajax/process.php?username="+$("username").value; //window.alert(url); myXmlHttpRequest.open("get",url,true); //window.alert('創(chuàng)建ajax引擎成功'); //指定回調(diào)函數(shù),chuili是函數(shù)名 myXmlHttpRequest.onreadystatechange=chuli;//調(diào)用 //真的發(fā)送請(qǐng)求,如果是各塔請(qǐng)求則填入null即可 //如果是post請(qǐng)求,則填入實(shí)際數(shù)據(jù) myXmlHttpRequest.send(null); } else { // window.alert('創(chuàng)建失敗'); } } function chuli(){ // window.alert("cuhli函數(shù)被調(diào)用"+myXmlHttpRequest.readyState); //我要取出從register.php返回的數(shù)據(jù) if(myXmlHttpRequest.readyState==4){ //取出值,根據(jù)返回信息的數(shù)據(jù)格式 //window.alert("服務(wù)器返回"+myXmlHttpRequest.responseText); $('myres').value=myXmlHttpRequest.responseText; } } function $(id){ return document.getElementById(id); } </script> </head> <body> <formaction="???" method="post"> 用戶名字:<inputtype="text" name="username1"onkeyup="checkName()" id="username"> <input type="button"value="驗(yàn)證用戶名"> <input type="text" id="myres"> <br/> 用戶密碼:<inputtype="password" name="password"><br> 電子郵件:<inputtype="text" name="email"><br/> <input type="submit"value="用戶注冊(cè)"> </form> </body> </html>
process.php—判斷用戶名是否可用
<?php //接受數(shù)據(jù) $username=$_GET['username']; // echo "用戶名".$username; if($username=="李四"){ echo "用戶名不可用"; } else{ echo"恭喜用戶名可用"; } ?>
三、原理圖
以上是“php+Ajax無(wú)刷新驗(yàn)證用戶名操作的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。