AJAX

原理

概念：ASynchronous JavaScript And XML，非同步的JavaScirpt和XML

• 同步：客服端傳送請求後，必須等待伺服器的響應，再做其他事情；

• 非同步：客服端傳送請求後，不用等待伺服器的響應，可以去做別的事情。

AJAX

• 不是新的程式語言，而是一種使用現有標準的新方法。

• 不用重新載入整個html頁面，就可以與伺服器交換資料，並更新部分網頁的技術。

原理/流程：

• 編寫ajax程式碼（js程式碼：建立XMLHttpRequest物件；傳送XHR；處理接受響應資料）
• 瀏覽器傳送請求（轉給上面的js程式碼），伺服器處理並響應（js接收響應）
• 使用js處理被返回的資料，更新部分網頁。

實現方式：

1. 原生js方式（不推薦，需要的時候自己百度吧）
2. jquery方式（推薦，有三種）
   • $.ajax()
   • $.get()
   • $.post()

程式碼實現1

$.ajax()實現

html程式碼

<input type="button" id="btn" value="hahasfasdf" onclick="fun();">

<script>
    function fun() {
        // 傳送非同步請求
        $.ajax({
            url: "ajaxServlet", // 請求路徑
            type: "POST", // 請求方式，預設GET
            data: {"username":"jack", "age":23},
            success: function (data) { // 響應成功後的回撥函式
                alert(data);
            },
            error: function () {
                alert("出錯啦")
            },
            dataType: "text", // 設定響應資料格式，建議用json
        });
    }
</script>
 

ajaxServlet程式碼

String username = req.getParameter("username");
System.out.println(username);
resp.getWriter().write("hello: " + username);

程式碼實現2

$.get和$.post引數形式一樣

$.get("ajaxServlet", {username: "tom"}, function(data){alert(data);}, "text");

JSON

json語法

概念：JavaScript Object Notation，JavaScript物件表示法，是一門語法。

用處：json多用於儲存和交換文字資訊，比xml更小，更快，更易解析。

語法規則：

• json由鍵值對構成，鍵用引號引起來（單雙都可以），也可以不用；

• json值的型別：數字，字串，布林值，陣列，物件（花括號巢狀）

  <script>
      var person = {"name":"張三","age":18,"gender":true}
      var persons = [{"name":"aaa","age":18}, {"name":"bbb","age":20}]
      var arr = {"arr":[11,22,33,44,55]}
      alert(person.name);
      alert(person["name"]);
      alert(persons[0].name);
      alert(arr.arr[2]);
      // 遍歷
      for (var key in person){
          alert(key + ": " + person[key]);
      }
      // js原生形式
      for (var i=0; i<persons.length;  i++){
      	var person = persons[i];
      	alert(person);
      }
  </script>
  

json解析器

json解析器，封裝的工具類，常見的有：

• jsonlib：官方提供
• Gson：谷歌提供
• fastjson：阿里巴巴提供
• jackson：springMVC框架內建

java物件轉json

1. 匯入jackson的jar包
2. 建立Jackson核心物件ObjectMapper
3. 呼叫ObjectMapper的方法進行轉換

Person person = new Person("張三", 23, "男");
ObjectMapper mapper = new ObjectMapper();
// 將java物件轉成json，並存儲
mapper.writeValue(new File("f://a.txt"), person);
String json = mapper.writeValueAsString(person);
System.out.println(json);

其他：

1. 註解

   • @JsonIgnore 排除屬性（在java類定義的地方、需要排除屬性的上面）

   • @JsonFormat(pattern="") 屬性格式化，

     例如日期格式@JsonFormat(pattern="yyyy-MM-dd")

2. 複雜格式：可以轉List<Object> ,Map<String, String>，程式碼和上面一樣

json轉java物件

用的比較少，瞭解即可。程式碼和上面一樣，但是用到的方法是：

• readValue(json資料,Class)