ajax,JDBC(MYSQL),Servlet以及前端语言和Java的综合利用（呕心沥血才码出来的，一个人包揽前端和后端真累啊）
编程虽非所学专业，但作为一大爱好，学有余力之时喜爱码一码。早就有想独立做出包揽前后端的设计了，随后抽出了三日的课余时光终于做出了让自己满意的效果了，于是便想总结其中所遇的BUG以及知识瓶颈。
《1》总共五份代码文件，咱就先从代码最多的Login.html文件说起吧————→
登录界面
注册心仪的用户名：
注册您的用户密码：
请输入用户名：
请输入用户密码：
映入眼帘的是满满的稠密代码，令人望而生畏，我也不知道我是怎么码完的了，脑子一片混沌。闲话不说，先看看一系列的CSS样式吧，在这里我参杂了很多CSS3的特性，所以咱们会看到一些古怪的样式名称，比如.bu:hover,.bu:active,.hen:focus。定义原理以及渊源就不说了（海了去了），我就简略的告诉你，他是给冒号（:)前面的样式设置伪选择器，那么这种伪选择器是用来干嘛的呢，咱们可以把它理解为CSS的“事件处理”，拿.bu:hover来说明吧，bu样式我拿着去修饰了一个按钮(事件源)，当我把鼠标移到这个按钮上(相当于一个事件行为）时，hover这个样式就可以显示在按钮上了(事件处理)，这个过程是过渡的。其它两个也是这么理解的，只是“事件行为不同而已”（等下把效果图演示一下就明白了)
另外里面有很多CSS3的新属性，比如设置阴影(如box—shadow)，设置圆角边框(如boder—radius)啥的，学前端的可以去多了解了解CSS3，它可以大大地提升网页的美观性。
好了我们再往下面翻，可以看到ajax异步通信的核心了——XMLHttpRequest了。步骤就是：
- 创建一个XMLHttpRequest对象，考虑到不同浏览器的兼容性，咱们有必要按照代码所示那样的方式创建这个对象
- 用open的方法设置发送方式(Post,get)，以及是否异步(异步则设置true)，然后写入想要连接的后端服务程序入口，建立通信连接。
- 如果选择post方式，则有必要设置请求头，然后用send方法以键值对的方式发送数据，如XMLHttpReq.send("username="+username+"&password="+password);注意哦不同键值对之间要用&隔开，不要用多个send发送多个数据，不然会产生一些bug，尽量用一个send发送所有数据；对于get方式那就简单了，在open方法里面的URL参数后面以查询字符的方式添加在URL后面就行了。
- 还要记得设置回调函数哦(用来处理来自服务端的响应)
通过这样咱们就可以去感受ajax异步通信的强大了，传统的通信(通常是通过表单提交)一旦发送请求后就会丢失当前页面，然后等待服务端的响应，而且服务端的响应是一整个页面。那么在这种情景下，如果需要加载的内容很小，还是要生成一个完整的页面给用户(原有的内容重新加载了一遍)的话，当用户一多，对于服务器的负载能力要求就会更高，消耗也高。另外用户提交请求要丢弃当前页面，给用户的体验也不好。这时候咱们就需要ajax异步通信了，它将解决上述所有的问题。
仔细一看就可以发现，后端反馈回来的数据是动态生成在当前页面上的，用户提交请求不需要丢弃当前页面，后端反馈响应也不再是一个完整的页面。
然而我还得提醒一下，我们必须要掌握HTML得DOM模型而且还要会JavaScript的动态生成DOM节点的方法，不然你咋处理服务端异步反馈回来的数据。在ajax异步通信中，servlet的重定向和请求转发就无法正常使用了，因为这种异步通信不再是一整个浏览器的请求和响应了，自然就无法适应重定向和请求转发的机制了。在这里我用的是JavaScript里面Window.location.href=URL方法进行跳转。但是这种跳转无法访问到WEB-INF目录下的页面资源了，这对安全的页面管理带来了一定的麻烦（请求转发和重定向是可以访问到的）。还有哦，当利用XMLHttpRequest对象的文本对象responseText接收到的后端数据虽然是字符串类型，但它里面还参夹了很多空格符之类的特殊符号，我们用它与其它字符串进行比较之前要先用trim()方法先过滤一遍。
《2》咱们来看看JDBC(MYSQL)部分的代码————→
package web2;
import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
class manager {
static String driver="com.mysql.cj.jdbc.Driver";//数据库驱动类所对应的字符串
static String URL="jdbc:mysql://localhost:3306/mydatabase?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8";
//URL语法格式如下
//jdbc:mysql:是固定的写法，后面跟主机名localhost，3306是默认的MySQL端口号
//serverTimezone=UTC是指定时区时间为世界统一时间
//useUnicode=true是指是否使用Unicode字符集，赋值为true
//characterEncoding=utf-8是指定字符编码格式为UTF8
static void addmsg(String username,String password) {
try {
Class.forName(driver);}
catch(ClassNotFoundException e) {
e.printStackTrace();
}
try{Connection cnt=DriverManager.getConnection(URL,"root","941593760s");
PreparedStatement ps=cnt.prepareStatement("insert into user values(?,?)");
ps.setString(1, username);
ps.setString(2, password);
ps.executeUpdate();
}
catch(SQLException e) {
e.printStackTrace();
}
catch(Exception e) {
e.printStackTrace();
}
}
static boolean examinationDL(String username,String password) {
try {
Class.forName(driver);}
catch(ClassNotFoundException e) {
e.printStackTrace();
}
try(Connection cnt=DriverManager.getConnection(URL,"root","941593760s");
PreparedStatement ps=cnt.prepareStatement("select * from user where username=? and password=?"))
{ps.setString(1, username);
ps.setString(2, password);
ResultSet rs=ps.executeQuery();
if(rs.next()) {
return(true);}//登录成功
}
catch(Exception e) {
e.printStackTrace();
}
return(false);
}
static boolean examinationZC(String username) {
try {
Class.forName(driver);}
catch(ClassNotFoundException e) {
e.printStackTrace();
}
try(Connection cnt=DriverManager.getConnection(URL,"root","941593760s");
PreparedStatement ps=cnt.prepareStatement("select * from user where username=?"))
{ps.setString(1, username);
ResultSet rs=ps.executeQuery();
if(rs.next()) {
return(false);}//有重复的的名称，请重新注册
}
catch(Exception e) {
e.printStackTrace();
}
return(true);
}
}这相当于业务处理部分了，咱们现在虽然是编程学习者，不需要注意很多，但我还是建议在今后的web开发中多采取M-V-C结构——模型-视图-控制模式。
来看看这部分代码，说实话我是很不满意我在这部分的代码处理能力，你会发现在这三个方法里我重复了一些固定的代码。我也想把它们拿出来单独做一个整体呐，可是它涉及一大堆异常处理，不敢这么做，生怕又来一大堆BUG，实属无奈之举呐！
好吧言归正传，在这里我用的是PreparedStatement来处理SQL，为什么呢？肯定是防止SQL注入啊，其次就是用这个对象封装的SQL语句是预编译的，对于需要重复执行的SQL语句执行效率高。咱来说说通过PreparedStatement对象的ExecuteQuery方法得来的ResultSet，它代表你从数据库里的某个表结构中查询出来的数据总和。得到这个集合后，你就可以利用ResultSet对象提供的一系列方法来操纵数据指针，从而找到你想要的数据了。
此外，我格外说说这个异常处理。对于会抛出异常的语句通常采用两种方法：一是用try……catch……语句进行捕获异常并处理；二是你不处理这个异常，在定义方法时利用throws关键词直接把这个异常抛出去，留给调用者去解决（我不建议用这种，虽然很简单很潇洒，但不知名的BUG产生也多。而且用throws抛出的异常还是要解决的，只是解决的对象不同，所以尽早处理异常愈好）。
也不要忘了，你需要用到的有关JDBC(MYSQL)的包要放到WEB-INF目录下的lib文件里面，这样你的编译才能通过，不然会出现找不到数据库驱动类之类的错误。
业务效果显示→
《3》来看看servlet部分的代码吧————→
package web2;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/Controller")
public class Controller extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Controller() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
response.setContentType("text/html;charset=UTF-8");
if(!username.equals("") && !password.equals("") && username!=null && password!=null)
{if(manager.examinationZC(username))
{
manager.addmsg(username,password);
response.getWriter().println("欢迎<<"+username+">>加入我们的大家庭! ! "+"\n"
+"快去登录吧~❤❤~");}
else {response.getWriter().println("您心仪的用户名<<"+username+">>已经被别人先注册啦，请刷新页面重新注册");
}}
else {response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("输入不能为空哦，请刷新页面重新进行注册~~/(ㄒoㄒ)/~~");}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}package web2;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/validate")
public class validate extends HttpServlet {
private static final long serialVersionUID = 1L;
public validate() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username1");
String password=request.getParameter("password1");
response.setContentType("text/html;charset=UTF-8");
if(!username.equals("") && !password.equals("") && username!=null && password!=null) {
if(manager.examinationDL(username, password)) {
response.getWriter().println("success");
}
else {response.getWriter().println("连自己的用户名和密码都不记得了吗，再想想吧");
}
}
else {
response.getWriter().println("输入不能为空哦，请重新进行登录");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
servlet作为M-V-C模式里面的控制器，代码逻辑很简单，就不多废话了。只提醒一下大家注意设置编码解码格式，我这里涉及了前端后端以及交互，尽量全部统一格式，用UTF-8，这样就不会出现乱码之类的了。
配合效果→
《4》最后部分是游戏部分————→
几乎全码都利用了HTML5的新特性 Canvas-画笔特性。
效果如图→
再来展示一下其它的JDBC的业务处理→
最后祝大家五一快乐！！！！！
~~~~~~~~·~~~~~~·`~~···`~````~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~