Ajax案例

2023-11-10 21:49| 来源: 网络整理| 查看: 265

一、环境搭建 1、导包

这个案例中使用的jar包有三个，需要导入到WEB-INF目录下的lib文件夹中。

导包 2、导入工具库

本案例使用的工具类是之前用过的JDBCUtils。

import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import javax.sql.DataSource; import com.mchange.v2.c3p0.ComboPooledDataSource; public class JDBCUtils { // 创建一个连接池：但是这个连接池只需要创建一次即可。 private static final ComboPooledDataSource dataSource = new ComboPooledDataSource(); /** * 获得连接的方法 * @throws SQLException */ public static Connection getConnection() throws SQLException{ return dataSource.getConnection(); } /** * 获得数据源: */ public static DataSource getDataSource(){ return dataSource; } } 3、创建数据库和表

打开mysql数据库，创建数据库和表，并添加一些记录。

create database ajax_test; use ajax_test; create table user ( uid int primary key auto_increment, username varchar(30), password varchar(20) ); insert into user(username,password) values ('itheima','123456'); insert into user(username,password) values ('itcast','qwerty'); 数据库 4、修改配置文件配置文件二、使用传统的方式实现案例 1、创建JavaBean package com.itheima.domain; import java.io.Serializable; public class User implements Serializable { private int uid; private String username; private String password; public User() { super(); // TODO Auto-generated constructor stub } public int getUid() { return uid; } public void setUid(int uid) { this.uid = uid; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } } 2、编写regist.jsp页面 Insert title here 注册页面用户名：密码：注册页面 3、编写RegisterServlet类

RegisterServlet类中仅仅实现请求数据的获取和返回响应信息，逻辑放入UserService类中进行判断。

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; import com.itheima.domain.User; import com.itheima.service.UserService; public class RegisterServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置响应类型定和编码 response.setContentType("text/html;charset:UTF-8"); //获取输出流对象 PrintWriter out = response.getWriter(); //获取表单提交的数据 String username = request.getParameter("username"); String password = request.getParameter("password"); //封装数据 User user = new User(null,username,password); //将数据传入service进行逻辑判断 UserService service = new UserService(); Boolean flag = service.checkUsername(username); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } } 4、编写UserService类

UserService类实现对逻辑的判断，用户名是否已经被注册，但是数据库中数据的获取需要在UserDao类中实现。

import java.util.List; import com.itheima.dao.UserDao; import com.itheima.domain.User; public class UserService { public Boolean checkUsername(String username){ //查询数据库中是否已经有该用户名 UserDao dao = new UserDao(); User user = dao.findUserByUsername(username); } } 5、编写UserDao类

在UserDao类中实现对数据库中数据的查询，查询数据库中是否有用户注册时输入的用户名的信息。

package com.itheima.dao; import java.sql.SQLException; import java.util.List; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.BeanHandler; import com.itheima.domain.User; import com.itheima.utils.JDBCUtils; public class UserDao { public User findUserByUsername(String username) { User user = null; QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource()); try { user = qr.query("select * from user where username = ?", new BeanHandler(User.class), username); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return user; } } 6、完善UserService类

如果UserDao类中返回的User对象为空，说明这个用户名没有被注册过，返回一个true，否则返回false。

package com.itheima.service; import java.util.List; import com.itheima.dao.UserDao; import com.itheima.domain.User; public class UserService { public Boolean checkUsername(String username){ //查询数据库中是否已经有该用户名 UserDao dao = new UserDao(); User user = dao.findUserByUsername(username); //如果返回null，说明该用户名没有注册 if(user == null){ return true; } return false; } } 7、完善RegisterServlet类

如果UserService中的service方法返回的是true，说明用户名没有被注册，返回注册成功的提示信息；如果返回的是false，说明用户名已经被注册，设置域对象，转发请求信息，提示用户名已经被注册。

package com.itheima.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; import com.itheima.domain.User; import com.itheima.service.UserService; public class RegisterServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置响应类型定和编码 response.setContentType("text/html;charset:UTF-8"); //获取输出流对象 PrintWriter out = response.getWriter(); //获取表单提交的数据 String username = request.getParameter("username"); String password = request.getParameter("password"); //封装数据 User user = new User(null,username,password); //将数据传入service进行逻辑判断 UserService service = new UserService(); Boolean flag = service.checkUsername(username); //如果返回true，说明用户名没有被创建，可以注册 if(flag){ out.println("恭喜您！注册成功！"); }else{ //如果用户名已经被注册了，则设置域对象，返回提示性信息 request.setAttribute("error", "用户名已经被注册了！"); request.setAttribute("user", user); //将请求转发回注册页面 request.getRequestDispatcher("/register.jsp").forward(request, response); return; } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } } 8、完善注册页面

对注册页面进行完善，使用el表达式将用户名被注册的信息提示出来，并在用户名文本框中显示用户之前输入的用户名。

Insert title here 注册页面用户名：${error} 密码：案例实现结果

输入数据库中没有的用户信息

用户注册注册成功输入数据库中已有的用户信息用户名已经被注册

三、使用AJAX方式实现案例

在上面的案例中，我们可以发现，当用户输入完注册信息后，点击注册按钮，才会提示用户名已经被注册了，并且页面被刷新了，这样的页面用户体验较差。现在我们想实现：用户名能够动态的进行判断，如果用户输入一个已经被注册的用户名，直接就会显示提示信息；如果用户点击用户名这个文本框后没有输入信息，并且又点击了其他地方，会提示用户没有输入用户名；并且在实现这些功能的时候，页面不会被刷新。

接下来我们对案例进行改写

对jsp页面进行修改实现三个功能（页面不刷新）：（1）用户名文本框失去焦点的时候，提示用户名不能为空（2）用户名重复，提示用户名已经被注册了（3）用户名不重复，提示用户名可以注册

Insert title here //为用户名文本框添加这个方法，在文本框失去焦点以后运行 //就是当用户填写完用户名后，进行下一步填写的时候，异步执行这个方法 function checkUsername(){ //获取用户名文本框对象 var username = document.getElementsByName("username")[0].value; //获取提示信息span对象 var span1 = document.getElementsByTagName("span")[0]; if(username == ""){ span1.innerHTML = "用户名不能为空！"; return; } //创建请求对象 var xmlHttp = new XMLHttpRequest(); //设置请求状态变化时触发的事件 xmlHttp.onreadystatechange = function(){ //如果请求状态码为4，说明请求已经完成，响应已经就绪 if(xmlHttp.readyState == 4){ //响应状态码为200，响应完成 if(xmlHttp.status == 200){ //获取服务器返回的信息 var data = xmlHttp.responseText; //判断返回的信息，输出响应的提示信息 if(data == 0){ //如果返回0，说明用户名不重复，可以使用 span1.innerHTML = "用户名可以使用！"; }else{ //说明用户名重复，不能使用 span1.innerHTML = "用户名已经被注册！"; } } } } //创建连接 xmlHttp.open("GET","/web14_test1/RegisterAJAXServlet?username="+username,true); //发送请求 xmlHttp.send(); } 注册页面用户名：密码：

创建一个新的RegisterAJAXServlet 我们可以将RegisterServlet类的代码复制过来进行修改，返回简单的提示信息，由js方法进行判断，所以就不用设置响应编码，也不用获取用户输入的密码。这里就体现了我们MVC三层架构的好处，只需要修改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; import com.itheima.domain.User; import com.itheima.service.UserService; public class RegisterAJAXServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取输出流对象 PrintWriter out = response.getWriter(); //获取表单提交的数据 String username = request.getParameter("username"); //将数据传入service进行逻辑判断 UserService service = new UserService(); Boolean flag = service.checkUsername(username); //AJAX方式 if(flag){ //如果返回true，说明用户名没有被创建，可以注册,返回0 out.println(0); }else{ //用户名已经被注册，返回1 out.println(1); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } } AJAX方式实现案例成果

注册页面用户名文本框不输入内容失去焦点时用户名为空用户名重复时用户名重复用户名不重复时用户名不重复完成注册完成注册

【本文地址】

公司简介

联系我们