AJAX&JSON
AJAX:
-
概念: ASynchronous JavaScript And XML 非同步的JavaScript 和 XML
-
非同步和同步:客戶端和伺服器端相互通訊的基礎上
- 客戶端必須等待伺服器端的響應。在等待的期間客戶端不能做其他操作。
- 客戶端不需要等待伺服器端的響應。在伺服器處理請求的過程中,客戶端可以進行其他的操作。
Ajax 是一種在無需重新載入整個網頁的情況下,能夠更新部分網頁的技術。 [1]
通過在後臺與伺服器進行少量資料交換,Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 Ajax)如果需要更新內容,必須過載整個網頁頁面。提升使用者的體驗
-
-
實現方式:
-
原生的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); } }
-
JQeury實現方式
-
$.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"//設定接受到的響應資料的格式
});
-
-
$.get():傳送get請求
- 語法:$.get(url, [data], [callback], [type])
- 引數:
- url:請求路徑
- data:請求引數
- callback:回撥函式
- type:響應結果的型別
- 引數:
- 語法:$.get(url, [data], [callback], [type])
-
$.post():傳送post請求
- 語法:$.post(url, [data], [callback], [type])
- 引數:
- url:請求路徑
- data:請求引數
- callback:回撥函式
- type:響應結果的型別
- 引數:
- 語法:$.post(url, [data], [callback], [type])
-
-
JSON:
-
概念: JavaScript Object Notation JavaScript物件表示法
Person p = new Person();
p.setName("張三");
p.setAge(23);
p.setGender("男");var p = {"name":"張三","age":23,"gender":"男"};
- json現在多用於儲存和交換文字資訊的語法
- 進行資料的傳輸
- JSON 比 XML 更小、更快,更易解析。
-
語法:
- 基本規則
- 資料在名稱/值對中:json資料是由鍵值對構成的
- 鍵用引號(單雙都行)引起來,也可以不使用引號
- 值得取值型別:
- 數字(整數或浮點數)
- 字串(在雙引號中)
- 邏輯值(true 或 false)
- 陣列(在方括號中) {"persons":[{},{}]}
- 物件(在花括號中) {"address":{"province":"陝西"....}}
- null
- 資料由逗號分隔:多個鍵值對由逗號分隔
- 花括號儲存物件:使用{}定義json 格式
- 方括號儲存陣列:[]
- 資料在名稱/值對中:json資料是由鍵值對構成的
- 獲取資料:
-
json物件.鍵名
-
json物件["鍵名"]
-
陣列物件[索引]
-
遍歷
//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]); } }
-
- 基本規則
-
JSON資料和Java物件的相互轉換
- JSON解析器:
- 常見的解析器:Jsonlib,Gson,fastjson,jackson
- JSON轉為Java物件
- 匯入jackson的相關jar包
- 建立Jackson核心物件 ObjectMapper
- 呼叫ObjectMapper的相關方法進行轉換
- readValue(json字串資料,Class)
- Java物件轉換JSON
- 使用步驟:
- 匯入jackson的相關jar包
- 建立Jackson核心物件 ObjectMapper
- 呼叫ObjectMapper的相關方法進行轉換
-
轉換方法:
- writeValue(引數1,obj):
引數1:
File:將obj物件轉換為JSON字串,並儲存到指定的檔案中
Writer:將obj物件轉換為JSON字串,並將json資料填充到字元輸出流中
OutputStream:將obj物件轉換為JSON字串,並將json資料填充到位元組輸出流中 - writeValueAsString(obj):將物件轉為json字串
- writeValue(引數1,obj):
-
註解:
- @JsonIgnore:排除屬性。
- @JsonFormat:屬性值得格式化
- @JsonFormat(pattern = "yyyy-MM-dd")
-
複雜java物件轉換
- List:陣列
- Map:物件格式一致
-
- 使用步驟:
- JSON解析器: