php+Ajax無刷新驗證用戶名操作實例詳解

更新時間：2019年03月04日 08:39:49 作者：致Great

這篇文章主要介紹了php+Ajax無刷新驗證用戶名操作,簡單介紹了ajax的原理并結合實例形式分析了php結合ajax無刷新驗證用戶名相關操作技巧,需要的朋友可以參考下

本文實例講述了php+Ajax無刷新驗證用戶名操作。分享給大家供大家參考，具體如下：

AJAX 簡介

AJAX = Asynchronous JavaScript And XML（異步 JavaScript 及 XML）
AJAX 是 Asynchronous JavaScript And XML 的首字母縮寫。
AJAX 并不是一種新的編程語言，而僅僅是一種新的技術，它可以創(chuàng)建更好、更快且交互性更強的 web 應用程序。
AJAX 使用 JavaScript 在 web 瀏覽器與 web 服務器之間來發(fā)送和接收數(shù)據(jù)。
通過在幕后與 web 服務器交換數(shù)據(jù)，而不是每當用戶作出改變時重載整個 web 頁面，AJAX 技術可以使網頁更迅速地響應

Ajax請求

傳統(tǒng)的 web 應用程序會把數(shù)據(jù)提交到 web 服務器（使用 HTML 表單）。在 web 服務器把數(shù)據(jù)處理完畢之后，會向用戶返回一張完整的新網頁。
由于每當用戶提交輸入，服務器就會返回新網頁，傳統(tǒng)的 web 應用程序往往運行緩慢，且越來越不友好。
通過 AJAX，web 應用程序無需重載網頁，就可以發(fā)送并取回數(shù)據(jù)。完成這項工作，需要通過向服務器發(fā)送 HTTP 請求（在幕后），并通過當服務器返回數(shù)據(jù)時使用 JavaScript 僅僅修改網頁的某部分。
一般使用 XML 作為接收服務器數(shù)據(jù)的格式，盡管可以使用任何格式，包括純文本。

無刷驗證新用戶名

自己最近看視頻自學ajax，想把一些實例分享給大家，第一個案列是無刷新驗證用戶名是否可用。

一、效果圖

1、用戶可用

2、用戶不可用

3、項目文件（register.php-注冊頁面和process.php-判斷用戶名是否可用）

二、代碼

register.php-注冊頁面以及ajax發(fā)送請求

<!doctypehtml>
<htmllang="en">
<head>
  <meta charset="UTF-8">
  <title>注冊</title>
  <scripttype="text/javascript">
    //創(chuàng)建ajax引擎
    function getXmlHttpObject(){
      var xmlHttpRequest;
      //不同瀏覽器獲取對象XMLHttpRequest
      if(window.ActiveXObject){
        xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
      }
      else{
        xmlHttpRequest=newXMLHttpRequest();
      }
      return xmlHttpRequest;
    }
    var myXmlHttpRequest="";
    //驗證用戶名是否存在
    function checkName(){
      myXmlHttpRequest=getXmlHttpObject();
      //判斷xmlHttpRequest是否成功
      if(myXmlHttpRequest){
        //通過myXmlHttpRequest對象發(fā)送請求到服務器的某個頁面
        //第一個參數(shù)標示請求的方式，‘get'、‘post'
        //第二個參數(shù)指定url，對那個頁面發(fā)送ajax請求（本質仍然是http請求）
        /*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引擎成功');
        //指定回調函數(shù),chuili是函數(shù)名
        myXmlHttpRequest.onreadystatechange=chuli;//調用
        //真的發(fā)送請求，如果是各塔請求則填入null即可
        //如果是post請求,則填入實際數(shù)據(jù)
        myXmlHttpRequest.send(null);
      }
      else
      {
//        window.alert('創(chuàng)建失敗');
      }
    }
    function chuli(){
      // window.alert("cuhli函數(shù)被調用"+myXmlHttpRequest.readyState);
      //我要取出從register.php返回的數(shù)據(jù)
      if(myXmlHttpRequest.readyState==4){
        //取出值，根據(jù)返回信息的數(shù)據(jù)格式
        //window.alert("服務器返回"+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="驗證用戶名">
  <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="用戶注冊">
</form>
</body>
</html>

process.php—判斷用戶名是否可用

<?php
  //接受數(shù)據(jù)
  $username=$_GET['username'];
//  echo "用戶名".$username;
  if($username=="李四"){
    echo "用戶名不可用";
  }
  else{
    echo"恭喜用戶名可用";
  }
?>

三、原理圖