從零開始學 Web 之 Ajax（四）接口文檔，驗證用戶名惟一性案例

時間 2019-11-17

標籤開始 web ajax 接口文檔驗證用戶名惟一案例欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......php

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

接口文檔的使用

需求：使用接口文檔驗證用戶名、郵箱、手機的惟一性前端

接口文檔

當前端界面須要從服務器獲取數據的時候，其實就是眼訪問一個 URL 地址，指定特定的參數便可。這個 URL 對應的是 php 或者 jsp 等都是服務器開發人員已經開發好了。服務器開發人員開發好相關的接口以後，會提供一份接口文檔給前端開發人員，在接口中會詳細說明你要獲取什麼數據，訪問什麼地址，傳入什麼參數等等內容，下面就是一個簡單接口文檔的內容：git

驗證用戶名惟一性的接口github

地址	/server/checkUsername.php
做用描述	驗證用戶名是否可用
請求類型	get 請求
參數	uname
返回的數據格式	普通字符串
返回數聽說明	返回 ok：表明用戶名可用；返回 error：表明用戶名不可用。

驗證郵箱惟一性的接口json

地址	/server/checkEmail.php
做用描述	驗證郵箱是否可用
請求類型	post 請求
參數	e
返回的數據格式	數字
返回數聽說明	返回 0：表明郵箱可用；返回 1：表明郵箱不可用。

驗證手機號惟一性的接口服務器

地址	/server/checkPhone.php
做用描述	驗證手機號是否可用
請求類型	post 請求
參數	phonenumber
返回的數據格式	json格式
返回數聽說明	以下：

