|
Ajax异步用户名校验一、案例介绍 在实际开发中，完成注册功能前，如果用户填写用户信息，准备填写其他信息时，将提示当前用户的用户名是否可用。效果图1、图2所示。 图1：显示用户名不可用 图2：显示用户名可用 二、相关知识2.1、AJAX原理介绍Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML）可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分进行更新（局部刷新）。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。 AJAX 相当于是异步 JavaScript和XML的整合，是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。 2.2、AJAX原理分析Ajax原理分析图解如图3所示。 图3：Ajax原理分析图解 注解： 1.1使用JavaScript获得浏览器内置的AJAX引擎（XMLHttpRequest对象） 1.2通过AJAX引擎确定请求路径和请求参数 1.3通知AJAX引擎发送请求 AJAX引擎会在不刷新浏览器地址栏的情况下，发送请求 2.1服务器获得请求参数 2.2服务器处理请求参数（添加、查询等操作） 2.3服务器响应数据给浏览器 AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据传递给浏览器页面。 3.1通过设置给AJAX引擎的回调函数获得服务器响应的数据 3.2使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。 2.3、JavaScript AJAX使用2.3.1、原生态JS操作Ajax步骤1、获得Ajax引擎 2、设置回调函数 3、确定请求路径 4、发送请求 JavaScript ajax处理GET和POST请求有细微差异，接下来简单介绍，提供处理程序HelloServlet，并分别实现doGet和doPost两个方法。 1 <servlet> 2 <servlet-name>HelloServlet</servlet-name> 3 <servlet-class>cn.itcast.demo01.HelloServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>HelloServlet</servlet-name> 7 <url-pattern>/helloServlet</url-pattern> 8 </servlet-mapping> GET请求步骤1：编写servlet，doGet()方法获得数据，并发送响应数据 1 public void doGet(HttpServletRequest request, HttpServletResponse response) 2 throws ServletException, IOException { 3 //1 获得数据 4 String username = request.getParameter("username"); 5 String password = request.getParameter("password"); 6 //2 处理 7 System.out.println(username + " : " + password); 8 //3 响应数据 9 response.getWriter().print("get success"); 10 } 步骤2：在demo01.jsp提供按钮，点击发送get请求。（注意：只能谷歌或火狐浏览器使用） 1 <script type="text/javascript"> 2 function sendGet(){ 3 //1 获得ajax引擎 4 var xmlhttp = new XMLHttpRequest(); 5 //2 设置回调函数 6 xmlhttp.onreadystatechange = function(){ 7 if(xmlhttp.readyState == 4){ 8 if(xmlhttp.status == 200){ 9 alert("响应数据" + xmlhttp.responseText); 10 } 11 } 12 }; 13 //3 确定请求方式、路径及参数 14 xmlhttp.open("GET","/day15/helloServlet?username=jack&password=1234"); 15 //4 发送请求 16 xmlhttp.send(null); 17 } 18 </script> 19 <input type="button" value="get请求"/> <br/> POST请求步骤1：编写servlet，doPost()方法，用于接收数据和发送响应数据 1 public void doPost(HttpServletRequest request, HttpServletResponse response) 2 throws ServletException, IOException { 3 //0 处理乱码 4 request.setCharacterEncoding("UTF-8"); 5 response.setContentType("text/html;charset=UTF-8"); 6 //1 获得数据 7 String username = request.getParameter("username"); 8 String password = request.getParameter("password"); 9 //2 处理 10 System.out.println(username + " : " + password); 11 //3 响应数据 12 response.getWriter().print("post 成功"); 13 } 步骤2：在demo01.jsp提供按钮，点击发送post请求。（注意：只能谷歌或火狐浏览器使用） 1 <script type="text/javascript"> 2 function sendPost(){ 3 //1 获得ajax引擎 4 var xmlhttp = new XMLHttpRequest(); 5 //2 设置回调函数 6 xmlhttp.onreadystatechange = function(){ 7 if(xmlhttp.readyState == 4){ 8 if(xmlhttp.status == 200){ 9 alert("响应数据" + xmlhttp.responseText); 10 } 11 } 12 }; 13 //3 确定请求方式、路径及参数 14 xmlhttp.open("POST","helloServlet"); 15 //4 设置请求编码 16 xmlhttp.setRequestHeader 17 ("content-type","application/x-www-form-urlencoded"); 18 //5 发送请求 19 xmlhttp.send("username=杰克&password=1234"); 20 } 21 </script> 22 <input type="button" value="post请求"/> <br/> XMLHttpRequest对象浏览器兼容 1 function getXMLhttp(){ 2 var xmlhttp=null; 3 // 谷歌、火狐、IE最新浏览器 4 if (window.XMLHttpRequest){ 5 xmlhttp=new XMLHttpRequest(); 6 }else if (window.ActiveXObject){ 7 //IE老版本浏览器（IE6、7、8 等） 8 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 9 } 10 } 2.3.2、JQuery的Ajax使用2.3.2.1、$.post() 以post请求方式发送ajax格式：jQuery.post(url, [data], [callback], [type]) 参数1：url，请求路径 参数2：data，请求参数 参数3：callback，回调函数 参数4：type，返回内容格式，xml, html, script, json, text, _default。 服务器响应编码为：application/json;charset=UTF-8，回调函数data类型是json对象 服务器响应编码为：text/html;charset=UTF-8，回调函数data类型是字符串。 2.3.2.2、$.get() 以get请求方式发送Ajax除了请求方式不同，使用方式与$.post()完全一致。 测试： 1 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 //get请求 5 $("#getId").click(function(){ 6 var url = "/day15/helloServlet"; 7 var params = { 8 "username":"jack", 9 "password":"1234" 10 }; 11 $.get(url,params,function(data){ 12 alert(data); 13 }); 14 15 }); 16 //post请求 17 $("#postId").click(function(){ 18 var url = "helloServlet"; 19 var params = { 20 "username":"杰克", 21 "password":"1234" 22 }; 23 $.post(url,params,function(data){ 24 alert(data); 25 }); 26 }); 27 }); 28 </script> 三、案例分析本案例是在浏览器上输入用户名，在数据库中进行查询，如果用户名存在，则提示“用户名不可使用”，如果用户名不存在，则提示“用户名可使用”。具体业务分析如图4所示。 图4：案例分析图解 注解： 1、<input name=”username”>失去焦点时，使用$.post() 将用户名username以ajax方式发送给服务器 2、服务器获得用户名，并通过用户名查询用户 3、如果用户名存在，返回不可用提示 4、如果用户名可用，返回可用提示 5、根据服务器响应的json数据，控制提示信息的显示和提交的按钮是否可用。 四、案例实现4.1、服务器端程序步骤1：编写servlet，获得用户名查询是否存在，并返回json数据。 1 public class UserCheckServlet extends HttpServlet { 2 public void doGet(HttpServletRequest request, HttpServletResponse response) 3 throws ServletException, IOException { 4 //编码 5 request.setCharacterEncoding("UTF-8"); 6 response.setContentType("text/html;charset=UTF-8"); 7 // 获得用户名 8 String username = request.getParameter("username"); 9 // 查询是否存在 10 UserService userService = new UserService(); 11 User user = userService.findByName(username); 12 // 处理 13 String jsonData = ""; 14 if(user != null){ 15 jsonData = "{\"message\":\"用户名不可用\",\"flag\":false}"; 16 } else { 17 jsonData = "{\"message\":\"用户名可用\",\"flag\":true}"; 18 } 19 response.getWriter().print(jsonData); 20 } 步骤2：编写service 1 public class UserService { 2 /** 3 * 通过用户名查询 4 * @param username 5 * @return 6 */ 7 public User findByName(String username) { 8 UserDao userDao = new UserDao(); 9 return userDao.findByName(username); 10 } 11 } 步骤3：编写dao，提供findByName()方法 1 public class UserDao { 2 /** 3 * 通过用户名查询用户 4 * @param username 5 * @return 6 */ 7 public User findByName(String username) { 8 try { 9 QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource()); 10 String sql = "select * from user where username = ?"; 11 Object[] params = {username}; 12 return queryRunner.query(sql, new BeanHandler<User>(User.class), params); 13 } catch (Exception e) { 14 throw new RuntimeException(e); 15 } 16 } 17 } 4.2、浏览器JS步骤1：修改提示信息显示区域 1 <input type="text" id="username" name="username" placeholder="请输入用户名"> 2 <span id="showUsernameSpan"></span> 步骤2：编写js，当input失去焦点，发送ajax，并控制提示信息显示和按钮是否可用。 1 <script type="text/javascript"> 2 $(function(){ 3 $("input[name='username']").blur(function(){ 4 //1 确定请求路径 5 var url = "${pageContext.request.contextPath}/userCheckServlet"; 6 //2 确定请求参数 7 var params = {"username":$(this).val()}; 8 //3 发送ajax请求 9 $.post(url,params,function(data){ 10 //4.1 给“提示显示”区域添加label样式 11 $("#showUsernameSpan").addClass("label"); 12 if(data.flag){ 13 //4.2 可用 ，添加success样式（bootstrap提供），并移除按钮禁用 14 $("#showUsernameSpan").addClass("label-success"); 15 $("#showUsernameSpan").removeClass("label-danger"); 16 $("#registButton").removeProp("disabled"); 17 } else { 18 //4.3不可用，添加danger样式（bootstrap提供），并禁用按钮 19 $("#showUsernameSpan").addClass("label-danger"); 20 $("#showUsernameSpan").removeClass("label-success"); 21 $("#registButton").prop("disabled","disabled"); 22 } 23 //4.4 设置提示信息 24 $("#showUsernameSpan").text(data.message); 25 },"json"); 26 }); 27 }); 28 </script>
| 
收藏
淘帖
踩
