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

最新推荐文章于 2019-07-02 19:05:41 发布

邢海芳

最新推荐文章于 2019-07-02 19:05:41 发布

阅读量7.6k

点赞数 3

分类专栏： java web

本文链接：https://blog.csdn.net/xhf55555/article/details/8571873

版权

java web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我们知道在注册淘宝账户时，当我们注册的账户名与其他人同名的时候，系统会自动的给出提示，并且给出推荐使用的账户名，并没有完全的刷新整个页面，而是悄悄的向服务器端发送请求进行验证，让我们感觉很舒服，这就是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" οnblur="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="提交" οnclick="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>

得到的显示结果：

邢海芳

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
9
评论
AJAX(三)--实例无刷新验证用户名是否存在

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

扫一扫

专栏目录