八、異步請求技術 · JavaWeb項目開發學習手冊

八、異步請求技術節點訓練 1. 掌握JSON數據格式 2. 掌握JSON格式數據的操作 3. 能夠使用AJAX實現異步請求資源下載： 1.[本次用到JSON的jar包鏈接: ](http://h.yiniuedu.com/jackson.zip) 2.[本次jar包](http://h.yiniuedu.com/jar%E5%8C%85.rar) 備用下載鏈接: https://pan.baidu.com/s/11Mf_mlpg43g3R5OPQZmnhQ 提取碼: 5wcf ## 今日內容 ~~~ 1. AJAX： 2. JSON ~~~ # AJAX： ~~~ 1. 概念： ASynchronous JavaScript And XML 異步的JavaScript 和 XML 1. 異步和同步：客戶端和服務器端相互通信的基礎上 * 客戶端必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。 * 客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。 ? Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。 [1] 通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。 ? 提升用戶的體驗 ? 2. 實現方式： 1. 原生的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); ? ? ? ? ? ? ? } ? ? ? ? ? } 2. JQuery實現方式 1. $.ajax() * 語法：$.ajax({鍵值對}); //使用$.ajax()發送異步請求 ? ? ? ? ? $.ajax({ ? ? ? ? ? ? ? url:"ajaxServlet" , // 請求路徑 ? ? ? ? ? ? ? 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，jackson 1. JSON轉為Java對象 1. 導入jackson的相關jar包 2. 創建Jackson核心對象 ObjectMapper 3. 調用ObjectMapper的相關方法進行轉換 1. readValue(json字符串數據,Class) 2. Java對象轉換JSON 1. 使用步驟： 1. 導入jackson的相關jar包 2. 創建Jackson核心對象 ObjectMapper 3. 調用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"); ~~~