Ajax和Json

標籤：res   orm   back   window   索引值   get   非同步   建立   之間   

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 ， 且響應狀態代碼為200if(xhr.readyState==4 && xhr.status==200){//讀取響應資訊，做相關操作。//如果資訊為純文字xhr.responseText//如果資訊為XMLxhr.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是Google出的一款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