文章目錄
Ajax簡介
- 傳統的網頁（不使用 Ajax）如果需要更新內容，必須重新加載整個網頁頁面。Ajax技術可以實現在不重新加載整個網頁的情況下，對網頁的某部分進行更新（和服務端進行交互）。
- Ajax技術可以說是 局部刷新技術 或 異步加載技術。
同步方式發送請求與異步方式發送請求的區別
- 同步：發送一個請求，需要等待響應返回，然後才能夠發送下一個請求，如果該請求沒有響應，不能發送下一個請求，客戶端會處於一直等待過程中。
- 異步：發送一個請求，不需要等待響應返回，隨時可以再發送下一個請求，不需要等待。
js原生ajax使用
步驟：
-1.創建一個Ajax引擎對象
-2.使用事件監聽Ajax引擎的狀態變化,爲Ajax引擎對象綁定監聽
-3.設置請求的信息,綁定提交地址
-4.發送請求
//1.創建Ajax引擎對象
var xmlhttp = new XMLHttpRequest();
//2.綁定事件，監聽Ajax引擎的狀態變化
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState === 4){ //服務端已經響應完成
if(xmlhttp.status === 200){ //服務端是正常響應的
//接受響應數據
var result = xmlhttp.responseText;
}
}
}
//3.設置請求的信息： 請求方式 請求資源 是否異步
xmlhttp.open("get", "ajaxServlet", true);
//4.發送請求
xmlhttp.send();
jQuery框架ajax使用
GET請求方式與Post請求方式
jQuery.get(url, params, callback, resultType)
jQuery.post(url, params, callback, resultType)
參數說明：
-
url：請求的服務器端url地址，必須有
-
params：請求的參數，可無可有。有兩種寫法：
"username=admin&password=123"{username: "admin", password: "123"}
-
callback：用於處理服務端響應結果的匿名函數對象
function(result){ //result：服務端響應回來的數據值 } -
resultType：服務端響應回來的數據類型。默認是text（string類型），如果指定了json，那麼callback裏的result值就是json對象
示例：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="發送請求" id="bu1">
<div id="div1">響應結果顯示</div>
<script>
//GET請求方式
// $("#bu1").click(function () {
// $.get("test","username=admin",function (result) {
// $("#div1").html(result)
// },"text")
// })
//Post請求方式
$("#bu1").click(function () {
$.post("test","username=admin ",function (result) {
$("#div1").html(result)
})
})
</script>
</body>
</html>
AJAX請求方式
jQuery.ajax({key:value, key:value, …})
| key（屬性名稱） | value |
|---|---|
| url | 請求的服務器端url地址，必須有 |
| data | 發送到服務器的數據。格式username=tom&password=123或 {username: "admin", password: "123"} |
| type | 請求方式，默認爲GET |
| dataType | 服務端返回的數據類型，取值可以是 xml, html, json, text等 |
| sucess | 請求成功後的回調函數,同GET請求方式與Post請求方式的參數callback |
| async | 是否異步。默認是true |
示例：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="發送請求" id="bu1">
<div id="div1">響應結果顯示</div>
<script>
$("#bu1").click(function () {
$.ajax({
url:"test",
data: "username=admin",
type: "post",
dataType: "text",
success: function (result) {
$("#div1").html(result);
},
async: false
});
})
</script>
</body>
</html>
以上方式請求時將執行的Servlet：
@WebServlet(name = "Servlet01",urlPatterns = "/test")
public class Servlet01 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
response.getWriter().write("username="+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
運行結果：
擴展：jQuery ajax - serialize() 方法
serialize() 方法通過序列化表單值，創建 URL 編碼文本字符串，即把表單的數據轉換成字符串的格式，形如username=admin&password=123&...，序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中。
如表單提交時通過ajax方式提交，jQuery.post(url, params, callback, resultType)中請求的參數params可通過表單jQuery對象.serialize();獲得，特別是表單中參數很多時，使用這個方法，可快速拼接參數。
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
width: 30%;
margin:auto;
position: absolute;
right: 0;
left: 0;
}
</style>
</head>
<body>
<form name="empForm" id="empForm" method="get" action="#">
<table>
<tr>
<td>用戶名</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" id="pwd" name="pwd" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="smtBtn" value="提交"></td>
</tr>
</table>
</form>
<!-- 引入jQuery類庫 -->
<script src="js/jquery-3.3.1.js"></script>
<!-- 引入validator插件 -->
<script src="js/jquery.validate.min.js"></script>
<script>
$("#empForm").validate({
submitHandler:function(){//校驗通過後，表單不提交，執行function裏的代碼
//序列化表單值
var params = $("#empForm").serialize();
alert(params);
},
rules:{//配置表單項校驗的規則
username:{
required: true
},
pwd:{
required: true
}
},
messages:{//配置對應的表單項校驗失敗後的錯誤提示信息
username:{
required: "請輸入用戶名"
},
pwd:{
required: "請輸入密碼"
}
}
})
</script>
</body>
</html>
json解析
json的基本語法，json轉換技術（ jsonlib， gson，fastjson，Jackson）
JS中的json數據解析
方法：
var value = json對象.key
var value = 數組對象[索引].key
示例：
示例1:
json格式 {key:value , key:value}
//json的定義
var person = {"name":"張三","age":18};
//json解析
alert(person.name); //張三
alert(person.age); //18
示例2:
json格式 [{key:value,key:value} , {key:value,key:value}]
var obj = [{"name":"張三", "age":18},{"name":"李四", "age":17}];
var v = obj[1].name;
alert(v);//張三
示例3:
json格式 {"param" : [{key:value,key:value},{key:value,key:value}] }
var obj= {"user": [{"name": "劉備", "age": "22"}, {"name": "關羽", "age": "20"},{"name": "張飛", "age": "21"}]};
var v = obj.user[0].name;
alert(v);//劉備
示例4:
json格式 {"param1":"value1", "param2":{} , "param3":[{key:value,key:value},{key:value,key:value}] }
var obj = {
"name":"劉備",
"info": {
"sex":"男",
"age":40,
"address":"河北"
},
"son":[
{"name": "劉封", "age": "21"},
{"name": "劉禪", "age": "18"},
{"name": "劉永", "age": "18"}
]
};
var v = obj.son[0].name;//劉封
var v = obj.info.address;//河北