Ajax&Json筆記

## 今日內容
    1. AJAX：
    2. JSON





# AJAX：
    1. 概念： ASynchronous JavaScript And XML    異步的JavaScript 和 XML
        1. 異步和同步：客戶端和服務器端相互通訊的基礎上
            * 客戶端必須等待服務器端的響應。在等待的期間客戶端不能作其餘操做。
            * 客戶端不須要等待服務器端的響應。在服務器處理請求的過程當中，客戶端能夠進行其餘的操做。

            Ajax 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。 [1] 
            經過在後臺與服務器進行少許數據交換，Ajax 能夠使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
            傳統的網頁（不使用 Ajax）若是須要更新內容，必須重載整個網頁頁面。

            提高用戶的體驗

    2. 實現方式：
        1. 原生的JS實現方式（瞭解）
                    

 1 //1.建立核心對象
 2                     var xmlhttp;
 3                     if (window.XMLHttpRequest)
 4                     {// code for IE7+, Firefox, Chrome, Opera, Safari
 5                         xmlhttp=new XMLHttpRequest();
 6                     }
 7                     else
 8                     {// code for IE6, IE5
 9                         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
10                     }
11         
12                     //2. 創建鏈接
13                     /*
14                         參數：
15                             1. 請求方式：GET、POST
16                                 * get方式，請求參數在URL後邊拼接。send方法爲空參
17                                 * post方式，請求參數在send方法中定義
18                             2. 請求的URL：
19                             3. 同步或異步請求：true（異步）或 false（同步）
20         
21                      */
22                     xmlhttp.open("GET","ajaxServlet?username=tom",true);
23         
24                     //3.發送請求
25                     xmlhttp.send();
26         
27                     //4.接受並處理來自服務器的響應結果
28                     //獲取方式 ：xmlhttp.responseText
29                     //何時獲取？當服務器響應成功後再獲取
30         
31                     //當xmlhttp對象的就緒狀態改變時，觸發事件onreadystatechange。
32                     xmlhttp.onreadystatechange=function()
33                     {
34                         //判斷readyState就緒狀態是否爲4，判斷status響應狀態碼是否爲200
35                         if (xmlhttp.readyState==4 && xmlhttp.status==200)
36                         {
37                            //獲取服務器的響應結果
38                             var responseText = xmlhttp.responseText;
39                             alert(responseText);
40                         }
41                     }

 

 

        2. JQeury實現方式
            1. $.ajax()
                * 語法：$.ajax({鍵值對});
               

 1  //使用$.ajax()發送異步請求
 2                     $.ajax({
 3                         url:"ajaxServlet1111" , // 請求路徑
 4                         type:"POST" , //請求方式
 5                         //data: "username=jack&age=23",//請求參數
 6                         data:{"username":"jack","age":23},
 7                         success:function (data) {
 8                             alert(data);
 9                         },//響應成功後的回調函數
10                         error:function () {
11                             alert("出錯啦...")
12                         },//表示若是請求響應出現錯誤，會執行的回調函數
13         
14                         dataType:"text"//設置接受到的響應數據的格式
15                     });

 

 

            2. $.get()：發送get請求
                * 語法：$.get(url, [data], [callback], [type])
                    * 參數：
                        * url：請求路徑
                        * data：請求參數
                        * callback：回調函數
                        * type：響應結果的類型

            3. $.post()：發送post請求
                * 語法：$.post(url, [data], [callback], [type])
                    * 參數：
                        * url：請求路徑
                        * data：請求參數
                        * callback：回調函數
                        * type：響應結果的類型



# JSON：
    1. 概念： JavaScript Object Notation        JavaScript對象表示法
        Person p = new Person();
        p.setName("張三");
        p.setAge(23);
        p.setGender("男");

        var p = {"name":"張三","age":23,"gender":"男"};

        * json如今多用於存儲和交換文本信息的語法
        * 進行數據的傳輸
        * JSON 比 XML 更小、更快，更易解析。
    
    2. 語法：
        1. 基本規則
            * 數據在名稱/值對中：json數據是由鍵值對構成的
                * 鍵用引號(單雙都行)引發來，也能夠不使用引號
                * 值得取值類型：
                    1. 數字（整數或浮點數）
                    2. 字符串（在雙引號中）
                    3. 邏輯值（true 或 false）
                    4. 數組（在方括號中）    {"persons":[{},{}]}
                    5. 對象（在花括號中） {"address":{"province"："陝西"....}}
                    6. null
            * 數據由逗號分隔：多個鍵值對由逗號分隔
            * 花括號保存對象：使用{}定義json 格式
            * 方括號保存數組：[]
        2. 獲取數據:
            1. json對象.鍵名
            2. json對象["鍵名"]
            3. 數組對象[索引]
            4. 遍歷
                   

 1  //1.定義基本格式
 2                     var person = {"name": "張三", age: 23, 'gender': true};
 3             
 4                     var ps = [{"name": "張三", "age": 23, "gender": true},
 5                         {"name": "李四", "age": 24, "gender": true},
 6                         {"name": "王五", "age": 25, "gender": false}];
 7             
 8             
 9             
10             
11                     //獲取person對象中全部的鍵和值
12                     //for in 循環
13                    /* for(var key in person){
14                         //這樣的方式獲取不行。由於至關於  person."name"
15                         //alert(key + ":" + person.key);
16                         alert(key+":"+person[key]);
17                     }*/
18             
19                    //獲取ps中的全部值
20                     for (var i = 0; i < ps.length; i++) {
21                         var p = ps[i];
22                         for(var key in p){
23                             alert(key+":"+p[key]);
24                         }
25                     }

 

 

    

    3. JSON數據和Java對象的相互轉換

        * JSON解析器：
            * 常見的解析器：Jsonlib，Gson，fastjson，jackson
        
        1. JSON轉爲Java對象
            1. 導入jackson的相關jar包
            2. 建立Jackson核心對象 ObjectMapper
            3. 調用ObjectMapper的相關方法進行轉換
                1. readValue(json字符串數據,Class)
        2. Java對象轉換JSON
            1. 使用步驟：
                1. 導入jackson的相關jar包
                2. 建立Jackson核心對象 ObjectMapper
                3. 調用ObjectMapper的相關方法進行轉換
                    1. 轉換方法：
                        * writeValue(參數1，obj):
                            參數1：
                                File：將obj對象轉換爲JSON字符串，並保存到指定的文件中
                                Writer：將obj對象轉換爲JSON字符串，並將json數據填充到字符輸出流中
                                OutputStream：將obj對象轉換爲JSON字符串，並將json數據填充到字節輸出流中
                        * writeValueAsString(obj):將對象轉爲json字符串

                    2. 註解：
                        1. @JsonIgnore：排除屬性。
                        2. @JsonFormat：屬性值得格式化
                            * @JsonFormat(pattern = "yyyy-MM-dd")

                    3. 複雜java對象轉換
                        1. List：數組
                        2. Map：對象格式一致


# 案例：
    * 校驗用戶名是否存在
        1. 服務器響應的數據，在客戶端使用時，要想當作json數據格式使用。有兩種解決方案：
            1. $.get(type):將最後一個參數type指定爲"json"
            2. 在服務器端設置MIME類型
                response.setContentType("application/json;charset=utf-8");