今日內(nèi)容

1. AJAX： 2. JSON

AJAX：

1. 概念： ASynchronous JavaScript And XML 異步的JavaScript 和 XML1. 異步和同步：客戶端和服務(wù)器端相互通信的基礎(chǔ)上* 客戶端必須等待服務(wù)器端的響應(yīng)。在等待的期間客戶端不能做其他操作。* 客戶端不需要等待服務(wù)器端的響應(yīng)。在服務(wù)器處理請(qǐng)求的過程中，客戶端可以進(jìn)行其他的操作。Ajax 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。 [1] 通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁頁面。提升用戶的體驗(yàn)2. 實(shí)現(xiàn)方式：1. 原生的JS實(shí)現(xiàn)方式（了解）//1.創(chuàng)建核心對(duì)象var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//2. 建立連接/*參數(shù)：1. 請(qǐng)求方式：GET、POST* get方式，請(qǐng)求參數(shù)在URL后邊拼接。send方法為空參* post方式，請(qǐng)求參數(shù)在send方法中定義2. 請(qǐng)求的URL：3. 同步或異步請(qǐng)求：true（異步）或 false（同步）*/xmlhttp.open("GET","ajaxServlet?username=tom",true);//3.發(fā)送請(qǐng)求xmlhttp.send();//4.接受并處理來自服務(wù)器的響應(yīng)結(jié)果//獲取方式 ：xmlhttp.responseText//什么時(shí)候獲取？當(dāng)服務(wù)器響應(yīng)成功后再獲取//當(dāng)xmlhttp對(duì)象的就緒狀態(tài)改變時(shí)，觸發(fā)事件onreadystatechange。xmlhttp.onreadystatechange=function(){//判斷readyState就緒狀態(tài)是否為4，判斷status響應(yīng)狀態(tài)碼是否為200if (xmlhttp.readyState==4 && xmlhttp.status==200){//獲取服務(wù)器的響應(yīng)結(jié)果var responseText = xmlhttp.responseText;alert(responseText);}}2. JQeury實(shí)現(xiàn)方式1. $.ajax()* 語法：$.ajax({鍵值對(duì)});//使用$.ajax()發(fā)送異步請(qǐng)求$.ajax({url:"ajaxServlet1111" , // 請(qǐng)求路徑type:"POST" , //請(qǐng)求方式//data: "username=jack&age=23",//請(qǐng)求參數(shù)data:{"username":"jack","age":23},success:function (data) {alert(data);},//響應(yīng)成功后的回調(diào)函數(shù)error:function () {alert("出錯(cuò)啦...")},//表示如果請(qǐng)求響應(yīng)出現(xiàn)錯(cuò)誤，會(huì)執(zhí)行的回調(diào)函數(shù)dataType:"text"//設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式});2. $.get()：發(fā)送get請(qǐng)求* 語法：$.get(url, [data], [callback], [type])* 參數(shù)：* url：請(qǐng)求路徑* data：請(qǐng)求參數(shù)* callback：回調(diào)函數(shù)* type：響應(yīng)結(jié)果的類型3. $.post()：發(fā)送post請(qǐng)求* 語法：$.post(url, [data], [callback], [type])* 參數(shù)：* url：請(qǐng)求路徑* data：請(qǐng)求參數(shù)* callback：回調(diào)函數(shù)* type：響應(yīng)結(jié)果的類型

JSON：

1. 概念： JavaScript Object Notation JavaScript對(duì)象表示法Person p = new Person();p.setName("張三");p.setAge(23);p.setGender("男");var p = {"name":"張三","age":23,"gender":"男"};* json現(xiàn)在多用于存儲(chǔ)和交換文本信息的語法* 進(jìn)行數(shù)據(jù)的傳輸* JSON 比 XML 更小、更快，更易解析。2. 語法：1. 基本規(guī)則* 數(shù)據(jù)在名稱/值對(duì)中：json數(shù)據(jù)是由鍵值對(duì)構(gòu)成的* 鍵用引號(hào)(單雙都行)引起來，也可以不使用引號(hào)* 值得取值類型：1. 數(shù)字（整數(shù)或浮點(diǎn)數(shù)）2. 字符串（在雙引號(hào)中）3. 邏輯值（true 或 false）4. 數(shù)組（在方括號(hào)中） {"persons":[{},{}]}5. 對(duì)象（在花括號(hào)中） {"address":{"province"："陜西"....}}6. null* 數(shù)據(jù)由逗號(hào)分隔：多個(gè)鍵值對(duì)由逗號(hào)分隔* 花括號(hào)保存對(duì)象：使用{}定義json 格式* 方括號(hào)保存數(shù)組：[]2. 獲取數(shù)據(jù):1. json對(duì)象.鍵名2. json對(duì)象["鍵名"]3. 數(shù)組對(duì)象[索引]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對(duì)象中所有的鍵和值//for in 循環(huán)/* for(var key in person){//這樣的方式獲取不行。因?yàn)橄喈?dāng)于 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數(shù)據(jù)和Java對(duì)象的相互轉(zhuǎn)換* JSON解析器：* 常見的解析器：Jsonlib，Gson，fastjson，jackson1. JSON轉(zhuǎn)為Java對(duì)象1. 導(dǎo)入jackson的相關(guān)jar包2. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper3. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換1. readValue(json字符串?dāng)?shù)據(jù),Class)2. Java對(duì)象轉(zhuǎn)換JSON1. 使用步驟：1. 導(dǎo)入jackson的相關(guān)jar包2. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper3. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換1. 轉(zhuǎn)換方法：* writeValue(參數(shù)1，obj):參數(shù)1：File：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并保存到指定的文件中Writer：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并將json數(shù)據(jù)填充到字符輸出流中OutputStream：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并將json數(shù)據(jù)填充到字節(jié)輸出流中* writeValueAsString(obj):將對(duì)象轉(zhuǎn)為json字符串2. 注解：1. @JsonIgnore：排除屬性。2. @JsonFormat：屬性值得格式化* @JsonFormat(pattern = "yyyy-MM-dd")3. 復(fù)雜java對(duì)象轉(zhuǎn)換1. List：數(shù)組2. Map：對(duì)象格式一致

案例：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。