Ajax+JSON

 

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

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

   提升用戶的體驗

 2. 實現方式：
   1. 原生的JS實現方式（了解）
      //1.創建核心對象
              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. 建立連接
              /*
                  參數：
                      1. 請求方式：GET、POST
                          * get方式，請求參數在URL后邊拼接。send方法為空參
                          * post方式，請求參數在send方法中定義
                      2. 請求的URL：
                      3. 同步或異步請求：true（異步）或 false（同步）
  
               */
              xmlhttp.open("GET","ajaxServlet?username=tom",true);
  
              //3.發送請求
              xmlhttp.send();
  
              //4.接受並處理來自服務器的響應結果
              //獲取方式 ：xmlhttp.responseText
              //什么時候獲取？當服務器響應成功后再獲取
  
              //當xmlhttp對象的就緒狀態改變時，觸發事件onreadystatechange。
              xmlhttp.onreadystatechange=function()
              {
                  //判斷readyState就緒狀態是否為4，判斷status響應狀態碼是否為200
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                  {
                     //獲取服務器的響應結果
                      var responseText = xmlhttp.responseText;
                      alert(responseText);
                  }
              }
  2. JQeury實現方式
   1. $.ajax()
    * 語法：$.ajax({鍵值對});
     //使用$.ajax()發送異步請求
              $.ajax({
                  url:"ajaxServlet1111" , // 請求路徑
                  type:"POST" , //請求方式
                  //data: "username=jack&age=23",//請求參數
                  data:{"username":"jack","age":23},
                  success:function (data) {
                      alert(data);
                  },//響應成功后的回調函數
                  error:function () {
                      alert("出錯啦...")
                  },//表示如果請求響應出現錯誤，會執行的回調函數
  
                  dataType:"text"//設置接受到的響應數據的格式
              });
   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.定義基本格式
           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對象中所有的鍵和值
           //for in 循環
          /* for(var key in person){
               //這樣的方式獲取不行。因為相當於  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數據和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");