黑马程序员技术交流社区
标题: 【上海校区】Ajax异步用户名校验 [打印本页]
作者: yuchengmin 时间: 2018-7-25 23:05
标题: 【上海校区】Ajax异步用户名校验
Ajax异步用户名校验一、案例介绍在实际开发中，完成注册功能前，如果用户填写用户信息，准备填写其他信息时，将提示当前用户的用户名是否可用。效果图1、图2所示。
[attach]241505[/attach]
图1：显示用户名不可用
[attach]241506[/attach]
图2：显示用户名可用
二、相关知识2.1、AJAX原理介绍Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML）可以使网页实现异步更新，就是不重新加载整个网页的情况下，对网页的某部分进行更新（局部刷新）。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
AJAX 相当于是异步 JavaScript和XML的整合，是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。
2.2、AJAX原理分析Ajax原理分析图解如图3所示。
[attach]241507[/attach]
图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所示。
[attach]241508[/attach]
图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>
作者: 摩西摩西OvO 时间: 2018-7-26 09:10
作者: 不二晨 时间: 2018-7-26 11:30
奈斯，很赞
作者: 吴琼老师 时间: 2018-7-26 15:27
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |