文章目錄
- Ajax概述
- 同步和異步
- Ajax基本操作
Ajax概述
AJAX
(Asynchronous JavaScript And XML)：異步的 JavaScript 和 XML。
JavaScript
表明該技術和前端相關；
XML
是指以此進行資料交換
AJAX 作用有以下兩方面：
- 與伺服器進行資料交換：通過AJAX可以給伺服器發送請求，伺服器将資料直接響應回給浏覽器。
- 如下圖我們先來看之前做功能的流程，如下圖：
[Javaweb]Ajax - 如上圖，
調用完業務邏輯層後将資料存儲到域對象中，然後跳轉到指定的Servlet
頁面，在頁面上使用jsp
和EL表達式
JSTL
标簽庫進行資料的展示。
而我們學習了AJAX 後，就可以使用AJAX和伺服器進行通信，以達到使用 HTML+AJAX來替換JSP頁面了。如下圖，浏覽器發送請求servlet，servlet 調用完業務邏輯層後将資料直接響應回給浏覽器頁面，頁面使用 HTML 來進行資料展示。
[Javaweb]Ajax
- 異步互動：可以在不重新加載整個頁面的情況下，與伺服器交換資料并更新部分網頁的技術，如：搜尋聯想、使用者名是否可用校驗，等等…
例如：在我們輸入一些關鍵字（例如 ）後就會在下面聯想出相關的内容，而聯想出來的這部分資料肯定是存儲在百度的伺服器上，而我們并沒有看出頁面重新重新整理，這就是 更新局部頁面 的效果。奧運
[Javaweb]Ajax
同步和異步
同步發送請求過程如下：
浏覽器頁面在發送請求給伺服器，在伺服器處理請求的過程中，浏覽器頁面不能做其他的操作。隻能等到伺服器響應結束後才能，浏覽器頁面才能繼續做其他的操作。異步發送請求過程如下：
浏覽器頁面發送請求給伺服器，在伺服器處理請求的過程中，浏覽器頁面還可以做其他的操作。
Ajax基本操作
首先服務端的代碼很好寫：
@WebServlet("/AjaxDemo1")
public class ServletAjaxDemo1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().write("hello,Ajax~");
}
} 然後就是前端代碼，我們可以參考w3c：
首先我們要建立核心對象，Ajax 的核心是 XMLHttpRequest 對象。
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
} 其次我們要發送請求：
如需向伺服器發送請求，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); GET 還是 POST？
GET 比 POST 更簡單更快，可用于大多數情況下。
不過，請在以下情況始終使用 POST：
①緩存檔案不是選項（更新伺服器上的檔案或資料庫）
②向伺服器發送大量資料（POST 無大小限制）
③發送使用者輸入（可包含未知字元），POST 比 GET 更強大更安全
最後擷取伺服器響應：
readyState 屬性存留 XMLHttpRequest 的狀态。
onreadystatechange 屬性定義當 readyState 發生變化時執行的函數。
status 屬性和 statusText 屬性存有 XMLHttpRequest 對象的狀态。
每當 readyState 發生變化時就會調用 onreadystatechange 函數。
注釋：onreadystatechange 被觸發五次（0-4），每次 readyState 都發生變化。
當 readyState 為 4，status 為 200 時，響應就緒：
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
} 最後我們前端的完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>//①建立核心對象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//②發送請求
xhttp.open("GET", "http://localhost:8080/tomcat-demo1/AjaxDemo1", true);
xhttp.send();
//③擷取響應
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText)
}
};</script>
</html>