今天主要學習AJAX表達式和 JSON
思維導圖：
一．AJAX
1.概念：
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）【異步JavaScript加載技術】，是指一種創建交互式、快速動態網頁應用的網頁開發技術，無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
Asyn Javacript And Xml = AJAX(異步JS和XML的技術)
2.同步與異步：
（1）同步：客戶端發起了一個請求到服務端,在這個服務端返回之前 客戶端必須等待，服務端多就返回 客戶端等待多久，服務端卡死，客戶端卡死。(同時只能執行一個事情)
（2）異步:客戶端發起了一個請求到服務端,在服務端處理的期間 客戶端無需在乎返回結果，仍然可以在服務端處理的同時操作其他的事情(同時執行N個事情)
3.AJAX的使用場景
（1）數據實時校驗
（2）實時補全數據
（3）地圖數據的實時更新
（4）數據的局部加載
4.原生JavaScript的AJAX的初體驗
（1）創建一個ajax的核心引擎對象 XMLHttpRequest
var xhr = new XMLHttpRequest();
（2）提前告知ajax請求服務端後，該處理一個什麼樣的事情(回調函數)
xhr.onreadystatechange = function(){.....}
<1>保證ajax從服務端已經成功完成了數據的解析(xhr.readyState == 4)
readyState響應的狀態類型(5大類型)
0.代表了這個XMLHttpRequest已經被創建好了
1.已經成功調用或者正在調用open
2.已經成功調用或者正在調用send
3.從服務端正在獲取數據或者數據獲取成功
4.已經成功從服務器獲取到了並且解析了數據
<2>保證服務端返回狀態是200 (xhr.status == 200)
<3>獲取服務端的響應數據的文本(xhr.responseText)
（3）提前告知ajax要將請求提交到後端的哪個一個Servlet處理,提交的方式是GTE還是POST(確定請求路徑)
xhr.open("GET","/day21_Ajax/DemoServlet?username=toobug","true");
參數1:提交的方式（GET/POST）
參數2:提交的後端處理的路徑
參數3:是否異步(true/false) 默認true
（4）發送請求
xhr.send();
參考代碼:
function ajax_demo() {
// 1.創建一個ajax的核心引擎對象 XMLHttpRequest
var xhr = new XMLHttpRequest();
// 2.提前告知ajax請求服務端後，該處理一個什麼樣的事情(回調函數)
//ajax引擎的對象綁定事件,監聽服務端的狀態響應數據
xhr.onreadystatechange = function(){
//保證ajax從服務端已經成功完成了數據的解析,並且服務端返回狀態是200
if(xhr.readyState == 4 && xhr.status == 200){
//獲取服務端的數據的文本
document.getElementById("ts").innerHTML = xhr.responseText;
}
}
// 3.提前告知ajax要將請求提交到後端的哪個一個Servlet處理,提交的方式是GTE還是POST(確定請求路徑)
xhr.open("GET","/day21_Ajax/DemoServlet?username=toobug","true");
// 4.發送請求
xhr.send();
}
5.使用jQuery的Ajax的封裝(帶簽名)
$.get({url:value , data:value , fn , dataType:value})
參數解釋:
url:請求的服務端的地址
data:這個請求攜帶的參數
fn:回調函數
dataType:服務器的響應數據的格式(text/json)
參考代碼:
function ajax_demo() {
//使用get提交
$.post({
//提交的地址
url:"/day21_Ajax/DemoServlet",
//攜帶參數
data:"username=toobug",
//回調函數(成功,success是jQuery封裝好的函數,這個函數是響應狀態爲4/200的時候纔會執行)
success:function(data) {
alert(data);
$("#ts").html(data);
},
//回調函數(封裝了失敗的判斷)
error:function(data){
alert("服務端響應失敗");
},
//響應類型
dataType:"text"
});
}
注意問題:
(1)根據不同的提交方式,選擇不同的$.get或者$.post就可以了
(2)關於回調函數
1)fn:function(data){..}
這個回調函數,jQuery沒有進行任何狀態判斷的封裝,需要自己手動去判斷返回的狀態結果
2)success:function(data){..}
這個回調函數,jQuery已經進行了成功與否的判斷封裝,如果是xhr.readyState == 4 && xhr.status == 200,則返回的是success
3)error:function(data){...}
這個回調函數,jQuery已經進行了成功與否的判斷封裝,如果是非xhr.readyState != 4 && xhr.status != 200,則返回的是error，這三個函數,自己根據需求 選擇調用即可，可以同時寫上。
4)回調函數裏面的參數是我們需要注意的一個問題,這裏的參數個數可以是多個，當默認只有一個時候，則返回的是服務端響應的數據，一般也只需要這個數據，其他參數 基本見不到,名字可以隨意命名 但是一般都是data。
6.使用jQuery的Ajax的封裝(不帶簽名)
get和post的寫法一致,區別和帶簽名的方式就是要去掉{}，不需要寫方法的簽名，但是的順序必須固定 url->data->success->dataType參數，這個順序千萬不能亂,{}千萬不能加。
function ajax_demo() {
$.post({
//提交的地址
"/day21_Ajax/DemoServlet",
//攜帶參數
"username=toobug",
//回調函數(成功,success是jQuery封裝好的函數,這個函數是響應狀態爲4/200的時候纔會執行)
function(data) {
alert(data);
$("#ts").html(data);
},
//響應類型
"text"
});
}
7.jQuery的基於AJAX的底層實現方式($.ajax)
$.ajax是我們上面$.get和$.post的底層實現，因爲$.ajax的操作也比較簡單，和上面的基本一致，不過靈活度更高
$.ajax({
//是否異步提交
async:true,
//設置一個請求類型
type:"GET",
//提交的地址
url:"/day21_Ajax/DemoServlet",
//攜帶參數
data:"username=toobug",
//回調函數(成功,success是jQuery封裝好的函數,這個函數是響應狀態爲4/200的時候纔會執行)
success:function(data) {
alert(data);
$("#ts").html(data);
},
//回調函數(封裝了失敗的判斷)
error:function(data){
alert("服務端響應失敗");
},
//響應類型
dataType:"text"
});
二.JSON數據(普普通通的字符串類型的數據格式)
在以後的實際開發當中，後端返回給前端的數據，往往是複雜的、多樣的、量大的,也就是說，前端都需要的數據 絕對不僅僅只是一個普通的字符串而已。那麼像這種數據，後端怎麼響應給前端?
String usernmae = "TOOBUG"
double price = 190;
char sex = '男';
Date date = "2020年03月19日11:26:08"
.....
String str = {usernmae=TOOBUG,price=190.00,sex=男,date=2020年03月19日11:26:08}
String arr= [usernmae=TOOBUG,price=190.00,sex=男,date=2020年03月19日11:26:08]
我們可以將我們對象的數據,存儲到一個容器當中，然後將這個容器轉換成字符串，交給前端處理。但是要注意一個問題,目前的這種方式 還僅僅只是我們Java的操作，而前端 有可能對應的編程語言是PHP、.NET、Python。也就是說，現在前端和後端是處於一種異構的開發模式(完全兩種不同的數據結構和代碼風格)。最少我們是知道的,不論是前端，和後端都是支持字符串的，後面JavaScript的生態圈就提出了一種概念，能否誕生一個新的數據格式這種格式僅僅只是一個字符串，但是格式的風格固定下來，前端和後端都完全參考這種格式進行數據的傳輸，實現完全兼容。
1.什麼是JSON
JSON(JavaScrpt Object Notation) 是一種輕量級的數據交換格式,JSON一個完全獨立於編程語言之間的普通文本格式，也就是說JSON從來沒有和編程語言的強綁定關係。
2.優點:
（1）打破語言和語言之間的數據交換的弊端
（2）格式簡單，易於機器解析和人的閱讀
3.JSON的兩種格式(字符串):
（1）對象格式:{"屬性名":屬性值,"屬性名":屬性值,"屬性名":屬性值...}
屬性名:只能是字符串，必須要雙引號包裹
屬性值:可以是任意類型,可以是變量也是可以是一個具體的數據類型
舉例:
{
"usernmae":"Andy",
"price":190.00,
"sex":'男',
"date":date
}
（2）數組格式:
[
對象1,
對象2,
對象3,
]
這裏的對象可以的任意對象,比如說繼續存放一個數組格式的JSON或者對象的類型的JSON。
上面兩種格式是可以任意嵌套(完美兼容),數組嵌套對象，對象嵌套數組，數組嵌套數組，對象嵌套對象都是OK的。
（3）JSON的格式案例:
//使用對象格式創建一個json
var json1 = "{'username':'Andy','price':192.00,'sex':'男','date':'2020年03月19日14:05:20'}";
//黑魔法函數
var eval1 = eval("("+json1+")");
//--------------------------------------------------------
//使用數組格式創建一個json
var json2 = "[1,'hello',190,true]";
var eval2 = eval("("+json2+")");
//alert(eval2[3]);
//--------------------------------------------------------
//原生JS提供的一種對於JSON的簡便式寫法(這種並不是一個標準的JSON,但是在JS處理好之後，仍然會轉換成字符串進行操作)
var json3 = {
'username':'Andy',
'price':192.00,
'sex':'男',
'date':new Date()
};
//--------------------------------------------------------
var json4 = [
new Date().getDate(),
100,
true,
"Andy"
];
//--------------------------------------------------------
//對象格式嵌套數組格式
var json5 = {
"username":"張三",
"age":18,
"password":"123",
"hobby":["打籃球","學習","學JAVA"]
};
//--------------------------------------------------------
//數組格式嵌套對象格式
var json6 = [
json5,
{
"username":"李四",
"age":19,
"password":"123",
"hobby":["打籃球","學習","學JAVA"]
},
{
"username":"王五",
"age":20,
"password":"123",
"hobby":["打籃球","學習","學PHP"]
}
];
alert(json6[2].hobby[2]);
4.在以後的開發當中，這些JSON的數據肯定是來自於後端而不是前端,所以出現了問題了，這些JSON的格式，在前端是比較容易拼寫的但是在後端當中，我們Java工程師要拼接JSON的格式是非常難的。(不說太難,自己回想一下 我們學JDBC的時候 拼寫SQL...)
JAVA不是不可以拼寫JSON，只不過拼寫起來比較的複雜，因爲JAVA是一個強類型語言，對於每一個不同的數據都有嚴格的標識，一點都不能亂。
怎麼處理?
（1）自己一個個手動拼(不理智)
（2）自己手動一個工具類進行JSON拼接(沒必要)
（3）使用成熟的第三方工具類進行處理JSON
apache提供 jsonlib
阿里提供 fastjson
google gson
spring jackson
5.jackson是spring社區提供的一個用於將JAVA的任意數據轉換爲JSON的工具類:
（1）需要導包
jackson-annotations-2.2.1.jar
jackson-core-2.2.1.jar
jackson-databind-2.2.1.jar
（2）使用轉換方法，將任意數據進行轉換
String s = new ObjectMapper().writeValueAsString(數據);