AJAX= Asychronous JavaScript and XML（異步的JavaScript和 xml）。
AJAX 是一直那個在無需重新加載真個網頁的情況下，能夠更新部分網頁的技術。
Ajax 不是一種新語言，而是一直那個用於創建更好的更快的以及交互性更強的web應用程序技術。
在2005 年，Google 通過Google Suggest 使AJAX 變得流行起來。
Google Suggest 使用 AJAX創造出動態性極強的web頁面：
當你在谷歌的搜索框輸入關鍵字時，JavaScrip 會把這些字符送到服務器，然後服務去會返回一個搜索建議的列表。
就像百度的搜索框一樣：
傳統的網頁(即不用ajax技術的網頁)，想要更新內容或者提交一個表單，都需要重新加載整個網頁。
使用ajax技術的網頁，通過在後臺服務器進行少量的數據交換，就可以實現異步局部更新。
利用AJAX可以做：
註冊時，輸入用戶名自動檢測用戶是否已經存在。
登陸時，提示用戶名密碼錯誤
刪除數據行時，將行ID發送到後臺，後臺在數據庫中刪除，數據庫刪除成功後，在頁面DOM中將數據行也刪除。
我們可以使用前端的一個標籤來僞造一個ajax的樣子。 iframe標籤
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<title>ajax</title>
<script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
<script>
/*
jQuery.post(...)
所有參數：
url: 待載入頁面的URL地址 (必填)
data: 待發送 Key/value 參數
success: 載入成功時回調函數
data:請求返回的數據
status：請求返回的狀態
*/
function a1(){
//ajax默認是get請求
$.post({
url:"${pageContext.request.contextPath}/ajax/a1",
data:{'name':$("#txtName").val()},
success:function (data,status) {
console.log(data);
console.log(status);
}
});
}
</script>
</head>
<body>
<%--onblur：失去焦點觸發事件--%>
用戶名:<input type="text" id="txtName" onblur="a1()"/>
</body>
然後編寫我們的 contorller：
package com.wu.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Controller
@RequestMapping("/ajax")
public class AjaxController {
//第一種方式，服務器要返回一個字符串，直接使用response
@RequestMapping("/a1")
public void ajax(String name, HttpServletResponse response) throws IOException {
if ("admin".equals(name)){
response.getWriter().print("true");
}else {
response.getWriter().print("false");
}
}
}
運行結果：
點擊輸入框，當鼠標點擊輸入框以外的地方時就會觸發 事件：顯示 false success
在原有的基礎上升級：
@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd){
String msg = "";
if (name!=null){
if ("admin".equals(name)){
msg = "ok";
}else {
msg = "用戶名有誤";
}
}
if (pwd!=null){
if ("123456".equals(pwd)){
msg = "ok";
}else {
msg = "密碼輸入有誤";
}
}
return msg;
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
<script>
function a1() {
$.post({
url:"${pageContext.request.contextPath}/ajax/a3",
data:{"name":$("#name").val()},
success: function (data) {
if (data.toString()=='ok') { //信息覈對成功
$('#userInfo').css("color","green");
}else {
$('#userInfo').css("color","red");
}
$("#userInfo").html(data);
}
})
}
function a2() {
$.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("#pwd").val()},function (data) {
if (data.toString()=='ok') { //信息覈對成功
$('#pwdInfo').css("color","green");
}else {
$('#pwdInfo').css("color","red");
}
$("#pwdInfo").html(data);
})
}
</script>
</head>
<body>
<p>
用戶名：
<input type="text" id="name" onblur="a1()"/>
<span id="userInfo"></span>
</p>
<p>
密碼：
<input type="text" id="pwd" onblur="a2()"/>
<span id="pwdInfo"></span>
</p>
</body>
</html>
運行結果“：”
輸入正確的用戶名和密碼：
nice大功告成 動態請求響應 局部刷新 就是如此。。。