手機號可用狀況下返回以下：
{
  "status":0,
  "message":{
    "tips":"手機號可用",
    "phonefrom":"中國電信"
  }
}
手機號不可用狀況下返回以下：
{
  "status":1,
  "message":"手機號已被註冊"
}

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="dv">
        <h1>用戶註冊</h1>
        用戶名：<input type="text" name="username"><span id="user-span"></span><br>
        郵箱：<input type="text" name="email"><span id="email-span"></span><br>
        手機：<input type="text" name="phone"><span id="phone-span"></span><br>
    </div>
    <script>

        // 獲取全部元素
        var userObj = document.getElementsByName("username")[0];
        var emailObj = document.getElementsByName("email")[0];
        var phoneObj = document.getElementsByName("phone")[0];

        var userSpanObj = document.getElementById("user-span");
        var emailSpanObj = document.getElementById("email-span");
        var phoneSpanObj = document.getElementById("phone-span");

        //用戶名文本框失去焦點事件
        userObj.onblur = function () {  
            // 獲取文本內容
            var userText = this.value;

            var xhr = new XMLHttpRequest();
            xhr.open("get", "./server/checkUsername.php?uname="+userText, true);
            xhr.send(null);
            xhr.onreadystatechange = function () {  
                if(this.readyState == 4) {
                    if(this.status == 200) {
                        if(this.responseText == "ok") {
                            userSpanObj.innerHTML = "用戶名可用";
                        } else if(this.responseText == "error") {
                            userSpanObj.innerHTML = "用戶名不可用";
                        }
                    }
                }
            };
        };
        
        //郵箱文本框失去焦點事件
        emailObj.onblur = function () {  
            // 獲取文本內容
            var emailText = this.value;

            var xhr = new XMLHttpRequest();
            xhr.open("post", "./server/checkEmail.php", true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send("e="+emailText);
            xhr.onreadystatechange = function () {  
                if(this.readyState == 4) {
                    if(this.status == 200) {
                        console.log(this.responseText);
                        if(this.responseText == 0) {
                            emailSpanObj.innerHTML = "郵箱可用";
                        } else if(this.responseText == 1) {
                            emailSpanObj.innerHTML = "郵箱不可用";
                        }
                    }
                }
            };
        };

        //手機號文本框失去焦點事件
        phoneObj.onblur = function () {  
            // 獲取文本內容
            var phoneText = this.value;

            var xhr = new XMLHttpRequest();
            xhr.open("post", "./server/checkPhone.php", true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send("phonenumber="+phoneText);
            xhr.onreadystatechange = function () {  
                if(this.readyState == 4) {
                    if(this.status == 200) {
                        var val = JSON.parse(this.responseText);
                        // console.log(val.status);
                        if(val.status == 0) {
                            phoneSpanObj.innerHTML = val.message.tips + " " + val.message.phonefrom;
                        } else if(val.status == 1) {
                            phoneSpanObj.innerHTML = val.message;
                        }
                        
                    }
                }
            };
        };
        
    </script>
</body>
</html>

書寫以上代碼的過程當中，徹底不須要查看對應的 php 文件，只須要查看接口文檔就能夠搞定。微信

代碼第一步封裝

上面驗證用戶名，郵箱和手機號的時候，都是使用的 Ajax 的四部操做，有不少代碼冗餘，因此將 Ajax 的四步操做封裝在一個函數中頗有必要的。app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="dv">
        <h1>用戶註冊</h1>
        用戶名：<input type="text" name="username"><span id="user-span"></span><br>
        郵箱：<input type="text" name="email"><span id="email-span"></span><br>
        手機：<input type="text" name="phone"><span id="phone-span"></span><br>
    </div>
    <script>

        // Ajax 四步操做的封裝函數
        function myAjax(type, url, param, async, dataType, callback) {           
            var xhr = null;
            // 兼容性處理
            if(window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            if((type == "get") || (type == "GET")) {
                if(param && param != "") {
                    url += "?" + param;
                }
                xhr.open(type, url, async);
                xhr.send(null);
            } else if((type == "post") || (type == "POST")) {
                xhr.open(type, url, async);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send(param);
            }

            if(async) {
                xhr.onreadystatechange = function () {
                    if(this.readyState == 4) {
                        if(this.status == 200) {
                            if(dataType == "xml") {
                                callback(this.responseXML);
                            } else if(dataType == "json") {
                                callback(JSON.parse(this.responseText));
                            } else {
                                callback(this.responseText);
                            }
                            
                        }
                    }
                };
            } else {
                if(this.readyState == 4) {
                    if(this.status == 200) {
                        if(dataType == "xml") {
                            callback(this.responseXML);
                        } else if(dataType == "json") {
                            callback(JSON.parse(this.responseText));
                        } else {
                            callback(this.responseText);
                        }
                        
                    }
                }
            }
        }

        // 獲取全部元素
        var userObj = document.getElementsByName("username")[0];
        var emailObj = document.getElementsByName("email")[0];
        var phoneObj = document.getElementsByName("phone")[0];

        var userSpanObj = document.getElementById("user-span");
        var emailSpanObj = document.getElementById("email-span");
        var phoneSpanObj = document.getElementById("phone-span");

        //用戶名文本框失去焦點事件
        userObj.onblur = function () {  
            // 獲取文本內容
            var userText = this.value;

            myAjax("get", "./server/checkUsername.php", "uname="+userText, "true", "text", function (result) {  
                if(result == "ok") {
                    userSpanObj.innerHTML = "用戶名可用";
                } else if(result == "error") {
                    userSpanObj.innerHTML = "用戶名不可用";
                }
            });
        };
        
        //郵箱文本框失去焦點事件
        emailObj.onblur = function () {  
            // 獲取文本內容
            var emailText = this.value;

            myAjax("post", "./server/checkEmail.php", "e="+emailText, "true", "text", function (result) {  
                if(result == 0) {
                    emailSpanObj.innerHTML = "郵箱可用";
                } else if(result == 1) {
                    emailSpanObj.innerHTML = "郵箱不可用";
                }
            });
        };

        //手機號文本框失去焦點事件
        phoneObj.onblur = function () {  
            // 獲取文本內容
            var phoneText = this.value;

            myAjax("post", "./server/checkPhone.php", "phonenumber="+phoneText, "true", "json", function (result) {  
                if(result.status == 0) {
                    phoneSpanObj.innerHTML = result.message.tips + " " + result.message.phonefrom;
                } else if(result.status == 1) {
                    phoneSpanObj.innerHTML = result.message;
                }
            });
        };
        
    </script>
</body>
</html>

仍然存在的問題：jsp

一、參數的順序不可改變；

二、參數沒有默認值，全部的參數必須傳遞。

代碼進一步封裝

將須要傳入的參數作成一個對象，這個對象全部的有默認參數，若是沒有傳入一些參數的話，使用默認參數代替；若是傳入了相關參數，則覆蓋掉默認參數。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="dv">
        <h1>用戶註冊</h1>
        用戶名：<input type="text" name="username"><span id="user-span"></span><br>
        郵箱：<input type="text" name="email"><span id="email-span"></span><br>
        手機：<input type="text" name="phone"><span id="phone-span"></span><br>
    </div>
    <script>
        function myAjax2(obj) { 
            var defaults = {
                type: "get",
                url: "#",
                dataType: "",
                data: {}, // 參數有可能多個，用對象保存
                async: true,
                success: function (result) {
                    console.log(result);
                }
            };

            for(var key in obj) {
                defaults[key] = obj[key];
            }

            var xhr = null;
            if(window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            var param = "";
            for(var attr in defaults.data) {
                param += attr + "=" + defaults.data[attr] + "&" // 好比：uname=zhangsan&pwd=123
            }
            // 最後一個參數後面去掉 &
            if(param) {
                param = param.substring(0, param.length-1);
            }

            if((defaults.type == "get") || (defaults.type == "GET")) {
                defaults.url += "?" + param;
            }
                
            xhr.open(defaults.type, defaults.url, defaults.async);

            if((defaults.type == "get") || (defaults.type == "GET")) {
                xhr.send(null);
            } else if((defaults.type == "post") || (defaults.type == "POST")) {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send(param);
            }

            if(defaults.async) {
                xhr.onreadystatechange = function () {
                    if(this.readyState == 4) {
                        if(this.status == 200) {
                            if(defaults.dataType == "xml") {
                                defaults.success(this.responseXML);
                            } else if(defaults.dataType == "json") {
                                defaults.success(JSON.parse(this.responseText));
                            } else {
                                defaults.success(this.responseText);
                            }
                        }
                    }
                };
            } else {
                if(this.readyState == 4) {
                    if(this.status == 200) {
                        if(defaults.dataType == "xml") {
                            defaults.success(this.responseXML);
                        } else if(defaults.dataType == "json") {
                            defaults.success(JSON.parse(this.responseText));
                        } else {
                            defaults.success(this.responseText);
                        }
                    }
                }
            }
        }

        // 獲取全部元素
        var userObj = document.getElementsByName("username")[0];
        var emailObj = document.getElementsByName("email")[0];
        var phoneObj = document.getElementsByName("phone")[0];

        var userSpanObj = document.getElementById("user-span");
        var emailSpanObj = document.getElementById("email-span");
        var phoneSpanObj = document.getElementById("phone-span");

        //用戶名文本框失去焦點事件
        userObj.onblur = function () {  
            myAjax2({
                url: "./server/checkUsername.php",
                type: "get",
                data: {uname: this.value},
                success: function (result) {
                    if(result == "ok") {
                        userSpanObj.innerHTML = "用戶名可用";
                    } else if(result == "error") {
                        userSpanObj.innerHTML = "用戶名不可用";
                    }
                }
            });
        };
        
        //郵箱文本框失去焦點事件
        emailObj.onblur = function () {  
            myAjax2({
                url: "./server/checkEmail.php",
                type: "post",
                data: {e: this.value},
                success: function (result) {
                    if(result == 0) {
                        emailSpanObj.innerHTML = "郵箱可用";
                    } else if(result == 1) {
                        emailSpanObj.innerHTML = "郵箱不可用";
                    }
                }
            });
        };

        //手機號文本框失去焦點事件
        phoneObj.onblur = function () {
            myAjax2({
                url: "./server/checkPhone.php",
                type: "post",
                dataType: "json",
                data: {phonenumber: this.value},
                success: function (result) {
                    if(result.status == 0) {
                        phoneSpanObj.innerHTML = result.message.tips + " " + result.message.phonefrom;
                    } else if(result.status == 1) {
                        phoneSpanObj.innerHTML = result.message;
                    }
                }
            });
        };

    </script>
</body>
</html>