學習目標
如果提交表單 給服務器，當服務器處理完成之后，回應給瀏覽器，你發現瀏覽器顯示頁面時，閃爍了一下，
這種方式不是異步提交，而是同步提交，該閃爍是頁面整體重繪了，
1.能夠理解異步的概念
2.能夠了解原生js的ajax
3.能夠使用jQuery的$.get()進行訪問
4.能夠使用jQuery的$.post()進行訪問
5.能夠使用jQuery的$.ajax()進行訪問
6.能夠使用jQuery3.0的$.get()新增簽名進行訪問
7.能夠使用jQuery3.0的$.post()新增簽名進行訪問
8.能夠掌握json的三種資料格式
9.能夠使用json轉換工具Jackson進行json格式字串的轉換
10.能夠完成用戶名是否存在的查重案例
11.能夠完成自動補全的案例
同步請求與異步請求
（1）瀏覽器和服務器之間資料傳輸方式
1:同步方式
2:異步方式
（2）兩種方式有什么不同？
同步請求，服務器回應時，頁面整體重繪(回應了整個頁面）
異步請求，服務器回應時，頁面區域重繪(回應了字串或者json)
（3）異步請求有什么優點？
異步請求可以提高用戶的體驗性
（4）異步請求應用場景有哪些？
a:用戶名檢測
b:搜索的自動補全
c:頁面的區域重繪
原生的ajax編程(了解)
- (1)傳統的程式運行原理
用戶發送請求，服務器接受請求，處理后回傳資料，瀏覽器接受回應資料，進行顯示資料，這個時間就會有處理和接受之間的空閑，導致用戶的等待時間 - (2) Aajx的程式運行原理是：用戶發送請求，到Ajax引擎處理后，發送給服務器接受請求，處理后回傳資料Ajax，瀏覽器接受回應資料，進行顯示資料，在者期間瀏覽器可以一直和Ajax進行交流，減少處理時間
web\0-base-ajax-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 原生的ajax開發:
// 1）創建Ajax引擎物件
// 2）為Ajax引擎物件系結監聽（監聽服務器已將資料回應給引擎）
// 3）系結提交地址
// 4）發送請求
// 5）接受回應資料
//
function clickFn() {
//1）創建Ajax引擎物件
var xmlHttp = new XMLHttpRequest();
//2)為Ajax引擎物件系結監聽（監聽服務器已將資料回應給引擎）
xmlHttp.onreadystatechange = function (ev) {
//如果state值是4，說明收到回應資料
//如果狀態碼是200.說明服務器正常回應
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 5）接受回應資料
//獲取回應資料
alert(xmlHttp.responseText); //response.getWriter().write("hello")
}
}
//3）系結提交地址
//參1：表示請求方式
// 參2：表示服務器的資源訪問路徑，不用加專案名,
// 參3：表示是否異步，true是異步
xmlHttp.open("get","s1",true);
//4)發送請求
xmlHttp.send();
}
</script>
</head>
<body>
<!--設計一個按鈕，一點擊這個按鈕，就向服務器發出異步請求-->
<input type="button" value="點我，發出異步請求" onclick="clickFn()"/>
</body>
</html>
src\com\wzx\pack01_ajax\BaseAjaxServlet.java
@WebServlet("/s1")
public class BaseAjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//回應給瀏覽器
System.out.println("s1 doGet");
//回應
response.getWriter().println("hello");
}
}
jQuery框架的ajax簡介
- （1）原生Ajax編程為什么不用？
代碼量大，使用不方便，封裝成函式，直接呼叫 - （2)jQuery框架的ajax函式
$.get請求-原理
- （1）get函式
$.get(url, [data], [callback], [type]) - url:表示服務器的訪問路徑,如:“s1”
- data:表示向服務器發送的引數,
格式: 1: "username=wzx&password=123"2:json串 - callback：匿名函式，表示接收服務器發送過來的回應，這個函式自動執行
- type :表示瀏覽器期望服務器發送過來的資料型別，
格式："text" "json"
（2）get請求原理
$.get(
"s2",
"username=wzx&password=123",
function(data){ //這個data就是服務器回傳的字串
//處理資料
},
"text"
);
$.post(
"s2",
"username=wzx&password=123",
function(data){ //這個data就是服務器回傳的字串 var data = []
//處理資料
},
"json"
);
var url = "s2";
var param = "username=lft&password=123";
var func = function(data){
};
var type = "json";
$.post(url,param,func,type);
$.get請求-代碼實作
（1）在點擊事件中呼叫get請求
（2）在服務端回傳json或者字串資料
（3）在回呼函式中撰寫業務邏輯
web\1-juqery-get_post_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function clickFn() {
//向服務器發送異步請求
$.post(
"s2",
"username=寶強x&password=123",
function (data) {
alert(data);
},
"text"
);
}
</script>
</head>
<body>
<!--設計一個按鈕，一點擊這個按鈕，就向服務器發出異步請求-->
<input type="button" value="點我，發出jquery$.get異步請求" onclick="clickFn()"/>
</body>
</html>
src\com\wzx\pack02_jquery_ajax\Demo2Servlet.java
@WebServlet(name = "Demo2Servlet",urlPatterns = "/s2")
public class Demo2Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解決請求亂碼
request.setCharacterEncoding("UTF-8");
//1:接收引數
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("username:"+username);
System.out.println("password:"+password);
// System.out.println(1/0);
//解決回應亂碼
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("你好 ajax!");
}
}
$.ajax請求方式***
（1）什么是$.ajax請求方式
這種方式是將$.get和$.post方式合成一種請求
（2）如何呼叫
$.ajax({鍵：值,鍵：值,鍵：值});
web\2-jquery-ajax-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function clickFn() {
$.ajax({
url:"s2",
async:true,
data:"username=bingbing&password=456",
type:"post",
dataType:"text",
success:function (data) {
alert(data)
},
error:function () {
alert("服務器發生了錯誤")
}
});
}
</script>
</head>
<body>
<!--設計一個按鈕，一點擊這個按鈕，就向服務器發出異步請求-->
<input type="button" value="點我，發出ajax異步請求" onclick="clickFn()"/>
</body>
</html>
- 以上呼叫$.ajax的函式代碼最好是復制過來，因為方法內的鍵不能隨意修改，保能修改值
- type 如果是get 表示get請求，反之就是post請求
jquery3.0新特性ajax請求
- （1）什么是juqery3.0新特性GET/POST請求
$.get({鍵：值,鍵：值});
$.post({鍵：值,鍵：值});
- 因為方法指定get與post，所以要比$.ajax少一個鍵,type:post或者type:get，其他都一樣，
- 企業中一般還是使用1.x
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/82760.html
標籤：其他
下一篇：微信小程式隨堂筆記3