今日內容

1. AJAX： 2. JSON

AJAX：

1. 概念： ASynchronous JavaScript And XML 異步的JavaScript 和 XML1. 異步和同步：客戶端和服務器端相互通信的基礎上* 客戶端必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。* 客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。 [1] 通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。提升用戶的體驗2. 實現方式：1. 原生的JS實現方式（了解）//1.創建核心對象var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=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響應狀態碼是否為200if (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，jackson1. JSON轉為Java對象1. 導入jackson的相關jar包2. 創建Jackson核心對象 ObjectMapper3. 調用ObjectMapper的相關方法進行轉換1. readValue(json字符串數據,Class)2. Java對象轉換JSON1. 使用步驟：1. 導入jackson的相關jar包2. 創建Jackson核心對象 ObjectMapper3. 調用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：對象格式一致

案例：

* 校驗用戶名是否存在1. 服務器響應的數據，在客戶端使用時，要想當做json數據格式使用。有兩種解決方案：1. $.get(type):將最后一個參數type指定為"json"2. 在服務器端設置MIME類型response.setContentType("application/json;charset=utf-8");

總結

以上是生活随笔為你收集整理的AjaxJson笔记(1)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。