今日內(nèi)容
1. AJAX：
2. JSON
AJAX：
1. 概念： ASynchronous JavaScript And XML 異步的JavaScript 和 XML
1. 異步和同步：客戶端和服務(wù)器端相互通信的基礎(chǔ)上
* 客戶端必須等待服務(wù)器端的響應(yīng)。在等待的期間客戶端不能做其他操作不跟。
* 客戶端不需要等待服務(wù)器端的響應(yīng)形导。在服務(wù)器處理請(qǐng)求的過(guò)程中败京，客戶端可以進(jìn)行其他的操作。
Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下哎甲，能夠更新部分網(wǎng)頁(yè)的技術(shù)孝冒。 [1]
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換洋幻，Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新碳却。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下队秩，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容昼浦，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面馍资。
提升用戶的體驗(yàn)
2. 實(shí)現(xiàn)方式：
1. 原生的JS實(shí)現(xiàn)方式（了解）
//1.創(chuàng)建核心對(duì)象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立連接
/*
參數(shù)：
1. 請(qǐng)求方式：GET、POST
* get方式关噪，請(qǐng)求參數(shù)在URL后邊拼接鸟蟹。send方法為空參
* post方式，請(qǐng)求參數(shù)在send方法中定義
2. 請(qǐng)求的URL：
3. 同步或異步請(qǐng)求：true（異步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.發(fā)送請(qǐng)求
xmlhttp.send();
//4.接受并處理來(lái)自服務(wù)器的響應(yīng)結(jié)果
//獲取方式 ：xmlhttp.responseText
//什么時(shí)候獲仁雇谩建钥？當(dāng)服務(wù)器響應(yīng)成功后再獲取
//當(dāng)xmlhttp對(duì)象的就緒狀態(tài)改變時(shí)，觸發(fā)事件onreadystatechange虐沥。
xmlhttp.onreadystatechange=function()
{
//判斷readyState就緒狀態(tài)是否為4熊经，判斷status響應(yīng)狀態(tài)碼是否為200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//獲取服務(wù)器的響應(yīng)結(jié)果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
2. JQeury實(shí)現(xiàn)方式
1. $.ajax()
* 語(yǔ)法：$.ajax({鍵值對(duì)});
//使用$.ajax()發(fā)送異步請(qǐng)求
$.ajax({
url:"ajaxServlet1111" , // 請(qǐng)求路徑
type:"POST" , //請(qǐng)求方式
//data: "username=jack&age=23",//請(qǐng)求參數(shù)
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//響應(yīng)成功后的回調(diào)函數(shù)
error:function () {
alert("出錯(cuò)啦...")
},//表示如果請(qǐng)求響應(yīng)出現(xiàn)錯(cuò)誤，會(huì)執(zhí)行的回調(diào)函數(shù)
dataType:"text"http://設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式
});
2. $.get()：發(fā)送get請(qǐng)求
* 語(yǔ)法：$.get(url, [data], [callback], [type])
* 參數(shù)：
* url：請(qǐng)求路徑
* data：請(qǐng)求參數(shù)
* callback：回調(diào)函數(shù)
* type：響應(yīng)結(jié)果的類(lèi)型
3. $.post()：發(fā)送post請(qǐng)求
* 語(yǔ)法：$.post(url, [data], [callback], [type])
* 參數(shù)：
* url：請(qǐng)求路徑
* data：請(qǐng)求參數(shù)
* callback：回調(diào)函數(shù)
* type：響應(yīng)結(jié)果的類(lèi)型
JSON：
1. 概念： JavaScript Object Notation JavaScript對(duì)象表示法
Person p = new Person();
p.setName("張三");
p.setAge(23);
p.setGender("男");
var p = {"name":"張三","age":23,"gender":"男"};
* json現(xiàn)在多用于存儲(chǔ)和交換文本信息的語(yǔ)法
* 進(jìn)行數(shù)據(jù)的傳輸
* JSON 比 XML 更小欲险、更快镐依，更易解析。
2. 語(yǔ)法：
1. 基本規(guī)則
* 數(shù)據(jù)在名稱(chēng)/值對(duì)中：json數(shù)據(jù)是由鍵值對(duì)構(gòu)成的
* 鍵用引號(hào)(單雙都行)引起來(lái)盯荤，也可以不使用引號(hào)
* 值得取值類(lèi)型：
1. 數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
2. 字符串（在雙引號(hào)中）
3. 邏輯值（true 或 false）
4. 數(shù)組（在方括號(hào)中） {"persons":[{},{}]}
5. 對(duì)象（在花括號(hào)中） {"address":{"province"："陜西"....}}
6. null
* 數(shù)據(jù)由逗號(hào)分隔：多個(gè)鍵值對(duì)由逗號(hào)分隔
* 花括號(hào)保存對(duì)象：使用{}定義json 格式
* 方括號(hào)保存數(shù)組：[]
2. 獲取數(shù)據(jù):
1. json對(duì)象.鍵名
2. json對(duì)象["鍵名"]
3. 數(shù)組對(duì)象[索引]
4. 遍歷
//1.定義基本格式
var person = {"name": "張三", age: 23, 'gender': true};
var ps = [{"name": "張三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
//獲取person對(duì)象中所有的鍵和值
//for in 循環(huán)
/* for(var key in person){
//這樣的方式獲取不行馋吗。因?yàn)橄喈?dāng)于 person."name"
//alert(key + ":" + person.key);
alert(key+":"+person[key]);
}*/
//獲取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
3. JSON數(shù)據(jù)和Java對(duì)象的相互轉(zhuǎn)換
* JSON解析器：
* 常見(jiàn)的解析器：Jsonlib，Gson秋秤，fastjson宏粤，jackson
1. JSON轉(zhuǎn)為Java對(duì)象
1. 導(dǎo)入jackson的相關(guān)jar包
2. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper
3. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換
1. readValue(json字符串?dāng)?shù)據(jù),Class)
2. Java對(duì)象轉(zhuǎn)換JSON
1. 使用步驟：
1. 導(dǎo)入jackson的相關(guān)jar包
2. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper
3. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換
1. 轉(zhuǎn)換方法：
* writeValue(參數(shù)1，obj):
參數(shù)1：
File：將obj對(duì)象轉(zhuǎn)換為JSON字符串灼卢，并保存到指定的文件中
Writer：將obj對(duì)象轉(zhuǎn)換為JSON字符串绍哎，并將json數(shù)據(jù)填充到字符輸出流中
OutputStream：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并將json數(shù)據(jù)填充到字節(jié)輸出流中
* writeValueAsString(obj):將對(duì)象轉(zhuǎn)為json字符串
2. 注解：
1. @JsonIgnore：排除屬性鞋真。
2. @JsonFormat：屬性值得格式化
* @JsonFormat(pattern = "yyyy-MM-dd")
3. 復(fù)雜java對(duì)象轉(zhuǎn)換
1. List：數(shù)組
2. Map：對(duì)象格式一致
案例：
* 校驗(yàn)用戶名是否存在
1. 服務(wù)器響應(yīng)的數(shù)據(jù)崇堰，在客戶端使用時(shí)，要想當(dāng)做json數(shù)據(jù)格式使用涩咖。有兩種解決方案：
1. $.get(type):將最后一個(gè)參數(shù)type指定為"json"
2. 在服務(wù)器端設(shè)置MIME類(lèi)型
response.setContentType("application/json;charset=utf-8");
