JSON&AJAX
JSON
-
定義：JSON（JavaScript Object Notation, JS 對象簡譜）是一種輕量級的數據交換格式。它基於 ECMAScript（歐洲電腦協會制定的 JS 規範）的一個子集，採用完全獨立於程式語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率。
-
語法：
-
基本規則
- 數據在名稱/值對中：json數據是由鍵值對構成的
- 鍵用引號(單雙都行)引起來，也可以不使用引號
- 值得取值類型：
- 數字（整數或浮點數 number）
- 字元串（在雙引號中 string）
- 邏輯值（true 或 false）
- 數組（在方括弧中） {“persons”:[{},{}]}
- 對象（在花括弧中） {“address”:{“province”：”陝西”….}}
- null
- 數據由逗號分隔：多個鍵值對由逗號分隔
- 花括弧保存對象：使用{}定義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對象和JS對象的轉化
-
JSON 字元串轉 JS 對象
var js對象 = JSON.parse(json對象);
-
JS 對象轉 JSON 字元串
var json對象 = JSON.stringify(js對象);
// 寫 JSON，這個格式的字元串裡面存一個員工數據 id 1 name zs age 18 var json1 = '{"id":1,"name":"zs","age":18}'; // JSON // 寫 JSON，這個格式的字元串裡面存兩個個員工數據 var json2 = '[{"id":1,"name":"zs","age":18}, {"id":2,"name":"ls","age":19}]'; // 寫 JSON，這個格式的字元串裡面存一個員工數據 var json3 = '{"id":1, "name":"zs", "age":18, "dept":{"id":5,"name":"開發部"}}'; var jsObj1 = {"id":1, "name":"zs", "age":18}; // JS 對象 var jsObj2 = {id:1, name:"zs", age:18}; // JS 對象 console.log(json1.name); // undefined console.log(jsObj1.name); // zs console.log(jsObj2.name); // zs // JSON 字元串轉 JS 對象 console.log(JSON.parse(json1).age); console.log(JSON.parse(json2)); console.log(JSON.parse(json3).dept.name); // JS 對象轉 JSON 字元串 console.log(JSON.stringify(jsObj2)); var json4 = "{'id':1,'name':'zs','age':18}"; // 錯誤格式的 JSON console.log(JSON.parse(json4)); // 報錯 -
-
JSON與JAVA對象的轉換
開發中一般都會使用第三方的一些 JSON 操作的依賴或者 JAR 包來來完成 Java 對象與 JSON 字元串之間的轉換。在 Java 中，轉換 JSON 的依賴或者 JAR 有很多，這裡單講兩種常用：
- Jackson：在 Spring MVC 中內置支援她，速度也挺快，穩定性比較好。
- Fastjson：阿里出品，號稱是 Java 領域中轉換 JSON 最快的一個插件，中文文檔比較齊全。
-
Jackson
1.0. 使用步驟
-
導入jackson的相關jar包,或者依賴
-
創建Jackson核心對象 ObjectMapper
-
調用ObjectMapper的相關方法進行轉換
-
轉換方法：
-
writeValue(參數1，obj):將java對象轉為json字元串,並將字元串返回到：以下幾個參數的各個功能。
參數1：
File：將obj對象轉換為JSON字元串，並保存到指定的文件中 Writer：將obj對象轉換為JSON字元串，並將json數據填充到字元輸出流中
OutputStream：將obj對象轉換為JSON字元串，並將json數據填充到位元組輸出流中
-
writeValueAsString(obj):將java對象轉為json字元串,並返回一個字元串
-
readValue(String content, Class
valueType):將json字元串轉換為Java對象
-
-
1.1. 引入依賴
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.6</version> </dependency>1.2 API使用
public class Department { private Long id; private String name; private String sn; getXxx()方法/setXxxx()方法 }public class JsonTest { @Test public void testJackson() throws IOException { Department department = new Department(); department.setId(1L); department.setName("小豬"); department.setSn("sn111"); ObjectMapper mapper = new ObjectMapper(); //序列化：將java對象轉化為Json格式的字元串 String str = mapper.writeValueAsString(department); //{"id":1,"name":"小豬","sn":"sn111"} System.out.println(str); //將Json對象寫入java對象中 String str1 = "{\"id\":1,\"name\":\"啦\",\"sn\":\"sn111\"}"; Department dept = mapper.readValue(str1, Department.class); System.out.println(dept.getName());//啦 } } -
-
Fastjson
2.0 使用步驟：
-
導入fastjson的相關jar包,或者依賴
-
使用JSON類的靜態方法
-
public static String toJSONString(Object object)：將java對象轉換為 json字元串；
-
public static
T parseObject(String text, Class clazz)：將json字 符串轉換為Java對象；
-
2.1 引入依賴
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.47</version> </dependency>2.2 AOP使用
public class JsonTest { @Test public void testFastJson(){ Department department = new Department(); department.setId(1L); department.setName("小豬"); department.setSn("sn111"); //序列化：將java對象轉化為Json格式的字元串 String str = JSON.toJSONString(department); System.out.println(str); String str2 = {\"id\":1,\"name\":\"ajax\",\"sn\":\"sn111\"}"; Department dept = JSON.parseObject(str2, Department.class); //將Json對象寫入java對象中 System.out.println(dept.getName());//ajax } } -
AJAX
1.概念
ASynchronous JavaScript And XML 非同步的JavaScript 和 XML
AJax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。 通過在後台與伺服器進行少量數據交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新,提升用戶的體驗。傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。
2.非同步和同步
非同步和同步：客戶端和伺服器端相互通訊的基礎上
- 同步：客戶端必須等待伺服器端的響應。在等待的期間客戶端不能做其他操作。
- 非同步：客戶端不需要等待伺服器端的響應。在伺服器處理請求的過程中，客戶端可以進行其他的操作。
3. AJAX缺陷
- AJAX 大量使用了 Javascript 和 AJAX 引擎，而這個取決於瀏覽器的支援。IE5.0 及以上、
Mozilla1.0、NetScape7 及以上版本才支援，Mozilla 雖然也支援 AJAX ，但是提供XMLHttpRequest 的方式不一樣。所以，使用 AJAX 的程式必須測試針對各個瀏覽器的兼容性。 - AJAX 更新頁面內容的時候並沒有刷新整個頁面，因此，網頁的後退功能是失效的；有的用戶還經
常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶「數據已更新」。 - 對流媒體的支援沒有 Flash、Java Applet 好。AJAX 不支援跨域訪問，更多參見。
4. Jquery實現方式
-
$.ajax()
-
語法：$.ajax({鍵值對});
//使用$.ajax()發送非同步請求 $.ajax({ //請求路徑 url:'', //請求方式:POST/GET type:"POST", //同步還是非同步（true非同步默認，false同步） async:true, //傳的參數,如果沒有參數，直接寫{} data:{"username":"jack","age":23}, /* 當伺服器正常應答時，調用suceess對應的方法 方法中obj為參數，可以起任何名字，代表伺服器傳遞的參數 */ 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])
-
