一、AJAX
-
概念：異步的JavaScript和XMl
-
① 異步和同步：建立在客戶端和服務器通信的基礎
- 同步：客戶端必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。
異步：客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。
異步與同步.png -
- ② 特點：
- Ajax 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術。 [1]
- 通過在后臺與服務器進行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
- 傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內容，必須重載整個網(wǎng)頁頁面。
-
實現(xiàn)方式：
-
① 原生的JS實現(xiàn)方式：
//1.創(chuàng)建核心對象 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. 建立連接 /* 參數(shù)： 1. 請求方式：GET、POST * get方式，請求參數(shù)在URL后邊拼接。send方法為空參 * post方式，請求參數(shù)在send方法中定義 2. 請求的URL： 3. 同步或異步請求：true（異步）或 false（同步） */ xmlhttp.open("GET","ajaxServlet?username=tom",true); //3.發(fā)送請求 xmlhttp.send(); //4.接受并處理來自服務器的響應結果 //獲取方式 ：xmlhttp.responseText //什么時候獲??？當服務器響應成功后再獲取 //當xmlhttp對象的就緒狀態(tài)改變時，觸發(fā)事件onreadystatechange。 xmlhttp.onreadystatechange=function() { //判斷readyState就緒狀態(tài)是否為4，判斷status響應狀態(tài)碼是否為200 if (xmlhttp.readyState==4 && xmlhttp.status==200){ //獲取服務器的響應結果 var responseText = xmlhttp.responseText; alert(responseText); } }
-
-
② JQuery實現(xiàn)方式：
-
$.ajax();
語法：$.ajax({鍵值對});//使用$.ajax()發(fā)送異步請求 $.ajax({ url:"ajaxServlet1111" , // 請求路徑 type:"POST" , //請求方式 //data: "username=jack&age=23",//請求參數(shù) data:{"username":"jack","age":23}, success:function (data) { alert(data); },//響應成功后的回調函數(shù) error:function () { alert("出錯啦...") },//表示如果請求響應出現(xiàn)錯誤，會執(zhí)行的回調函數(shù) dataType:"text"http://設置接受到的響應數(shù)據(jù)的格式 }); -
$.get()
語法：$.get(url, [data], [callback], [type]) * 參數(shù)： * url：請求路徑 * data：請求參數(shù) * callback：回調函數(shù) * type：響應結果的類型 $.post()
語法：$.post(url, [data], [callback], [type]) * 參數(shù)： * url：請求路徑 * data：請求參數(shù) * callback：回調函數(shù) * type：響應結果的類型
-
二、JSON
-
JavaScript Object Notation JavaScript對象表示法
-
① 概念：
- json現(xiàn)在多用于存儲和交換文本信息的語法
- 進行數(shù)據(jù)的傳輸
- JSON 比 XML 更小、更快，更易解析。
-
② java中：
Person p = new Person(); p.setName("張三"); p.setAge(23); p.setGender("男"); ③ JSON中
var p = {"name":"張三","age":23,"gender":"男"};
-
-
語法：
-
① 基本規(guī)則
-
數(shù)據(jù)在名稱/值對中：json數(shù)據(jù)是由鍵值對構成的
鍵用引號(單雙引)引起來，也可以不使用引號
-
值的取值類型
1. 數(shù)字（整數(shù)或浮點數(shù)） 2. 字符串（在雙引號中） 3. 邏輯值（true 或 false） 4. 數(shù)組（在方括號中） {"persons":[{},{}]} 5. 對象（在花括號中） {"address":{"province"："陜西"....}} 6. null
數(shù)據(jù)是由逗號分隔
花括號保存對象
方括號保存數(shù)組
-
-
-
② 獲取數(shù)據(jù)
json對象.鍵名
json[“鍵名”]
數(shù)組對象[索引]
-
遍歷數(shù)據(jù)：
////獲取person對象中所有的鍵和值 var person = {"name": "張三", age: 23, 'gender': true}; //for in 循環(huán) for(var key in person){ //這樣的方式獲取不行。因為相當于 person."name" //alert(key + ":" + person.key); alert(key+":"+person[key]); }//遍歷數(shù)組對象 var ps = [ {"name": "張三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false} ]; //獲取ps中的所有值 for (var i = 0; i < ps.length; i++) { var p = ps[i]; for(var key in p){ alert(key+":"+p[key]); } }
-
JSON數(shù)據(jù)和JAVA對象相互轉換
- ① JSON解析器：
常見解析器：Jsonlib,Gjson,fastjson,jackson
-
② JSON轉為JAVA對象
導入jackon相關jar包
創(chuàng)建jackson核心對象 ObjectMapper
-
使用ObjectMapper的相關方法進行轉換
//第一個參數(shù)：json字符串 //第二個參數(shù)：要轉換為的java對象 objectMapper.readValues(json,class);
-
③ JAVA對象轉為JSON
導入jackon相關jar包
-
創(chuàng)建jackson核心對象 ObjectMapper
//創(chuàng)建json 核心解析對象 ObjectMapper objectMapper = new ObjectMapper();
-
使用ObjectMapper的相關方法進行轉換
-
writeValueAsString方法：
//writeValueAsString(obj):將對象轉為json字符串 String string = objectMapper.writeValueAsString(person);
-
writeValue方法
//writeValue(參數(shù)1，obj): //參數(shù)1： //File：將obj對象轉換為JSON字符串，并保存到指定的文件中 objectMapper.writeValue(new File("/a.txt") ,person); //Writer：將obj對象轉換為JSON字符串，并將json數(shù)據(jù)填充到字符輸出流中 //OutputStream：將obj對象轉換為JSON字符串，并將json數(shù)據(jù)填充到字節(jié)輸出流中
-
-
細節(jié)：
① 注解---->針對Date
1. @JsonIgnore：排除屬性。 2. @JsonFormat：屬性值得格式化 @JsonFormat(pattern = "yyyy-MM-dd") private Date date;-
② 復雜的java對象轉換
List集合：轉換為數(shù)組 Map集合：對象格式一致 ③ 服務器響應的數(shù)據(jù)，在客戶端使用時，要想當做json數(shù)據(jù)格式使用。有兩種解決方案：
1. $.get(type):將最后一個參數(shù)type指定為"json" 2. 在服務器端設置MIME類型 response.setContentType("application/json;charset=utf-8");
