使用Ajax判断用户名是否存在

最新推荐文章于 2023-07-20 12:01:56 发布

原创最新推荐文章于 2023-07-20 12:01:56 发布 · 964 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #异步刷新

Asp.Net 同时被 2 个专栏收录

25 篇文章

订阅专栏

Ajax

3 篇文章

订阅专栏

本文介绍了一个使用Ajax技术实现的实时用户名验证系统。该系统通过客户端JavaScript与服务器端ASP.NET交互，能够即时反馈用户名是否已被注册。

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

Ajax的基本元素：

Asynchronous(异步的) JavaScript And Xml

ASP.NET服务器端可以是普通的aspx页面，也可以是一般处理程序（HttpHandler），还可以是Web Service。

一、实现服务器端的程序

首先添加一个aspx页面，手动清除前台页面中的所有HTML标记，最后只保留第一行代码（@Page指令）如下所示:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserExists.aspx.cs" Inherits="UserExists" %>

本页面的后台代码（服务器端）都在Page_Load方法中实现：

protected void Page_Load(object sender, EventArgs e)
    {
        //输出的格式为文本格式
        Response.ContentType = "text/plain";

        if (Request.QueryString["loginId"] != null)
        {
            //接受客户端发送的“用户名”数据
            string loginId = Request.QueryString["loginId"].Trim().ToString();
            if (loginId.Length > 0)
            {
                //根据“用户名”判断用户是否存在
                if (UserManager.GetById(loginId))
                {
                    Response.Write("true");
                }
                else
                {
                    Response.Write("false");
                }
            }
            else
            {
                Response.Write("false");
            }
        }
        else
        {
            Response.Write("false");
        }
    }

二、实现Ajax客户端

javascript代码：

    //创建XMLHttpRequest对象
 function createXMLHttpRequest()
 {
     if (window.ActiveXObject) {//如果是IE浏览器
         return new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if (window.XMLHttpRequest) {//非IE浏览器
         return new XMLHttpRequest();
     }
 }

    //编写函数实现对服务器端的访问
 var xhr;//声明一个全局变量
 function userExists(loginId)
 {
     if (loginId != "") {

         //请求字符串
         var url = "UserExists.aspx?loginId=" + loginId;

         //1.创建XMLHttpRequest
         xhr = createXMLHttpRequest();

         //2.设置回调函数
         xhr.onreadystatechange = readyDo;

         //3.初始化XMLHttpRequest组件
         xhr.open(
                    "GET",//提交方式（通常是GET或POST）
                     url, //目标资源URL的字符串
                     true //指示请求是否是异步的
                  );

         //4.发送请求
         xhr.send(null);
     }
 }

    //实现回调函数从XMLHttpRequest对象中获取返回数据并进行处理
 function readyDo()
 {
     if (xhr.readyState==4 && xhr.status==200) {
         var result = xhr.responseText;

         //对返回结果进行处理
         if (result == "true")
         {
             //mess_double为HTML文档中定义的span元素的id,显示提示信息
             document.getElementById("mess_double").innerHTML = "该用户名已被注册，请重新输入！";
             document.getElementById("mess_double").style.color = "Red";
             document.getElementById("mess_double").style.display = "inline";
         }
         else
         {
             document.getElementById("mess_double").innerHTML = "该用户名可用！";
             document.getElementById("mess_double").style.color = "Green";
             document.getElementById("mess_double").style.display = "inline";
         }
     }
 }

html代码：

<label>用户名</label>
<asp:TextBox CssClass="opt_input" ID="txtLoginId" runat="server" onblur="userExists(this.value)"></asp:TextBox>
<asp:RequiredFieldValidator ID="valrLoginId" runat="server" ErrorMessage="请输入用户名" ControlToValidate="txtLoginId">*</asp:RequiredFieldValidator>
<span id="mess_double" style="display:none;"></span>