Ajax小實例用戶註冊異步驗證

時間 2020-02-17

標籤 ajax 實例用戶註冊異步驗證欄目 Ajax 简体版

原文原文鏈接

簡介javascript

51cto的程序員應該都有sina微博吧！你會發現當你更改新浪會員名稱，輸入用戶名Tab後，光標焦點移動到密碼輸出框時，用戶名輸出框的後面，就已經顯示出了驗證。驗證信息是：你的用戶名是否惟一，由於新浪微博和騰訊微博不同，她的會員用戶名都是惟一的，這樣好將用戶區分開，達到沒有重名的目的。php

若是用戶名已被註冊，就顯示「用戶名已存在」，用戶名還沒被註冊，就顯示「用戶名可用」。html

實現原理前端

1、當光標焦點移動到別處時，觸發js的window.onblur事件，調用Ajax對象java

2、將用戶名框內的字符串（document.getElementById(id).value）提交到後臺頁面mysql

3、與相應數據庫裏的數據進行比對，再將比對結果返回到界面上，呈現咱們面前的就是上面那樣的畫面。程序員

好處：實現頁面的局部刷新，在所有提交到後臺前，提早驗證並給出結果，提升了輸出的效率。ajax

下面不說那麼多了，直接上代碼：sql

demo.html 前端頁面就一個用戶名輸出框（很簡單吧！關鍵是弄懂原理）數據庫

public.js 封裝了對不一樣瀏覽器、建立不一樣Ajax對象的方法

ajax.js Ajax對象的封裝、方法的實現

demo.php 後臺頁面主要實現接收數據、選擇並鏈接數據庫、判斷接收的數據與數據庫比對

demo.html

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
            <title>用戶輸入</title>
            <script language="javascript" src="public.js"></script>
            <script language="javascript" src="ajax.js"></script>
        </head>
    
        <body onload="response()">
            <form>
                 用戶名：
                 <input type="text" name="username" id="username"/><span id="msg"></span>
            </form>
        </body>

public.js

        function createxhr(){
            try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}
            try{return new XMLHttpRequest}catch(e){}
            alert("請更換瀏覽器");
        }
        //獲取DOM對象的id值
        function $(id){
            return document.getElementById(id);
        }

ajax.js

        function response(){        
            $('username').onblur = function(){
                var uname = this.value; //面向對象編程，this指代"$('username')"
                var xhr = createxhr();
                //應用getTime()方法解決IE緩存問題
                var url = "demo.php?username="+uname+'&_'+new Date().getTime();
                xhr.open('get',url);
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && xhr.status == 200){
                        var value = xhr.responseText;
                        if (value == 1){
                            $('msg').innerHTML = '<font color = red>用戶名已存在</font>';
                        }else{
                            $('msg').innerHTML = '<font color = green>用戶名可用</font>';
                        }
                    }
                };
                xhr.send(null);
            };
        };

demo.php

        //接收傳遞數據
        $username = $_GET['username'];
        
        //鏈接、選擇數據庫
        mysql_connect('localhost','root','111111');
        mysql_select_db('shop');
        mysql_query('set names gb2312');
        //sql語句、執行
        $sql = "select * from users where username='$username'";
        $result = mysql_query($sql);
        $num = mysql_num_rows($result);//得到結果集的行數
        
        //判斷結果集行數
        if($num>0){
            echo 1;
        }else{
            echo 2;
        }

查看結果：