当前位置: 首页 > news >正文

ajax引用检测用户名是否存在

1.实例功能:

当用户输入用户名,文本框失去焦点后,通过异步调用来判断该用户名是否已经存在。若存在,则在上图中红框处显示提示。当用户名可用时,提交按钮变为可用状态。

1.实例功能:


当用户输入用户名,文本框失去焦点后,通过异步调用来判断该用户名是否已经存在。若存在,则在上图中红框处显示提示。当用户名可用时,提交按钮变为可用状态。


2.设计Html页面:

<span style="font-family:SimSun;font-size:18px;"><strong><span style="font-family:SimSun;font-size:18px;"><strong><body>
    <form name="myForm">
        用户名:<input type="text" name=" myName" οnblur="checkName()" />
        <span id="myDiv"> </span><br />
        密 码:<input type="text" name="myPwd"/><br />
        <input type="button" value=" 提交" name="submitButton" disabled />
    </form>
</body></strong></span></strong></span>
在“用户名”文本框后添加了一个span标签,该标签划分一个区域,用于显示用户名的验证信息。 还要添加一个事件,当失去焦点时触发“checkName()”。


3.javascript代码部分:

//定义用户存储XMLHttpRequest对象的变量
        var xmlHttp = null;
        //创建XMLHttpRequest对象
        function creatXMLHTTP()
        {
            //判断浏览器是否支持ActiveX控件,针对IE6及之前版本
            if (window.ActiveXObject)
            {
                //将所有可能出现的ActiveXObject版本都放在一个数组中
                var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                //通过循环创建XMLHttpRequest对象
                for (var i=0;i<arrXmlHttpTypes.length;i++)
                {
                    try
                    {
                        //创建XMLHttpRequest对象
                        xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);
                        //如果创建XMLHttpRequest对象成功,则跳出循环
                        break;
                    }
                    catch(ex)
                    {
                    }
                }
            }
            //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,Firefox,Opera等浏览器
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        //响应XMLHttpRequest对象状态变化的函数
        function httpStateChange()
        {
            if (xmlHttp.readyState==4)//异步调用完毕
            {
                if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功,在本机上调试
                {
                    //获得服务器返回的数据
                    var userNames = xmlHttp.responseText;
                    var arrUserName = userNames.split(";");//把获取到的一个字符串分割成字符串数组。

                    //定义一个变量,用于判断用户名是否已经存在
                    var bFlag = false;

                    for(i=0;i<arrUserName.length;i++)
                    {
                        if (arrUserName[i]==myForm.myName.value)
                        {
                            bFlag = true;//用户名存在
                            break;
                        }
                    }

                    //查找用于显示提示信息的节点
                    var node = document.getElementById("myDiv");
                    //更新数据
                    if (bFlag)
                    {
                        node.firstChild.nodeValue = "用户名已存在";
                        myForm.submitButton.disabled = true;//提交按钮不可用
                    }
                    else 
                    {
                        node.firstChild.nodeValue = "用户名不存在,可以使用";
                        myForm.submitButton.disabled = false;//提交按钮可用
                    }
                }
            }
        }
        //校验用户名是否有效
        function checkName()
        {
            //创建XMLHttpRequest对象,调用前面定义好的函数
            creatXMLHTTP();

            if (xmlHttp!=null)
            {
                //创建响应XMLHttpRequest对象状态变化的函数
                xmlHttp.onreadystatechange = httpStateChange;
                //创建http请求
                xmlHttp.open("get","userName.txt", true);
                //发送http请求
                xmlHttp.send(null);
            }
            else
            {
                alert("您的浏览器不支持XMLHTTP");
            }
        }

注意:需要建一个userName.txt存储已存在的用户名,各个用户名之间用分号隔开。

通过这个小例子,我们从理论阶段向代码实现迈了一步。从代码中很容易发现XMLHttpRequest是Ajax的核心对象。也正是因为各大浏览器对XMLHttpRequest对象的广泛支持,使得Ajax成为一项热门技术。IE浏览器将XMLHttpRequest实现为一个ActiveX对象,其他三大浏览器(Firefox,Opera,Netscape)将其实现为一个本地javascript对象,所以在创建XMLHttpRequest对象时要经历一番周旋。虽然创建方式不同,但XMLHttpRequest对象拥有的方法和属性大致相同。

相关文章:

  • IDEA快捷键笔记
  • JSP第五篇【JSTL的介绍、core标签库、fn方法库、fmt标签库】
  • 用Metaclass实现一个精简的ORM框架
  • 看不到短期回报,首席财务官们表示对AI并不感冒
  • 杂感一篇
  • 影响存储快照使用率的六大因素
  • 寒假作业02
  • 绝对路径和相对路径
  • rabbitmq延迟消息示例
  • JS易混淆的方法整理
  • 转型成亚洲三大通信展主题 中国企业参与积极
  • 诡异!React stopPropagation失灵
  • Unix环境高级编程(四)数据系统文件和信息
  • 算法初级之二
  • iOS仿今日头条、壁纸应用、筛选分类、三方微博、颜色填充等源码
  • bearychat的java client
  • HTTP请求重发
  • input实现文字超出省略号功能
  • JS数组方法汇总
  • Mithril.js 入门介绍
  • MQ框架的比较
  • Node + FFmpeg 实现Canvas动画导出视频
  • nodejs:开发并发布一个nodejs包
  • Nodejs和JavaWeb协助开发
  • php ci框架整合银盛支付
  • Spark RDD学习: aggregate函数
  • springMvc学习笔记(2)
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • 闭包--闭包之tab栏切换(四)
  • 简单基于spring的redis配置(单机和集群模式)
  • 前端路由实现-history
  • 如何编写一个可升级的智能合约
  • 如何设计一个比特币钱包服务
  • 我建了一个叫Hello World的项目
  • 应用生命周期终极 DevOps 工具包
  • 用jquery写贪吃蛇
  • No resource identifier found for attribute,RxJava之zip操作符
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • 国内开源镜像站点
  • # 数据结构
  • #传输# #传输数据判断#
  • #控制台大学课堂点名问题_课堂随机点名
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • $.each()与$(selector).each()
  • (2)STM32单片机上位机
  • (Repost) Getting Genode with TrustZone on the i.MX
  • (附程序)AD采集中的10种经典软件滤波程序优缺点分析
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (论文阅读30/100)Convolutional Pose Machines
  • (十三)Maven插件解析运行机制
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)大道至简,职场上做人做事做管理
  • (轉貼) UML中文FAQ (OO) (UML)
  • .NET 4.0中的泛型协变和反变