如何验证用户名的唯一性

如何验证用户名的唯一性

创建一个ajax请求的步骤

本题考查的是ajax的应用，任何一个ajax的应用都会经历如下的流程：

1. 根据构造函数创建一个XMLHtttpRequest对象
2. 利用XMLHtttpRequest对象的open方法创建请求，设置请求方式、请求地址以及同步或异步
3. 调用XMLHtttpRequest对象的send方法发送请求
4. 使用XMLHtttpRequest对象的responseText或responseXML属性获取服务器响应数据
5. 调用XMLHtttpRequest对象的onreadystatechange事件监听XMLHtttpRequest对象的readyState属性值状态的变化
6. 处理服务器返回的结果

另外，需要了解的是，当前端界面需要从服务器获取数据的时候，其实就只要访问一个url地址，制定特定的参数即可。而服务器人员已经将此url地址对应的jsp或php开发好了。服务器开发人员开发好相关的接口之后，会提供一份接口文档，在接口文档中会详细的说明在需要什么数据的时候访问什么地址、传入什么参数等。

验证用户名唯一性步骤及源码

本文中分别以验证用户名和电话号码为例，分别发送get和post请求，并且分别返回字符串格式以及JSON格式。

操作步骤

1. 在form表单（action=""）中输入一个input标签（用来让用户输入用户名）以及一个空的span标签（用来显示用户名是否已经被使用）；
2. 在js中获取输入框，为其添加onblur事件，在获取输入框中的内容
3. 使用上面的ajax流程将输入框中的内容提交给服务器，由服务器进行唯一验证

用户名接口文件

地址	/server/checkUsername.php
作业描述	验证用户名是否可用
请求类型	get请求
参数	uname
返回数据的格式	普通字符串
返回数据说明	服务器返回ok代表用户名可用，返回error代表用户名不可用，此时需提示用户更换用户名

手机号接口文件

地址	/server/checkPhone.php
作业描述	验证手机号是否可用
请求类型	post请求
参数	e
返回数据的格式	JSON
返回数据说明	手机号可用返回{ “status”:0,“message”:{“tips”:“手机号可用”,“phonefrom”:“中国电信”}} 手机号不可用返回：{“status”:1,“message”:“手机号已被注册”}

代码

html代码

<form action="">
   用户名：<input type="text" id="username"><span id="username_result"></span><br>
    手机号码：<input type="text" id="phone"><span id="phone_result"></span><br>
</form>

验证用户名的js代码

    var username=document.querySelector("#username")
    username.onblur=function () {
        var usernameValue=username.value;
        //将usernameValue提交给服务器，由服务器进行唯一性校验
        //1、创建xhr对象 兼容处理（不做也可，IE6以下浏览器现在很少用）
        var xhr=null;
        if (window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        } else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP")
        }
        //2、设置请求方式请求地址
        xhr.open("get","./server/checkUsername.php?uname="+usernameValue,true)
        //3、发送请求
        //注意：使用get请求通过url传参，不需要通过请求主体发送数据，则send方法里必须传入null
        xhr.send(null);
        //4、制定回调函数
        xhr.onreadystatechange=function () {
            if (xhr.readyState===4){
                if (xhr.status===200){
                    var result=xhr.responseText;
                    var usernameResult=document.querySelector("#username_result")
                    if (result==="ok") {
                        usernameResult.innerText="用户名可以使用"
                    }else{
                        usernameResult.innerText="用户名已经被使用"
                    }
                } 
            } 
        }
    }

验证手机号的js代码

    var phone=document.querySelector("#phone")
    phone.onblur=function(){
        let phoneValue=phone.value;
        let xhr=null;
        if (window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        } else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP")
        }
        //post请求需要传递参数
        let param = "e=" +emailValue
        xhr.open("post","././server/checkUsername.php",true)
        // post请求需要设置头信息，且若要成功发送请求头部信息，必须在调用open()方法之后，调用send()方法之前调用setRequestHeader()
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        //send()方法接收一个参数，即要作为请求主体发送的数据
        xhr.send(param);
        xhr.onreadystatechange=function () {
            if (xhr.readyState===4){
                if (xhr.status===200){
                    var result=xhr.responseText;
                    var emailResult=document.querySelector("#email_result")
                    if (result==="ok") {
                        emailResult.innerText="用户名可以使用"
                    }else{
                        emailResult.innerText="用户名已经被使用"
                    }
                    var phoneResult=document.querySelector("#phone_result")
                    result=JSON.parse(result)
                    if (result.status===0){
                        phoneResult.innerText=result.message.tips +','+result.message.phonefrom;
                    }else{
                        phoneResult.innerText=result.message
                    }
                }
            }
        }
    }

通过上面的例子，我们可以得出post请求与get请求的几个区别：

1. 在调用send()方法的时候，get请求传入null，post请求传入作为请求主体发送的数据
2. post请求需要传递参数，格式为let param=“key=”+value,其中key由后端人员给出，服务器用该key来拿到用户所输入的值
3. post请求需要设置头信息，且若要成功发送请求头部信息，必须在调用open()方法之后，调用send()方法之前调用setRequestHeader(）