借鑑博客：https://www.cnblogs.com/hellokuangshen/p/11283224.html
Ajax簡介
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
Ajax 不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術。
在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。
Google Suggest 使用 AJAX 創造出動態性極強的 web 界面：當您在谷歌的搜索框輸入關鍵字時，JavaScript 會把這些字符發送到服務器，然後服務器會返回一個搜索建議的列表。
就和國內百度的搜索框一樣：
傳統的網頁(即不用ajax技術的網頁)，想要更新內容或者提交一個表單，都需要重新加載整個網頁。
使用ajax技術的網頁，通過在後臺服務器進行少量的數據交換，就可以實現異步局部更新。
使用Ajax，用戶可以創建接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面。
利用AJAX可以做：
註冊時，輸入用戶名自動檢測用戶是否已經存在。
登陸時，提示用戶名密碼錯誤
刪除數據行時，將行ID發送到後臺，後臺在數據庫中刪除，數據庫刪除成功後，在頁面DOM中將數據行也刪除。
我們可以使用前端的一個標籤來僞造一個ajax的樣子。 iframe標籤
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞造Ajax</title>
</head>
<body>
<script type="text/javascript">
window.onload = function f() {
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
}
function loadPage() {
var targetURL = document.getElementById('url').value;
console.log(targetURL);
document.getElementById('iframePosition').src = targetURL;
}
</script>
<div>
<p>請輸入要加載的地址：<span id="currentTime"></span></p>
<p>
<input type="text" id="url" value="https://www.baidu.com/">
<input type="button" value="提交" onclick="loadPage()">
</p>
</div>
<div>
<h3>
加載頁面的位置：
</h3>
<iframe style="width: 100%;height: 500px" id="iframePosition">
</iframe>
</div>
</body>
</html>
運行結果：
jQuery.Ajax
Ajax的核心是XMLHttpRequest對象(XHR)。XHR爲向服務器發送請求和解析服務器響應提供了接口。能夠以異步方式從服務器獲取新數據。
jQuery 提供多個與 AJAX 有關的方法。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON – 同時您能夠把這些外部數據直接載入網頁的被選元素中。
jQuery 不是生產者，而是大自然搬運工。
jQuery Ajax本質就是 XMLHttpRequest，對他進行了封裝，方便調用！我們來看下他的方法；
1. jQuery.get(...)
所有參數：
url: 待載入頁面的URL地址
data: 待發送 Key/value 參數。
success: 載入成功時回調函數。
dataType: 返回內容格式，xml, json, script, text, html
2.jQuery.post(...)
所有參數：
url: 待載入頁面的URL地址
data: 待發送 Key/value 參數
success: 載入成功時回調函數
dataType: 返回內容格式，xml, json, script, text, html
3.jQuery.getJSON(...)
所有參數：
url: 待載入頁面的URL地址
data: 待發送 Key/value 參數。
success: 載入成功時回調函數。
4.jQuery.getScript(...)
所有參數：
url: 待載入頁面的URL地址
data: 待發送 Key/value 參數。
success: 載入成功時回調函數。
5.jQuery.ajax(...)
部分參數：
url：請求地址
type：請求方式，GET、POST（1.9.0之後用method）
headers：請求頭
data：要發送的數據
contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否異步
timeout：設置請求超時時間（毫秒）
beforeSend：發送請求前執行的函數(全局)
complete：完成之後執行的回調函數(全局)
success：成功之後執行的回調函數(全局)
error：失敗之後執行的回調函數(全局)
accepts：通過請求頭髮送給服務器，告訴服務器當前客戶端課接受的數據類型
dataType：將服務器端返回的數據轉換成指定類型
"xml": 將服務器端返回的內容轉換成xml格式
"text": 將服務器端返回的內容轉換成普通文本格式
"html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，如果包含JavaScript標籤，則會嘗試去執行。
"script": 嘗試將返回值當作JavaScript去執行，然後再將服務器端返回的內容轉換成普通文本格式
"json": 將服務器端返回的內容轉換成相應的JavaScript對象
"jsonp": JSONP 格式使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數
SpringMVC實現ajax
我們來獲取一個集合對象，展示到前端頁面
controller
@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2(){
List<User> list = new ArrayList<>();
User user1 = new User("秦疆1號",1,"男");
User user2 = new User("秦疆2號",1,"男");
User user3 = new User("秦疆3號",1,"男");
User user4 = new User("秦疆4號",1,"男");
list.add(user1);
list.add(user2);
list.add(user3);
list.add(user4);
return list; //由於加了@ResponseBody註解，他會返回一個字符串；
}
前端頁面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="獲取數據"/>
<table width="80%" align="center">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tbody id="content">
</tbody>
</table>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$.post("${pageContext.request.contextPath}/ajax/a2",function (data) {
console.log(data);
var html = "";
for (var i=0;i<data.length;i++){
html += "<tr>" +
"<td>"+data[i].name + "</td>" +
"<td>"+data[i].age + "</td>" +
"<td>"+data[i].sex + "</td>" +
"</tr>"
}
$("#content").html(html);
})
})
})
</script>
</body>
</html>
結果展示：
springMVC實現註冊提示
我們再測試一個小Demo，思考一下我們平時註冊時候，輸入框後面的實時提示怎麼做到的；如何優化
controller:
@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/js/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>
項目輸出：
