使用javascript实现无刷新数据校验

最新推荐文章于 2021-06-04 08:15:25 发布

原创最新推荐文章于 2021-06-04 08:15:25 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xmlhttprequest #function #null #url #date

本文介绍了一个使用AJAX技术实现的无刷新验证用户名是否重复的方法。通过JavaScript与服务器交互，实现输入框内即时反馈验证结果的功能。

在实际开发中，需要检查用户名等信息是否重复，看到很多网站都可以无刷新实现，也像自己做一个看看，实现页面代码如下：

<script type="text/javascript" language="javascript">

      

        var xmlHttp = null;

        function OnLeaveToponymyBox(){

         try

            {

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

            }

            catch(err1)

            {

                try

                {

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

                }

                catch(err2)

                {

                    xmlHttp = new XMLHttpRequest();

                }

            }

            var d = new Date();

            var Text1 = document.getElementById('<%= txtToponymy.ClientID %>');



            var url = "CheckExists.aspx?type=Toponymy&text=" + encodeURIComponent(Text1.value);

      

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

            xmlHttp.onreadystatechange = OnHandler;

            xmlHttp.send(null);

        }

        function OnHandler()

        {

            if(xmlHttp.readyState == 4)

            {

                var isValid = xmlHttp.responseText;

                

                var spError = document.getElementById('<%= spError.ClientID %>');

                spError.innerHTML = isValid;

                //spError.innerHTML = "aaa";

            }

        }

    </script>

说明：checkExists.aspx是个空页面，在ｐａｇｅｌｏａｄ里进行判断，将判断结果写道页面上。

如果是中文的话，encodeURIComponent转换一下一定要，否则会乱码。