AJAX(三)--实例无刷新验证用户名是否存在

最新推荐文章于 2021-03-10 19:50:56 发布

哇刚好六个字

最新推荐文章于 2021-03-10 19:50:56 发布

阅读量732

点赞数

本文详细解析了AJAX技术如何在淘宝账户注册过程中实现账户名自动检测，提高了用户体验，通过客户端脚本与服务器端交互，避免了刷新整个页面的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道在注册淘宝账户时，当我们注册的账户名与其他人同名的时候，系统会自动的给出提示，并且给出推荐使用的账户名，并没有完全的刷新整个页面，而是悄悄的向服务器端发送请求进行验证，让我们感觉很舒服，这就是AJAX技术的作用，大大增加了用户体验。

我们查看源代码就可以看到客户端脚本，使用的AJAX技术。

注册界面代码：

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

    <title>ajax例子--登录用户名自动检测无需再设置其他的按钮</title>  

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />  

      <script type="text/javascript">  

          //定义XMLHttpRequest对象，var是可变参数类型，代表任何一种数据类型。  

          var xmlHttp = false;  

          //该时候检查输入用户名数据库中是否已经存在。  

          function checkUserName() {  

              // 检查输入的用户名是否为空。  

              var tbUserName = document.getElementById('tbUserName');  

              if (tbUserName.value == "")  

                  return;  

              // 创建 XMLHttpRequest 对象  

              try {  

                    //使用较新版本的IE浏览器。  

                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  

              }  

              catch (e) {  

                  try {  

                        //如果为低版本的浏览器。  

                      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

                  }  

                  catch (e2) {  

                       //XMLHttpRequest对象创建失败，保证Request的值仍为false。  

                      xmlHttp = false;  

                  }  

              }  

              //验证创建是否成功，不为ie，则为除了ie之外的谷歌 360 火狐等浏览器。  

              if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {  

                  xmlHttp = new XMLHttpRequest();  

              }  

              // 转到的链接地址。  

              var url = "CheckUserNameService.aspx?UserName=" + tbUserName.value;  

              // 规定请求的类型、URL 以及是否异步处理请求。Get类型，true为异步执行。  

              xmlHttp.open("GET", url, true);  

              //onreadystatechange.也就是XMLHttRequest对象的readyState属性改变时。当请求被发送时执行的一些响应任务。  

              xmlHttp.onreadystatechange = callBack_CheckUserName;  

              // Send the request  

              xmlHttp.send(null);  

          }  

          //以参数形式传递到另一个函数的函数。  

          function callBack_CheckUserName() {  

              //readyState方法是存有XMLHttpRequest状态，从0到4。  

              //0是请求未初始化，1服务器连接已经建立 2 请求已经接受 3 请求处理中 4 请求已完成，且响应已就绪。  

              if (xmlHttp.readyState == 4) {  

                //  如果服务器的响应并非是XML使用responseText否则使用responseXML。responsText返回服务器字符串形式的响应。  

                  var isValid = xmlHttp.responseText;  

                  //选择出显示验证结果的标签。  

                  var checkResult = document.getElementById("checkResult");  

                  //innerHtml为脱去标签的的外衣。例如，<span>您好</span>，显示您好。  

                  checkResult.innerHTML = (isValid =="true") ? "恭喜您，这个用户名可以使用" : "很抱歉该会员名已经被使用";  

              }  

          }  

    </script>  

</head>  

<body>  

     <table id="registerForm">  

        <tr>  

            <td class="title">  

                用户名  

            </td>  

            <td>  

                <input id="tbUserName" type="text" onblur="checkUserName()" />  

                <span id="checkResult"></span>  

            </td>  

        </tr>  

        <tr>  

            <td class="title">  

                密码  

            </td>  

            <td>  

                <input id="tbPassword" type="password" />  

            </td>  

        </tr>  

        <tr>  

            <td rowspan="2">  

                <input id="btnSubmit" type="submit" value="提交" onclick="checkUserName()" />  

            </td>  

        </tr>  

    </table>  

</body>  

</html>

跳转的URL界面，验证界面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckUserNameService.aspx.cs"  %>  

<script runat ="server">  

     protected void Page_Load(object sender, EventArgs e)  

    {  

            // 得到要验证的用户名。  

            string candidateUserName = Request["UserName"];  

            // 初始化验证标记，为false。  

            bool isValid = false;  

            // 如果转换为小写字母不为tgb则返回true。  

            if (candidateUserName.ToLower() != "tgb")  

            {  

                isValid = true;  

            }  

            // 清除缓存区所有的html输出。  

            Response.Clear();  

            //将指定字符写入HTTP输出。  

            Response.Write(isValid ? "true" : "false");  

            //立即发送缓存区的输出。  

            Response.Flush();      }  

</script>