php+Ajax無(wú)刷新驗(yàn)證用戶名操作實(shí)例詳解

2024-05-05 00:07:08

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了php+Ajax無(wú)刷新驗(yàn)證用戶名操作。分享給大家供大家參考，具體如下：

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、用戶可用

php,Ajax,無(wú)刷新,驗(yàn)證,用戶名

2、用戶不可用

php,Ajax,無(wú)刷新,驗(yàn)證,用戶名

3、項(xiàng)目文件（register.php-注冊(cè)頁(yè)面和process.php-判斷用戶名是否可用）

php,Ajax,無(wú)刷新,驗(yàn)證,用戶名

二、代碼

<!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 style="border-width:0;color: #e93b3d" 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)證,用戶名