• 解析Java核心技术点-Ajax验证账户名称

    发布:51Code 时间: 2017-10-10 11:49

  • [ 理论知识] Ajax( A synchronous J avascript A nd X ML)异步的Javascript和XML传输技术,是指一种创建交互式网页应用的网页开发技术。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整...

  • [理论知识]

           Ajax(Asynchronous Javascript And XML)异步的Javascript和XML传输技术,是指一种创建交互式网页应用的网页开发技术。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面,Ajax技术通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

           比较常见的场景如:不刷新页面验证账户名称是否已经存在,选项多级联动,自动完成效果,扁平式分页技术等。

        [步骤解读一]源生Javascript实现Ajax技术

           本文中,小博老师将为大家演示如何使用Ajax技术实现不刷新页面的验证账户名称。我们首先准备一个简单的数据库用户表,存放已经注册完成的用户信息:

    然后我们创建一个Servlet,可以根据用户提交的账户名称,去数据库查询是否存在该用户记录,核心代码如下:

    @WebServlet("/BWFValidateUsername")
    public class BWFValidateUsernameServlet extends HttpServlet {
           protected void doGet(HttpServletRequest request, HttpServletResponse response)
                         throws ServletException, IOException {
                  this.doPost(request, response);
           }
     
           protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                  // 禁止缓存
                  response.setHeader("Content-Type", "text/html; charset=utf-8");
                  response.setHeader("expires", "mon,26jul199705:00:00gmt");
                  response.setHeader("cache-control", "no-cache,must-revalidate");
                  response.setHeader("pragma", "no-cache");
                 
                  request.setCharacterEncoding("UTF-8");
                  response.setCharacterEncoding("UTF-8");
                  PrintWriter out = response.getWriter();
                 
                  // 获取用户提交的 需要验证的账户名称
                  String uname = request.getParameter("uname");
                 
                  // 连接数据库 查询该账户名称是否存在
                  try{
                         Driver driver = new Driver();
                         Connection conn = DriverManager.getConnection(
           "jdbc:mysql://127.0.0.1:3306/bwf?useUnicode=true&characterEncoding=utf8","root","");
                         PreparedStatement stmt = conn.prepareStatement("select * from user where uname=?");
                         stmt.setString(1, uname);
                         ResultSet rs = stmt.executeQuery();
                         if(rs.next()){
                                out.print(1); // 账户名称存在  输出1
                         }else{
                                out.print(0); // 账户名称不存在 输出0
                         }
                  }catch(Exception e){
                         e.printStackTrace();
                         out.print(0);
                  }
           }
    }

           我们通过浏览器测试这个Servlet,如果传递的账户名称在数据库已经存在,则显示1,如果传递的账户名称在数据库不存在,则显示0:

    接下来我们创建一个jsp页面,让用户填写账户名称,并且当账户名称文本框失去焦点时,调用js函数,向Servlet发送Ajax异步请求,验证用户填写的账户名称在数据库是否存在,并且给出相应提示。核心代码如下:

    <body>
    <form>
          账户名称:<input type="text" name="uname" onblur="checkUname(this)"/>
          <span id="span1"></span><br/><br/>
          账户密码:<input type="password"/><br/><br/>
          确认密码:<input type="password"/><br/><br/>
          用户昵称:<input type="text"/><br/><br/>
          <input type="submit" value="注册账户"/>
    </form>
     
    <script>
    // 实例化异步传输对象(以IE浏览器为例,后期使用JQuery解决浏览器兼容性问题)
    var a = new ActiveXObject("Msxml2.XMLHttp");
     
    // 账户名称文本框失去焦点时,验证账户名称是否在数据库存在
    function checkUname(src){
          // 获取用户填写的账户名称
          var uname = src.value;
          // 设置异步传输对象参数   参数1:请求方式,参数2:请求的URL,参数3:是否异步模式
          a.open("POST","BWFValidateUsername",false);
          // 设置异步传输对象的头信息,请求参数的编码格式,相当于form表单的enctype属性
          a.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          // 设置异步传输对象准备状态改变时的处理方法
          a.onreadystatechange=ajaxChanged;
          // 发送Ajax异步请求,并且提交参数
          a.send("uname="+uname);
    }
     
    // 异步传输对象准备状态改变时的处理方法
    function ajaxChanged(){
          // 判断当前异步传输对象的准备状态是否到了 4:解析响应数据完毕
          if( a.readyState == 4 ){
               // 判断响应数据是否是  1:该账户名称已经在数据库存在  0:不存在
               if( a.responseText == "1" ){
                     document.getElementById("span1").innerHTML=
                          "<font color='red'>该账户名称已被注册!请重新填写!</font>";
               }else{
                     document.getElementById("span1").innerHTML=
                          "<font color='green'>恭喜您!该账户名称可以使用!</font>";
               }
          }
    }
    </script>
     
    </body>

           我们通过浏览器访问该页面,当我们填写完账户名称并且让控件失去焦点时,会出现相应的提示信息:

    [步骤解读一]JQuery框架实现Ajax技术

           接下来小博老师为大家演示,使用JQuery框架发送Ajax异步请求的方式,使用JQuery框架的主要优势有两点,1:提高开发效率,2:解决浏览器兼容性。我们修改刚才的jsp页面中的javascript代码部分,核心代码如下:

    <script src="script/jquery-1.4.2.min.js"></script>
    <script>
    $(document).ready(function(){
           $("input[name='uname']").blur(function(){
                  $.post("BWFValidateUsername","uname="+$(this).val(),function(data){
                         if( data == "1" ){
                                $("#span1").html("<font color='red'>该账户名称已经存在!请重新填写!</font>");
                         }else if( data == "0" ){
                                $("#span1").html("<font color='green'>恭喜您!该账户名称可以使用!</font>");
                         }
                  });
           });
    });
    </script>

           使用浏览器访问jsp页面,效果完全相同,且浏览器兼容性解决。

  • 上一篇:解析Java核心技术点-生成缩略图

    下一篇:常用JQuery效果演示-复选框全选和反选效果

网站导航
Copyright(C)51Code软件开发网 2003-2015 , 沪ICP备05003035号