ajax检查用户名是否注册的实例代码(图文)

发布时间:2020-07-20编辑:脚本学堂
本文介绍下,使用ajax检测用户是否被注册的一例代码,分享给大家,有需要的朋友作个参考吧。

1,用户注册页面 register.php
 

复制代码 代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户注册---www.jb200.com</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript">   
    //创建ajax引擎
    function getXMLHttpRequest(){
        var xmlHttp;
        if(window.ActiveXObject){
            // Internet Explorer
            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            // Firefox, Opera 8.0+, Safari
            xmlHttp= new XMLHttpRequest();
        }

        return xmlHttp;
    }
   
    //验证用户
    var xmlHttpRequest;
    function checkUser(){
        xmlHttpRequest=getXMLHttpRequest();
        //清除缓存 get 方式提交
/* var url="/ajax/registerProcess.php?time="+new Date()+"&username="+$("username").value;
   //var url="/ajax/registerProcess.php?username="+$("username").value;
   xmlHttpRequest.open("get",url,true);
   //触发器
   xmlHttpRequest.onreadystatechange=check;
   xmlHttpRequest.send(null);
*/       
   //post 方式提交
   var url="/ajax/registerProcess.php";
   var data="username="+$("username").value;
   xmlHttpRequest.open("post",url,true);
   //post请求需要加入这句
   xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //触发器
   xmlHttpRequest.onreadystatechange=check;
   xmlHttpRequest.send(data);
}

    //回调函数
    function check(){
        if(xmlHttpRequest.readyState==4){
            if(xmlHttpRequest.status=='200'){
                //window.alert("OK");
                //window.alert("返回用户名"+xmlHttpRequest.responseText);
                //$("myres").value=xmlHttpRequest.responseText;

                //返回是个对象
                /* //处理xml数据
                //window.alert(xmlHttpRequest.responseXML);
                var mes=xmlHttpRequest.responseXML.getElementsByTagName("mes");
                var mes_val=mes[0].childNodes[0].nodeValue;
                $("myres").value=mes_val;
                */
                //处理json数据 使用eval()函数把返回的字符串转成对应的对象
                var mes=xmlHttpRequest.responseText;
                var mes_obj=eval("("+mes+")");
                //window.alert(mes_obj);
                $("myres").value=mes_obj.res;

            }
        }
    }
    //获取dom对象
    function $(id){
        return document.getElementById(id);
    }
</script>
  </head> 
  <body>
    <form action="???" method="post">
    用户名字:<input type="text"  name="username1" id="username"><input type="button" onclick="checkUser();" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres">
    <br/>
    用户密码:<input type="password" name="password"><br>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
    </form>
  </body>
</html>

2,接收用户注册信息 registerProcess.php
 

复制代码 代码示例:

<?php
    //告诉浏览器返回的数据是xml格式
    //header("Content-Type: text/xml;charset=utf-8");
    //告诉浏览器返回的数据是文本格式
    header("Content-Type: text/html;charset=utf-8");
    //告诉浏览器不要缓存数据
    header("Cache-Control: no-cache");

    //接收
    //$username=$_GET['username'];
    $username=$_POST['username'];
   
    $info="";
    if($username=="test1"){
        //echo "用户已注册";
        //$info.="<res><mes>用户名已注册</mes></res>";
        $info='{"res":"用户名已注册"}';
    }else{
        //echo "可以注册";
        //$info.="<res><mes>可以注册</mes></res>";
        $info='{"res":"可以注册"}';
    }
    echo $info;
?>
 

演示效果图:
ajax验证用户注册