什麼是AJAX
Ajax 是Asynchronous JavaScript And XML（異步的JavaScript 和 XML）。Ajax不是一種新技術，它的特點是：在不重新加載整個頁面的情況下，於服務器交換數據並實現頁面的局部刷新。
AJAX使用流程
-
創建XMLHttpRequest對象
-
向服務器發送ajax請求
-
處理服務器響應（服務器處理完請求並返回響應數據後，通過JavaScript對響應數據進行後續處理）
AJAX 實例
@WebServlet("/content") //@WebServlet註解相當於web.xml文件
public class IndexServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//設置Content-Type內容類型
response.setContentType("text/html; charset=UTF-8");
//瀏覽器打印輸出
response.getWriter().println("<h1>發送Ajax請求後的響應數據!</h1>");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="divContent">使用Ajax修改文件內容</div>
<br>
<button id="btn" type="button">修改</button>
<script>
document.getElementById("btn").onclick = function() {
/* 1. 創建XmlHttpRequest對象 */
var xmlhttp;
if (window.XMLHttpRequest) {
//新版瀏覽器執行的代碼
xmlhttp = new XMLHttpRequest();
} else {
//舊版IE瀏覽器執行的代碼
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/* 2. 向服務器發送ajax請求 */
//創建http請求
xmlhttp.open("GET", "/content", true);
//發送請求到服務器
xmlhttp.send();
/* 3. 處理服務器響應 */
//監聽ajax執行過程，捕捉ajax執行狀態（這是ajax的核心事件，當ajax的狀態發生變化時，就會觸發這個時間）
xmlhttp.onreadystatechange = function(){
//請求被成功處理並且響應已被接收時執行
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//獲取響應體的文本
var responseText = xmlhttp.responseText;
//對服務器響應結果進行後續渲染處理
document.getElementById("divContent").innerHTML = responseText;
}
};
};
</script>
</body>
</html>
AJAX 實例解析
創建XMLHttpRequest對象：
- XMLHttpRequest對象用於 在後臺與服務器交換數據。這就是ajax可以在不刷新整個網頁的情況下，向服務器獲取數據對網頁進行局部刷新。
向服務器發送ajax請求：
獲取服務器響應數據：
服務器處理完ajax請求後，返回的響應數據，可以通過XMLHttpRequest對象的 responseText 或responseXML 屬性
| 屬性 | 描述 |
|---|---|
| responseText | 獲取 字符串 形式的響應數據 |
| responseXML | 獲取 XML 形式的響應數據 |
onreadystatechange事件：
XMLHttpRequest對象有三個重要屬性
每當 readyState 改變時，就會觸發 onreadystatechange 事件。onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每個變化。