1. 程式人生 > 其它 >AJAX&JSON

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:物件格式一致