电脑维修网
当前位置:电脑维修网 >操作系统 > 网站编程代码 >jsp最简单的Ajax应用 java异步验证用户

jsp最简单的Ajax应用 java异步验证用户

2012-05-19 13:20 | 作者:电脑维护 | 来源:csdn | 参与评论 | 点击:5030次
  Ajax异步交互技术在现在网页制作方面非常的流行,这里先介绍一下使用jQuery完成Ajax的异步验证用户名的做法,
  然后再深入剖析,使用纯JS创建XMLHttpRequest对象,完成jQuery底层封装的内容,下面先演示jQuery的实现,其实
  非常简单。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>ajax.html</title> 
    <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script> 
    <script type="text/javascript"> 
        function test(){ 
            //1.获取文本框中的值 
            var value = $("#userName").val(); 
            //2.将文本框中的内容发送给后台服务器 
            //使用jQuery的XMLHTTPRequest的方法的封装 
            $.get("/Ajax/servlet/AjaxServlet?name="+value,null,callback); 
        } 
         
        function callback(data){//回调函数 
            //3.接受服务器的返回的数据 
            //alert(data); 
            //4.将结果显示在页面中 
            $("#div1").html(data); 
        } 
    </script> 
  </head> 
   
  <body> 
    用户名:<input type="text" id="userName" onblur="test();"/><span id="div1" style="color: red"></span> 
    <br/> 
    密码:<input type="password" id="password" /><br/> 
    邮箱:<input type="text" id="mail" /> 
  </body> 
</html>

大部分讲解都已经写在了代码的注释上面,其实不需要解释什么,这个是使用get方面后缀数据传递给后台服务器的。

当然,后台服务器代码如下
package com.bird.servlet; 
 
import java.io.IOException; 
import java.io.PrintWriter; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
public class AjaxServlet extends HttpServlet { 
 
    /**
     * 获取前台传递过来的参数
     */ 
    private static final long serialVersionUID = 1L; 
 
    public void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        request.setCharacterEncoding("UTF-8"); 
        response.setContentType("text/html;charset=UTF-8"); 
        String name = request.getParameter("name"); 
        name = new String(name.getBytes("ISO-8859-1"),"UTF-8"); 
        PrintWriter out = response.getWriter(); 
        if(name.equals("bird")){ 
            out.println("用户名"+name+"已经存在"); 
             
        }else{ 
            out.println("用户名不存在,可以使用"); 
        } 
    } 
 
    public void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        doGet(request, response); 
 
    } 
 

然后下面是使用纯JS完成创建XMLHttpRequest对象和交互的效果,后台代码是一样的,你会发现jQuery帮助我们很多.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>ajax1.html</title> 
    <script type="text/javascript"> 
        var xmlhttp; 
        function verify(){//这个方法使用XMLHttpRequest对象来进行Ajax异步交互数据 
            //1.使用dom的方式获取文本框的内容 
            var userName = document.getElementById("userName").value; 
            //2.创建XMLHTTPRequest对象 
            if(window.XMLHttpRequest){ 
                xmlhttp = new XMLHttpRequest(); 
            }else if(window.ActiveXObject){ 
                //针对ie6以下版本 
                var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
                //两个可以用来创建XMLHTTPRequest对象的控件,进行尝试创建 
                for(var i=0; i < activexName.length; i++){ 
                    try{ 
                        xmlhttp = new ActiveXObject(activexName[i]); 
                        break; 
                    }catch(e){ 
                         
                    } 
                } 
            } 
             
            //最后 确认xmlhttprequest对象创建成功 
            if(!xmlhttp){ 
                alert("请更换更新版本的浏览器"); 
                return; 
            }else{ 
                //2.注册回调函数,只需要函数名不需要加括号 
                xmlhttp.onreadystatechange = callback; 
                //3.设置连接信息 
                xmlhttp.open("GET","/Ajax/servlet/AjaxServlet?name="+userName, true); 
                //4.发送数据,开始和服务器端进行交互 
                xmlhttp.send(null); 
            } 
        } 
         
        //回调函数 
        function callback(){ 
            //判断对象交互完成 
            if(xmlhttp.readyState==4){ 
                //判断http交互是否成功 
                if(xmlhttp.status==200){ 
                    //获取服务器的数据 
                    //获取纯文本的数据 
                    var responseText = xmlhttp.responseText; 
                    document.getElementById("div1").innerHTML=responseText; 
                } 
            } 
        } 
    </script> 
  </head> 
   
  <body> 
   用户名:<input type="text" id="userName" onblur="verify();"/><span id="div1" style="color: red"></span> 
    <br/> 
    密码:<input type="password" id="password" /><br/> 
    邮箱:<input type="text" id="mail" /> 
  </body> 
</html> 
本文由电脑互助网中的电脑维护整理编写,如果你需要转发请保留连接;

转载时请注明:转载自《电脑维修技术网》原文地址:http://www.pc811.com/6/4/24992.html
凡文章内未标注来源均为原创文章!恭候您的意见
------分隔线----------------------------

最新评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
友情连接版权声明广告合作联系我们意见投诉网站地图百度地图谷歌地图
敬告:本站所有信息都为网友发布,及网络收集而来,我们只对信息的合法性进行审核 请朋友们自行鉴别真实性。