开发者社区> codingcoge> 正文

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

简介: 1.实例功能: 当用户输入用户名,文本框失去焦点后,通过异步调用来判断该用户名是否已经存在。若存在,则在上图中红框处显示提示。
+关注继续查看

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" onblur="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对象拥有的方法和属性大致相同。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
面试再问值传递与引用传递,把这篇文章砸给他!
java的值传递和引用传递在面试中一般都会都被涉及到,今天我们就来聊聊这个问题,首先我们必须认识到这个问题一般是相对函数而言的,也就是java中的方法参数,那么我们先来回顾一下在程序设计语言中有关参数传递给方法(或函数)的两个专业术语:  ●  按值调用(call by value) ●  按引用调用(call by reference)所谓的按值调用表示方法接收的是调用着提供的值,而按引用调用则表示方法接收的是调用者提供的变量地址(如果是C语言的话来说就是指针啦,当然java并没有指针的概念)。
1332 0
JS引用路劲为什么在前面加上两个斜杠
原文:JS引用路劲为什么在前面加上两个斜杠 //表示同协议,一般现在用在https跨域名地址情况下。比如第三方统计代码的引入,用//就不用很麻烦地区分https还是http,也不用担心https下降到http出问题 ...
747 0
NeurIPS 2017 论文 2018 年引用量排名揭晓,这里是排名前三的论文解读
2017 年在 NeurIPS 上发表的论文在 2018 年引用量超过 100 的有 19 篇,attention is all your need 占榜首~
671 0
序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用   详细错误内容为: 不应为数据协定名称为BlogArticle_8F5767B5CA34AC0BBFE8F59DB428937035A9A77CC2917A318A2808A379392602: http://schemas.
477 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20566 0
+关注
codingcoge
种一棵树最好的时间是十年前,其次是现在。 java自学后台ing,请多指教 Github: https://github.com/jjc123
181
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载