使用AJAX检测用户名是否可用,高手一定要绕道

最新推荐文章于 2019-02-15 17:34:00 发布

铜雀软件

最新推荐文章于 2019-02-15 17:34:00 发布

阅读量954

点赞数

分类专栏： ajax 文章标签： ajax xmlhttprequest myeclipse 服务器 function servlet

本文链接：https://blog.csdn.net/dongjak/article/details/7223232

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

说明:本人是个菜得不能再菜的鸟,但是也有可能还有正在为AJAX郁闷或者将要学习AJAX技术的童鞋,在这里,我用一个使用AJAX技术来检测用户名是否可用的例子来表达我对AJAX的理解,跪求高手绕道!

先简单介绍一下使用到的工具及技术:工具:MyEclipse8.5,pl/sql deveolper.技术:java,oracle,jsp,javascript,servlet,ajax.

let's go

1.首先,准备一张数据表users,该表最少有一个字段user_name,然后插入一些测试数据.

2.在MyEclipse中创建一个web项目,并新建一个jsp页面.该页面很简单,只要一个输入用户名的文本框即可.实现菜得不行的同学可以参考如下代码:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>注册页面</title>
<script src="js/regis.js" type="text/javascript" charset="gb2312"></script>
</head>

<body>
   <center>
       <h2> 注册账号</h2>
       <label> 用户名:</label><input type="text" name="userName" id="userName" οnblur="sendRequest()"/>
       <div id="infor" style="float: left;position: absolute;left: 800px;top: 69px;"></div>
   </center>
</body>
</html>

3.编写js页面,重点在这里.先写个验证非空的函数吧,代码如下:

function checkNull(){
   var userName=document.getElementById("userName");
   if(userName.value==""){
       window.alert("请输入用户名!");
       return false;
   }
}

4.做完一些基本的准备工作后,我们就正式开始来使用AJAX技术了,AJAX技术的核心是XMLHttpRequest对象(以下简称xhr,鸟语写得累!^-^),有关xhr对象的知识在这里不多讲了,不懂的童鞋可以查阅相关资料.百度一下一大片.

第一步:创建一个xhr对象,代码如下:

第二步:创建好xhr对象后,我们还要为这个对象的onreadlystate属性编写一个回调函数,onreadlystate属性是请求在发送至服务器过程中的不同状态的表示,取值为0到4,当onreadlystate为4时,表示请求已经发送完成.大部分情况下,我们只需检测xhr对象的onreadlystate属性是否为4即可而不必关心其他的值.

多讲一两句:xhr对象的onreadystate属性表示请求的状态,但是如果是请求成功发送到了服务器,而服务器端发生了某些未知的错误,那么我们仅仅用onreadystate属性来判断请求是否成功发送并得到响应就显得不太对了,所以,还要请出xhr对象的别外一个属性status,status属性表示http的状态码,它常用的值有200(服务器响应正常)、404(请求的资源不存在)、500(服务器内部错误)等等.所以要判断请求是否的已经发送至服务器且服务器已经作出了响应则需要同时使用这两个属性.代码如下

if(xhr.onreadystate==4){

if(xhr.status==200){

do something......

}

至于回调函数的作用则是当请求的状态为4时,你就可以通过js代码做你想做的事.这里贴出我的代码,供大家瞅瞅:

第三步:编写js函数,用来异步发送请求,在该函数中,首先调用createXHR()函数来创建一个xhr对象,然后初始化该xhr对象,紧接着设置xhr对象的回调函数,最后通过调用send()方法来发送请求.代码如下:

    function sendRequest(){
   //获取用户输入的用户名
   var userName=document.getElementById("userName").value;
   //第一步,调用createXMLHttpRequest()函数创建一个新的XMLHttpRequest对象
   xhr=createXMLHttpRequest();
   //第二步,初始化请求
   xhr.open("GET", "Registration?uname="+userName, true);   //以异步方式发送请求
   //注:如果open()方法的method参数值为post的话,则必须调用xhr对象的setRequestHeader()方法设置请求的头信息
   //第三步,设置回调函数
   xhr.onreadystatechange=callBack;
   //第四步,发送请求
   xhr.send(null);

}

5.写完AJAX的代码后,我们还需要对用户输入的用户名做一些业务逻辑上的处理.很简单,在java类里面写一个方法来将用户输入的用户名拿到数据库中去查下,有的话返回true,没有就返回false.这个代码我就不贴了,占空间.相信来看AJAX的不至于这个都不会.

6.最后,新建一个servlet,它接收用户输入用户名,然后调用上面的检测用户名是否存在的方法来做业务处理,如果该方法返回true,就out,println("用户名已存在"),如果为false则相反.再在回调函数中通过xhr对象的responseText属性来接收响应的信息.做出相应的提示.

效果如图,,,,,,

上面就是一个简单的使用AJAX技术检测用户名是否存在的方法,本人初次写技术博文,还请见谅!有需要完整代码的,请留下邮箱.

铜雀软件

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用AJAX检测用户名是否可用,高手一定要绕道

说明:本人是个菜得不能再菜的鸟,但是也有可能还有正在为AJAX郁闷或者将要学习AJAX技术的童鞋,在这里,我用一个使用AJAX技术来检测用户名是否可用的例子来表达我对AJAX的理解,跪求高手绕道!先简单介绍一下使用到的工具及技术:工具:MyEclipse8.5,pl/sql deveolper.技术:java,oracle,jsp,javascript,servlet,ajax.let's
复制链接

扫一扫