目录：
（1）ajax发送Post请求
（2）ajax发送post请求模拟提交表单数据
（3）ajax案例验证用户名是否可用
（4）发送ajax请求动态展示学生列表案例
（1）ajax发送Post请求
发送ajax post请求
AjaxRequest3Servlet：out返回的数据回被浏览器：XMLHttpRequest对象获取
package com.bjpowernode.ajax.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/ajaxrequest3")
public class AjaxRequest3Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("用户名已存在！！！");
}
}
（2）ajax发送post请求模拟提交表单数据
ajaxPost.html:
发送ajax post请求
用户名
密码
AjaxRequest3Servlet：
package com.bjpowernode.ajax.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/ajaxrequest3")
public class AjaxRequest3Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//out.print("用户名已存在！！！");
// 获取提交数据
String username = request.getParameter("username");
String password = request.getParameter("password");
out.print("用户名是：" + username + "，密码是：" + password);
}
}
（3）ajax案例验证用户名是否可用
ajax5.html:
AJAX POST请求验证用户名是否可用
用户名：
AjaxRequest4Servlet:
package com.bjpowernode.ajax.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
@WebServlet("/ajaxrequest4")
public class AjaxRequest4Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取用户名
String uname = request.getParameter("uname");
// 打布尔标记（一种编程模型）
boolean flag = false; // 默认是用户名不存在。
// 连接数据库验证用户名是否存在
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
// 1.注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
// 2.获取连接
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "123456");
// 3.获取预编译的数据库操作对象
String sql = "select id,name from t_user where name = ?";
ps = conn.prepareStatement(sql);
ps.setString(1, uname);
// 4.执行SQL语句
rs = ps.executeQuery();
// 5.处理结果集
if (rs.next()) {
// 用户名已存在。
flag = true;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
// 6.释放资源
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
// 响应结果到浏览器
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if (flag) {
// 用户名已存在，不可用
out.print("对不起，用户名已存在");
}else{
// 用户名不存在，可以使用
out.print("用户名可以使用");
}
}
}
数据库表中的数据：
（4）发送ajax请求动态展示学生列表案例
ajax6.html:
发送AJAX请求，显示学生列表
| 序号 | 姓名 | 年龄 | 住址 |
|---|
AjaxRequest5Servlet:
package com.bjpowernode.ajax.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 连接数据库，查询学员信息，拼接HTML代码，响应HTML代码到浏览器（这里就不再连接数据库了，写死了。）
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 不连接数据库，拼接HTML代码
StringBuilder html = new StringBuilder();
html.append("");
html.append("1 ");
html.append("王五 ");
html.append("20 ");
html.append("北京大兴区 ");
html.append(" ");
html.append("");
html.append("2 ");
html.append("李四 ");
html.append("22 ");
html.append("北京海淀区 ");
html.append(" ");
out.print(html);
}
}
点击按钮：
上面项目，目前存在的缺点：在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。不好维护。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端
能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。
我们后端的java代码能不能只返回数据？？？？可以。（返回数据可以采用JSON的格式，也可以采用XML的格式）
一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。
