Ajax和Json
1.AJAX
[1] AJAX簡介
> 全稱： Asynchronous JavaScript And XML
> 異步的JavaScript和XML
> Ajax作用：是用JavaScript向服務器發送異步請求，然後服務器給出響應，然後我們在通過DOM來修改頁面，然後以XML格式的文件返回給瀏覽器端。
> XML指的是服務器響應的數據的格式。
> 目前AJAX已經很少使用XML作為響應的格式。因為XML的解析性能及傳輸性能較差。
[2] 同步和異步
> 同步：
當我們通過瀏覽器向服務器發送一個請求時，瀏覽器會刷新整個頁面。
> 異步：
當我們向服務器發送請求時，不是刷新整個網頁，而是只刷新網頁的一部分。
[3] XMLHttpRequest對象
> 我們AJAX的所有操作都是圍繞著XMLHttpRequest對象進行。
> 在XMLHttpRequest對象中封裝發送給服務器請求報文，同時在服務器發回響應時，響應信息也會在對象中封裝。
> 如何獲取XMLHttpRequest對象
- var xhr = new XMLHttpRequest();
[4] 使用步驟
1.創建XMLHttpRequest對象
大部分比較新的瀏覽器都支持的方式（IE7以上）
var xhr = new XMLHttpRequest();
IE6以下的
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以下的
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
通用的獲取XMLHttpRequest對象的方法：
//寫一個獲取XHR的方法
function getXMLHttpRequest(){
try{
//大部分瀏覽器都支持的方式
return new XMLHttpRequest();
}catch(e){
try{
//IE6以下瀏覽器支持的方式
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5以下的瀏覽器
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你是火星來的吧！你的瀏覽器不支持AJAX！");
}
}
}
}
2.設置請求信息（請求地址，請求方式，請求參數）
xhr.open(請求方式,請求地址);
在發送post請求時，還需要設置一個請求頭，如下：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3.發送請求
xhr.send(請求體);
get請求沒有請求體，所以send中可以傳null或什麽都不傳。
post請求需要通過send來設置請求參數。
4.接收響應信息
//xhr綁定一個onreadystatechange響應函數，這個函數會在readyState屬性發生改變時調用
xhr.onreadystatechange = function(){
//判斷當前readyState是否為4 ， 且響應狀態碼為200
if(xhr.readyState==4 && xhr.status==200){
//讀取響應信息，做相關操作。
//如果信息為純文本
xhr.responseText
//如果信息為XML
xhr.responseXML
}
};
[5] 響應數據的格式
- 響應一個XML
- 當我們想通過servlet給ajax返回一個比較大量的信息，返回一個對象。
- 返回 User ：username：sunwukong age：18 gender：男
username:sunwukgon,age:18,gender:男
- 我們可以通過一個XML格式來返回一個大量的信息
<user>
<name></name>
<age></age>
<gender></gender>
</user>
- 響應一個JSON對象
[6] 案例
（1）案例Get請求：
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn01");
btn.onclick=function(){
//1.創建XMLHttpRequest對象，我們使用這個對象完成Ajax請求！
var xhr = new XMLHttpRequest();
//2.通過open方法設置請求參數
var method= "get";
var url = "${pageContext.request.contextPath}/AServlet";
xhr.open(method, url);
//3.發送請求！
xhr.send();
//4.接收響應信息
xhr.onreadystatechange= function(){
if(xhr.readyState == 4 && xhr.status == 200 ){
var data = xhr.responseText;
alert(data);
}
}
}
}
</script>
（2）案例POST請求：
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn01");
btn.onclick=function(){
//1.創建XMLHttpRequest對象，我們使用這個對象完成Ajax請求！
var xhr = new XMLHttpRequest();
//2.通過open方法設置請求參數
var method= "post";
var url = "${pageContext.request.contextPath}/AServlet";
xhr.open(method, url);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.發送請求！
xhr.send("username=zhangsan&password=lisi");
//4.接收響應信息
xhr.onreadystatechange= function(){
if(xhr.readyState == 4 && xhr.status == 200 ){
var data = xhr.responseText;
alert(data);
}
}
}
}
</script>
2.JSON
[1] JSON簡介
> JSON全稱 JavaScript Object Notation（JavaScript對象表示法）
> 類似於JS中對象的創建的方法
> JSON和XML一樣，都是一種表示數據的格式
> 但是JSON比XML的存儲和解析性能要高的多，JSON要比XML高個30%左右，JSON 比 XML 更小、更快，更易解析。
<user>
<name>sunwukong</name>
<age>18</age>
<gender>男</gender>
</user>
{"name":"孫悟空","age":8,"gender":男}
[2] JSON的格式
> JSON字符串不方便閱讀，但是傳輸性能好
> XML方便閱讀，但是傳輸性能差
> JSON的格式和JS對象類型，但是要求屬性名必須使用雙引號。不能使用單引號，也不能不寫引號！
> JSON對象中實際就是一組一組的鍵值對的結構，
鍵和值使用:連接，多個鍵值對之間使用,分開，註意如果是最後一組鍵值對，則千萬不要再加.
> {
"屬性名1":屬性值1,
"屬性名2":屬性值2,
"屬性名3":屬性值3,
"屬性名4":屬性值4
}
> JSON運行屬性值的類型：
1.字符串
2.數字
3.布爾
4.對象
5.數組
6.null
> 數組：
[屬性1,屬性2,屬性3,屬性4]
[3] JS中使用JSON
JSON對象 --> JSON字符串
JSON.stringify(對象)
JSON字符串 --> JSON對象
JSON.parse(JSON字符串)
[4] Java中使用JSON
> 目前Java中用的比較多的JSON解析工具：
json-lib --> 使用麻煩，解析性能最差
Jackson --> 使用較麻煩，解析性能最好
Gson --> 使用簡單，解析性能中能
- Gson是谷歌出的一款JSON解析工具，使用簡單，且性能較好。
Java對象 --> JSON字符串
JSON字符串 --> Java對象
3.通過jQuery實現AJAX
> 使用get和getJSON都會有緩存問題，並且使用get方法不能傳送較多的數據。
> post方法不會有緩存的問題，所以我們開發時使用post方法較多。
[1] post()方法
$.post(url, [data], [callback], [type])
參數：
url：發送AJAX的請求地址，字符串。
data：發送給服務器的請求參數，JSON格式。
callback：當前需要獲取服務器發送的響應時，我們可以通過該回調函數。
jQuery會將響應信息以回調函數的參數的形式返回
type：響應信息的類型，字符串。一般兩個常用值text、json
[2] get()方法
- get方法和post方法使用方式基本一致。
[3] getJSON()方法
getJSON(url, [data], [callback])
getJSON方法和get方法類似，只不過該方法默認的響應類型為JSON，不需要再手動指定。
4.GSON工具類的使用：
//1將普通對象轉換為JSON字符串！
Student stu = new Student("張三",12);
Gson gson = new Gson();
String json = gson.toJson(stu);
System.out.println(json);
Student fromJson = gson.fromJson(json, Student.class);
System.out.println(fromJson);
//2.把Map轉換成JSON字符串
Map<String,String> map = new HashMap();
map.put("hobby","籃球");
map.put("gender", "男");
String json2 = gson.toJson(map);
System.out.println(json2);
Map<String,String> fromJson = gson.fromJson(json2, Map.class);
System.out.println(fromJson);
//3.將List轉換為JSON字符串
List<Student> list = new ArrayList<Student>();
list.add(new Student("劉德華", 53));
list.add(new Student("馮小剛",63));
String json3 = gson.toJson(list);
System.out.println(json3);
List<Map<String,Object>> fromJson = gson.fromJson(json3, List.class);
for(Map map:fromJson){
System.out.println(map.get("name"));
}
Ajax和Json