1. Ajax的工作原理
Ajax 是一種在無需重新加載整個網(wǎng)頁的情況下驱证，能夠更新部分網(wǎng)頁的技術昙衅。
Ajax可以使用原生JS進行創(chuàng)建使用，但是原生JS的Ajax的瀏覽器兼容性較差煞檩。一般在工作中很少使用原生方式創(chuàng)建Ajax的代碼。在商業(yè)化項目中通常會使用第三方的JS庫中的Ajax功能來實現(xiàn)異步請求望门。
與傳統(tǒng)請求方式的比較
與傳統(tǒng)請求方式的比較
Ajax的運行原理
Ajax的運行原理
2. 利用JQuery實現(xiàn)Ajax
數(shù)據(jù)庫
假期類型表
剩余假期天數(shù)表
數(shù)據(jù)庫連接工具類略
PO類
public class AskTypePO {
private int atypeid;
private String atype;
public int getAtypeid() {
return atypeid;
}
public void setAtypeid(int atypeid) {
this.atypeid = atypeid;
}
public String getAtype() {
return atype;
}
public void setAtype(String atype) {
this.atype = atype;
}
}
DAO類
public class SystemDAO {
public List<AskTypePO> getAskTypeList(Connection conn) throws Exception {
String sql = "select atypeid, atype from asktype";
PreparedStatement pst = null;
ResultSet rs = null;
List<AskTypePO> list = new ArrayList<AskTypePO>();
try {
pst = conn.prepareStatement(sql);
rs = pst.executeQuery();
while(rs.next()) {
AskTypePO po = new AskTypePO();
po.setAtypeid(rs.getInt("atypeid"));
po.setAtype(rs.getString("atype"));
list.add(po);
}
} catch (Exception e) {
throw e;
} finally {
DBUtil.close(pst, rs);
}
return list;
}
public int getRestDaysByEmpidAndTypeid(Connection conn, int empid, int typeid) throws Exception {
String sql = "select rdays from restdays where empid = ? and atypeid = ?";
PreparedStatement pst = null;
ResultSet rs = null;
int r = -1;
try {
pst = conn.prepareStatement(sql);
pst.setInt(1, empid);
pst.setInt(2, typeid);
rs = pst.executeQuery();
while(rs.next()) {
r = rs.getInt("rdays");
}
} catch (Exception e) {
throw e;
} finally {
DBUtil.close(pst, rs);
}
return r;
}
}
Service類
public class SystemService {
private SystemDAO dao = new SystemDAO();
public List<AskTypePO> getAskTypeList(){
Connection conn = DBUtil.getConnection();
List<AskTypePO> list = null;
try {
list = dao.getAskTypeList(conn);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
DBUtil.close(conn);
}
return list;
}
public int getRestDays(int empid, int typeid){
Connection conn = DBUtil.getConnection();
int r = -1;
try {
r = dao.getRestDaysByEmpidAndTypeid(conn, empid, typeid);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
DBUtil.close(conn);
}
return r;
}
}
Servlet類
EntryQingJiaServlet
@WebServlet("/EntryQingJiaServlet")
public class EntryQingJiaServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//查詢數(shù)據(jù)庫形娇，獲得所有的請假類型
SystemService ss = new SystemService();
List<AskTypePO> list = ss.getAskTypeList();
//將查詢結果放入Request作用域
request.setAttribute("alist", list);
request.getRequestDispatcher("/qingjia.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
AjaxGetRestDaysServlet
@WebServlet("/AjaxGetRestDaysServlet")
public class AjaxGetRestDaysServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//得到ajax提交的數(shù)據(jù)
String t = request.getParameter("t");
String a = request.getParameter("a");
System.out.println(t);
System.out.println(a);
//根據(jù)數(shù)據(jù)查詢數(shù)據(jù)庫獲得結果
SystemService ss = new SystemService();
int r = ss.getRestDays(2, Integer.parseInt(t));
//響應客戶端（通過out對象輸出結果）
response.setContentType("text/plain");
PrintWriter out = response.getWriter();
out.println(r);
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
JSP
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="${pageContext.request.contextPath}/EntryQingJiaServlet">申請休假</a>
</body>
</html>
qingjia.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>申請休假</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#asktype").change(function (){
var typeid = $(this).val();
//將typeid發(fā)給servlet
$.ajax({
url: "${pageContext.request.contextPath}/AjaxGetRestDaysServlet",
data: {"t":typeid,"a":"哈哈"},
type: "post",
dataType: "text",
async : true,
error : function (XMLHttpRequest, textStatus, errorThrown){
alert("Ajax出錯")
},
success : function (data){
if(data == -1){
data = "無限制";
}
$("#days").html(data);
}
});
});
});
</script>
</head>
<body>
休假類型：
<select id="asktype">
<option value="-1">=請選擇=</option>
<c:forEach var="a" items="${alist}">
<option value="${a.atypeid}">${a.atype}</option>
</c:forEach>
</select>
<br>
可用天數(shù)：<span id="days">無限制</span>
</body>
</html>
