Ajax在不刷新页面情况下实现的用户名判断

最新推荐文章于 2021-08-05 19:42:49 发布

iteye_20183

最新推荐文章于 2021-08-05 19:42:49 发布

阅读量124

点赞数 1

分类专栏： 2009年2月文章标签： Ajax jQuery 应用服务器 JavaScript Firefox ViewUI

2009年2月专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今日看了下ajax实现的登录框,javaeye之前实现的一个登录框估计也是采用ajax实现的.它可以使在页面不刷新的情况下验证用户名或者是验证码是否正确等应用. 首先我们需要的工具如下:

1.intellij idea 8.1 下载地址http://download-ln.jetbrains.com/idea/idea-8.1.exe

2.jquery 下载地址 http://jqueryjs.googlecode.com/files/jquery-1.3.2.js

它是一些函数,都是通过它去新请求服务器.所以对于页面来说我们只是调用了按钮的onclick.

3.firefox 下载地址

thunder://QUFodHRwOi8vd3d3LjExOS54ZG93bnMuY29tL3VwbG9hZEZpbGUvMjAwOS0yL01vemlsbGEgRmlyZWZveC5yYXJaWg==

这是一款绿色版的浏览器,它可以使js调用变得很清晰,简单化,同时我们还需要下载firebug.

下载地址如下:http://releases.mozilla.org/pub/mozilla.org/addons/1843/firebug-1.3.2-fx.xpi.

(安装方法很简单,只要把它拖曳到firefox上面就会提示安装,安装完之后,重启一下firefox浏览器就可以了,f12快捷键可以调出它. 好,介绍开发工具之后,我们开始进行ajax带给我们的新的惊奇吧. 为了与之前的页面跳转进行比较,我们先做一个传统的页面跳转. 首先安装intelliJ,这个就不用说了,安装完之后新建工程.我们新建立一个PreServlet的类,如下:

public class ClassicServer extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        try{
            System.out.println("call doGet");
            response.setContentType("text/html;charset=GB2312");
            PrintWriter out = response.getWriter();
            String old = request.getParameter("name");
            if(old == null || old.length() == 0){
                out.println("用户名不能为空r");
            } else{
                String name = new String(old.getBytes("ISO8859-1"));
                if(name.equals("wangxingkui")){
                    out.println("用户名[" + name + "]已经存在，请使用其他用户名");
                } else{
                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册");
                }
            }
            out.println("<br/><a href=\"index.html\">返回校验页面</a>");
        } catch(Exception e){
            e.printStackTrace();
        }
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        System.out.println("call doPost");
        doGet(request,response);
    }
}

建立完Servlet之后,我们需要在web.xml配置好及 PreServlet PreServlet PreServlet /PreServlet 然后我们建立一个页面跳转的展示.新建立一个preindex.html 校验用户服务是否存在的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>
      校验用户服务是否存在的例子<br/>
 <form action="ClassicServer" method="GET">
     用户名:<input type="text" name="name"/>
     <input type="submit" value="校验"/>
     
 </form>
</body>
</html>

这样就可以了,我们运行一下工程就可以看到传统的验证效果,它会跳转到另一个页面,并说明登录是否成功.这个时候我们必须点击返回才能返回到登录页面. 与传统登录页面不同的,ajax根本就不用刷新或者跳到另一个页面,它会调用jquery里的函数去请求服务器,从而把当前页面直接返回给用户.待服务器响应回来时,它也是只刷新一部分.通常这个调用的是jquery的html(data)函数下面就开始讲一下如下建这个的例子. 我们同样新建一个Servlet叫AJAXServlet. 如下:

public class AJAXServer extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
 try{
//            request.setCharacterEncoding("UTF-8");
//            response.setContentType("text/html;charset=gb18030");
            System.out.println("int AJAXServer doGet");
            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();

            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
            int temp = 0;
            if (inte == null) {
                temp = 1;
            } else {
                temp = inte.intValue() + 1;
            }
            httpServletRequest.getSession().setAttribute("total",temp);

            //1.取参数
            String old = httpServletRequest.getParameter("name");
            //String name = new String(old.getBytes("iso8859-1"),"UTF-8");

            //2.检查参数是否有问题
            if(old == null || old.length() == 0){
                out.println("用户名不能为空");
            } else{
                  String name = URLDecoder.decode(old,"UTF-8");
//                String name = URLDecoder.decode(old,"UTF-8");
//                byte[] by = old.getBytes("ISO8859-1");
//                String name = new String(by,"utf-8");
//                String name = URLDecoder.decode(old,"utf-8");
                //3.校验操作
//                String name = old;
                if(name.equals("wangxingkui")){
                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
                    //写法没有变化，本质发生了改变
                    out.println("用户名[" + name + "]已经存在，请使用其他用户名, " + temp);
                } else{
                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp);
                }
            }
        } catch(Exception e){
            e.printStackTrace();
        }
        
    }

    @Override
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);
    }
}

建立完之后,我们同样需要配置下web.xml. 同上. 接下来我们需要建立一个ajaxindex.html <script src="/admin/blogs/337319/jslib/jquery-1.3.2.js" type="text/javascript"></script><script src="/admin/blogs/337319/jslib/verify.js" type="text/javascript"></script> itcast.cn用户名校验的ajax实例,请输入用户名

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>itcast.cn用户名校验ajax实战p</title>
    <script type="text/javascript" src="jslib/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
       itcast.cn用户名校验的ajax实例,请输入用户名<br/>
    <!--ajax方式下不需要使用表单来进行数据提交,因为ajax不用表单标签-->
       <!--ajax方式不需要name属性,需要id-->
       <input type="text" id="userName">
       <input type="button" value="校验" οnclick="verify()"/>
       <!--这个div用于存放服务器段返回的信息,开始为空-->
       <!--id属性定义是为了利用dom方式找到某一个节点,-->
       <div id="result"></div>
       <!--div与span差异,div的内容独占行,span中的内容和前后其他相处良好-->

</body>
</html>

我们这里采用onclick让它调用verify(),这个方法会在verify.js里调用 ,所以我们还需要在web下导入jquery-1.3.2.js及建立verify.js文件. verify.js文件如下: function verify(){ var obj = $("#userName"); var userName= obj.val(); //将文本框中的数据发送给服务段的servlet $get("AJAXServlet?name="+userName,null,callback,"GET"); } //回调函数data是服务端返回的数据...在服务端是out.print("..."); function callback(data){ //把获得的数据显示在页面中 var obj = $("#result"); obj.html(data); } ok,js里的方法也已经建立好了,我们就可以调试下界面了.