淘豆网网友755273190近日为您收集整理了关于AJAX学习笔记之用户名和密码的验证的文档，希望对您的工作和学习有所帮助。以下是文档介绍：AJAX学习笔记之用户名和密码的验证 Ajax- 1 -SSH 整合 AJAX 验证用户名存在和验证码的完整实例一(含代码)——AJAX 学习笔记SSH 三大框架如何整合,在我前几篇博文中已经很详细的介绍了,如果还有什么问题的,请查看我的博文 Struts+Spring+Hibernate 整合注册登录,谢谢。那么现在就详细地介绍一下 AJAX 了。AJAX 自己也是最近才学了一点,里面的一些框架或者知识只是略懂一些,写的不好请大家原谅。下面是一个简单的使用 AJAX 进行验证用户名的,一般 AJAX 给人感觉的好处就是异步进行交互,让我们感觉页面并没有其他的动作(刷新),还有一个我感觉就是屏蔽了以前很恼人的 alert 弹出框了(这种验证在以前真的很多),让我们感觉页面做的更友好了,交互性更能跟上现在的 web 应用。有人会说,Struts 中不是有服务器端验证码,而且给人的交互也是很好的,那为什么还需要 AJAX 进行验证了?以我的经验和爱好的话说,我觉得服务器端和客户端的验证都必须要,这个有的时候是为了防止别人进行恶意的网址注入,也许现在我们做了更完善的验证的话,以后我们的网站就(来源：淘豆网[])少了很多不必要的恶意破坏。好了,现在就来说说下面的 AJAX 技术了,下面的例 1,是一个很简单用户名验证存在的验证 js 和 Servlet,实际上是没有技术含量的,其中返回的数据就可能有两种了,一种以html 的格式,另一种就是 xml 了,例 1 给的是 html 格式的,xml 的格式的代码就不贴了,说一下了。有两个修改点了,修改点 1----响应的 Content-Type 必须是 text/xmlhttpServletResponse.setContentType("text/xml;charset=utf-8");修改点 2-----返回的数据需要拼装成 xml 格式PrintWriter out = httpServletResponse.getWriter();String old = httpServletRequest.getParameter("name");//修改点 2-----返回的数据需要拼装成 xml 格式String(来源：淘豆网[])Builder builder = new StringBuilder();builder.append("<message>");……builder.append("</message>");out.println(builder.toString());后面就是接收方法了,实际上也没有太大区别,就是接收的是 xml 语句,我们需要解析后就可以一样使用了。(具体实现请参考网上提供的教程或者我提供下载的代码)//例 1:简单的使用 AJAX,返回的数据是 html//定义用户名校验的方法function verify(){//首先测试一下页面的按钮按下,可以调用这个方法//使用 javascript 的 alert 方法,显示一个探出提示框//alert("按钮被点击了!!!");Ajax- 2 -//1.获取文本框中的内容//document.getElementById("userName&qu(来源：淘豆网[])ot;); dom 的方式//Jquery 的查找节点的方式,参数中#加上 id 属性值可以找到一个节点。//jquery 的方法返回的都是 jquery 的对象,可以继续在上面执行其他的 jquery 方法var jqueryObj = $("#userName");//获取节点的值var userName = jqueryObj.val();//alert(userName);//2.将文本框中的数据发送给服务器段的 servelt//使用 jquery 的 XMLHTTPrequest 对象 get 请求的封装$.get("AJAXServer?name=" + userName,null,callback);}//回调函数function callback(data) {// alert("服务器段的数据回来了!!");//3.接收服务器端返回的数据// alert(data);//4.将服务器段返回的数据动态的显示在页面上(来源：淘豆网[])//找到保存结果信息的节点var resultObj = $("#result");//动态的改变页面中 div 节点中的内容resultObj.html(data);}import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;import .URLDecoder;/***Servlet,用于验证用户名的*/public class AJAXServer extends HttpServlet{protected void doPost(HttpServletRequest httpServle(来源：淘豆网[])tRequest, HttpServletResponsehttpServletResponse) throws ServletException, IOException {doGet(httpServletRequest, httpServletResponse);}Ajax- 3 -protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponsehttpServletResponse) throws ServletException, IOException {try{// request.setCharacterEncoding("UTF-8");// response.setContentType("text/html;charset=gb18030");httpServletResponse.setContentType("text/ht(来源：淘豆网[])ml;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");String name = URLDecoder.decode(old,"UTF-8");//2.检查参数是否有问题if(old == null || old.length() == 0){out.println("用户名不能为空");} else{// 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){Ajax- 4 -e.printStackTrace();}}}AJAX 还有一个比较重要那就是 XMLHttpRequest。下面给出例 2. 使用 XMLHttpRequest进行用户名验证,其中 xmlHttpRequest 考虑了多中浏览器的兼容问题。这些一般也就是一个套路了,以后也就没有必要再写创建 XMLHttpRequest 对象的代码了,这些都可以进行复用(软件工程的思想)后面实际上也要考虑 Servlet 传回来(来源：淘豆网[])的数据的类型(html 的文本格式还是 xml 格式的),这里就不再详述了。//例 2.使用 XMLHttpRequest 进行用户名验证//用户名校验的方法//这个方法将使用 XMLHTTPRequest 对象来进行 AJAX 的异步数据交互var xmlhttp;function verify() {//0。使用 dom 的方式获取文本框中的值//document.getElementById("userName")是 dom 中获取元素节点的一种方法,一个元素节点对应 HTML 页面中的一个标签,如果<input>//。value 可以获取一个元素节点的 value 属性值var userName = document.getElementById("userName").value;//1.创建 XMLHttpRequest 对象//这是 XMLHttpReuquest 对象无部使用中最复杂的一步//需要针对 IE 和其他类型的浏览(来源：淘豆网[])器建立这个对象的不同方式写不同的代码if (window.XMLHttpRequest) {//针对 FireFox,Mozillar,Opera,Safari,IE7,IE8xmlhttp = new XMLHttpRequest();//针对某些特定版本的 mozillar 浏览器的 BUG 进行修正if (xmlhttp.overrideMimeType) {xmlhttp.overrideMimeType("text/xml");}} else if (window.ActiveXObject) {//针对 IE6,IE5.5,IE5//两个可以用于创建 XMLHTTPRequest 对象的控件名称,保存在一个 js 的数组中//排在前面的版本较新var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];for (var i = 0; i < activexName.length; i++) {try{//取出一个控件名进行创建,如果创建成功就终止循环//如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建xmlhttp = new ActiveXObject(activexName[i]);break;Ajax- 5 -} catch(e){}}}//确认 XMLHTtpRequest 对象创建成功if (!xmlhttp) {alert("XMLHttpRequest 对象创建失败!!");return;} else {alert(xmlhttp.readyState);}//2.注册回调函数//注册回调函数时,之需要函数名,不要加括号//我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的xmlhttp.onreadystatechange = callback;//3。设置连接信息//第一个参数表示 http 的请求方式,支持所有 http 的请求方式,主要使用 get 和 post//第二个参数表示请求的 url 地址,get 方式请求的参数也在 url 中//第三个参数表示采用异步还是同步方式交互,true 表示异步xmlhttp.open("GET","AJAXServer?name="+ userName,true);//POST 方式请求的代码//xmlhttp.open("POST","AJAXServer",true);//POST 方式需要自己设置 http 的请求头//xmlhttp.setRequestHeader("Content-Type","application/x-ded");//POST 方式发送数据//xmlhttp.send("name=" + userName);//4.发送数据,开始和服务器端进行交互//同步方式下,send 这句话会在服务器段数据回来后才执行完//异步方式下,send 这句话会立即完成执行xmlhttp.send(null);}//回调函数function callback() {//alert(xmlhttp.readyState);//5。接收响应数据//判断对象的状态是交互完成if (xmlhttp.readyState == 4) {//判断 http 的交互是否成功if (xmlhttp.status == 200) {Ajax- 6 -//获取服务漆器端返回的数据//获取服务器段输出的纯文本数据var responseText = xmlhttp.responseText;//将数据显示在页面上//通过 dom 的方式找到 div 标签所对应的元素节点var divNode = document.getElementById("result");//设置元素节点中的 html 内容divNode.innerHTML = responseText;} else {alert("出错了!!!");}}}上面的都是 AJAX 的一些知识,本想后面就介绍如何使用 AJAX 整合 SSH 进行用户名(数据库中取得)存在和验证码的例子,但介于博文字数的限制,就留到下一篇博文中了,请阅读下一篇博文 SSH 整合 AJAX 验证用户名存在和验证码的完整实例二,不好意思。本博文提供下载:博文的 word 原稿,AJAX 使用的代码,AJAX + SSH 进行用户名(数据库中取得)存在和验证码的代码。如果有什么问题和好的建议请与木子(QQ:506817493)。木子写于 2009 年 8 月 7 日附源码下载:博文的 word 原稿AJAX 使用的代码AJAX + SSH 进行用户名(数据库中取得)存在和验证码的代码Ajax- 7 -SSH 整合 AJAX 验证用户名存在和验证码的完整实例二(含代码)——AJAX 学习笔记在上一篇博文(SSH 整合 AJAX 验证用户名存在和验证码的完整实例一)中介绍了 AJAX的一些技术问题,现在就来我们的实例:SSH 整合 AJAX 验证用户名存在和验证码的完整实例了。先介绍这个实例中我遇到的问题1. 用户名是从数据库中取得的,但是进行验证用户名是否存在的是个 Servlet,这个时候就会想到在这个 Servlet 里建立一个 Dao 的对象对数据库的操作,而 SSH 整合的时候 Spring对 Servlet 注入对象的机制是不一样的。具体的情查看我写的博文:特殊情况(ActionForm,Servlet, Filter, Listener)下 Spring 如何注入对象现在介绍一下再 Servlet 里如何通过 Spring 注入对象使用 Servlet 进行验证,这种思路很适合 AJAX 验证的思路,不过问题出现了,还是空指针异常,Spring 注入的对象根本没有实例化。一开始还以为和 Servlet 的生命周期有点关系,后来在网上搜了一些东西,还是感觉可以通过 Spring 进行注入的。下面介绍在 Servlet(或者 Filter,或者 Listener)中使用 spring 的 IOC 容器默认情况下 Servlet 容器创建 spring 容器对象,注入到 servletContext 中,servletContext 对象又是注入到 session 对象中,session 对象又是注入到 request 对象中,request 对象又是注入到 servlet 对象中,(其实不是很标准的注入,是传参数,或者对属性直接付值)。层层依赖可以得到 spring 容器对象。ServletContext servletContext = request.getSession().getServletContext();ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(servletContext );UsersManager um = (UsersManager)ctx.getBean( "UserManager");2. 验证码如何生成验证码的生成网上的代码比较多了,有 js 生成的还有 Servlet 生成的,在本例中我使用了 Servlet 生成的一个验证码。生成验证码不难,但难的是如何进行验证码的验证了,一般人想到的在生产验证码的 Servlet 中把生成的验证码加到 session 中,在通过 jsp 的判断,一开始我也是这样写的,不过后来就有问题了,什么问题了?那就是 Javascript 获取的验证码和生成的验证码不同的?session 中的总是前一个显示的验证码?也就是jsp 获取的验证码总是比 Servlet 中获得的验证码慢一拍了,在网上搜了很多竟然没有完整的验证码验证的实例,这应该是我写这篇博文的一个原因吧(希望对大家有帮助)网上的这个问题的解答大致是这样的,一个就是说这个是加载机制的问题,jsp 是在Servlet 前面进行的加载,所以说虽然生成图片的 Servlet 写人了 session,不过 jsp 总是慢一拍了。另一个就是建议我们使用 AJAX 进行了。这个也是我实现的,不过网上并没有太多的代码供我们参考,我也就在用户名验证的基础上加了一个验证码的验证了。测试通过是可以。Ajax- 8 -3. 在 Servlet 中验证的时候,会出现对多个字段的验证,象在我的这个例子中就有两个:用户名存在验证和验证码验证,那么如何处理验证后的返回的信息了。解决办法那也只有用 AJAX 的 xml 数据格式了,可以通过解析获取不同的验证信息,这样就可以验证多个字段了。不过这时应该有个技巧怎么样进行性能的优化了,不然每次一个字段的验证都变成了所有字段的验证。我处理的时候就是在 AJAX 进行传值的时候只传需要验证字段的值(在传值之前当然要用 js 进行一个非空验证了),这传到 Servlet 里,在通过判断哪个字段非空了,那这个时候就是验证这个字段了,其他空字段就用 ifelse 进行处理掉了。应该还是可以节约一些性能的吧。如果有什么好的想法我们可以一起讨论了。谢谢。实例运行截图如下:代码也就不贴了,后面会提供原代码下载的。下载发现一个问题就是下载的代码如何用了。说一下我的环境吧一般我写的 Java EE 的代码是在 MyEclipse + MySql + Tomcat 下的,只需要这些环境就可以了,需要说明一点的是,博文中用的的 Mysql 数据库的 sql 文件我都会提供给大家,大家只需导入就可以了,但还需注意一点的就是我的 mysql 数据库密码是和你的不一样的,请大家修改 Hibernate 的配置文件修改为你自己的 mysql 用户 root 的密码。其他的就请把 Project 导入,再在 tomcat 发布应该就可以运行了。如果有什么问题请联系木子(QQ:506817493)。木子写于 2009 年 8 月 7 日Ajax- 9 -本博文提供下载:博文的 word 原稿,AJAX 使用的代码,AJAX + SSH 进行用户名(数据库中取得)存在和验证码的代码。如果有什么问题和好的建议请与木子(QQ:506817493)。附源码下载:博文的 word 原稿AJAX 使用的代码AJAX + SSH 进行用户名(数据库中取得)存在和验证码的代码

播放器加载中，请稍候...
系统无法检测到您的Adobe Flash Player版本
建议您在线安装最新版本的Flash Player 在线安装