你的JSON & AJAX 滿分學(xué)習(xí)文章，請收下（你的計算機配置似乎是正確的,但該設(shè)備或資源沒有響應(yīng)）

一、JSON

1、定義

JSON（JavaScript Object Notation, JS 對象簡譜）是一種輕量級的數(shù)據(jù)交換格式。它基于 ECMAScript （歐洲計算機協(xié)會制定的 JS 規(guī)范）的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。

2、格式

JSON 就是一種有格式的字符串。

任何支持的類型都可以通過 JSON 來表示，例如字符串、數(shù)字、對象、數(shù)組等。但是對象和數(shù)組是比較

特殊且常用的兩種類型。

規(guī)則如下:

映射用冒號（“:”）表示。”名稱” : 值，標(biāo)準(zhǔn)格式名稱用雙引號括起來；

元素值可具有的類型：string，bumber，object，true，arry，true，false，null

并列的數(shù)據(jù)之間用逗號（“,”）分隔。”名稱1” : 值1, ”名稱2” : 值2；

映射的集合（對象）用大括號（“{}”）表示。{”名稱1” : 值1, ”名稱2”: 值2}

并列數(shù)據(jù)的集合（數(shù)組）用方括號(“[]”)表示。如下所示：

[

{”名稱1” : 值, ”名稱2” : 值2},

{”名稱1” : 值, ”名稱2” : 值2}

]

二、在 JavaScript 中的 JSON

1、表示 JSON

在 webapp/jq_02/01.json.html

2、JSON 與 JS 對象轉(zhuǎn)換

瀏覽器環(huán)境提供一個工具類名叫JSON，里面提供方法幫我們實現(xiàn) JSON 與 JS 對象之間的轉(zhuǎn)換。接著在上面頁面的 script 標(biāo)簽中加入下面的代碼

//假設(shè)獲取到服務(wù)器響應(yīng)的數(shù)據(jù)是 JSON 格式，想獲取到具體數(shù)據(jù)怎么？ // 有一種方式切割字符串, 不可取的 // 另一種方式，JSON 是瀏覽器環(huán)境提供一個工具, 里面提供方法實現(xiàn)兩者的轉(zhuǎn)換 // JSON 字符串轉(zhuǎn) JS 對象 console.log(JSON.parse(json1).age); console.log(JSON.parse(json2)); console.log(JSON.parse(json3).dept.name); // JS 對象轉(zhuǎn) JSON 字符串 console.log(JSON.stringify(jsObj2)); var json4 = "{'id':1,'name':'zs','age':18}"; // 錯誤格式的 JSON console.log(JSON.parse(json4)); // 報錯

三、在 Java 中的 JSON

1、表示 JSON

新建一個測試類 JsonTest，演示在 Java 中表示 JSON。

package cn.json; public class JsonTest { @Test public void testJson() { String jsonStr = "{\"id\":1,\"name\":\"開發(fā)部\",\"sn\":\"DEV\"}"; } }

2、JSON 與 Java 對象轉(zhuǎn)換

開發(fā)中一般都會使用第三方的一些 JSON 操作的依賴或者 JAR 包來來完成 Java 對象與 JSON 字符串之間

的轉(zhuǎn)換。

在 Java 中，轉(zhuǎn)換 JSON 的依賴或者 JAR 有很多，這里單講兩種常用：

Jackson：在 Spring MVC 中內(nèi)置支持她，速度也挺快，穩(wěn)定性比較好。

Fastjson：阿里出品，號稱是 Java 領(lǐng)域中轉(zhuǎn)換 JSON 最快的一個插件，中文文檔比較齊全。

3、Jackson

3.1、添加依賴

com.fasterxml.jackson.core jackson-databind 2.9.6

3.2、API 使用

package cn.json; public class JsonTest { @Test public void testJackson() throws Exception { Department department = new Department(); department.setId(1L); department.setName("開發(fā)部"); department.setSn("DEV"); ObjectMapper objectMapper = new ObjectMapper(); // Java 對象轉(zhuǎn) JSON System.out.println(objectMapper.writeValueAsString(department)); // JSON 轉(zhuǎn) Java 對象 System.out.println(objectMapper.readValue("{\"id\":1,\"name\":\"開發(fā)部 \",\"sn\":\"DEV\"}", Department.class)); } }

4、Fastjson

4.1、添加依賴

com.alibaba fastjson 1.2.47

4.2、API 使用

package cn.json; public class JsonTest { @Test public void testFastjson() { Department department = new Department(); department.setId(1L); department.setName("開發(fā)部"); department.setSn("DEV"); // Java 對象轉(zhuǎn) JSON System.out.println(JSON.toJSONString(department)); // JSON 轉(zhuǎn) Java 對象 System.out.println(JSON.parseObject("{\"id\":1,\"name\":\"開發(fā)部 \",\"sn\":\"DEV\"}", Department.class)); } }

四、Spring MVC 響應(yīng) JSON

1、使用 Servlet API 響應(yīng) JSON

比如響應(yīng)類型這樣的 JSON 數(shù)據(jù) {“success”:true,“msg”:“2020-03-16 10:00”}。

1.1、新建 JsonResult 類

package cn.wolfcode.qo; @Setter @Getter public class JsonResult { private boolean success; private String msg; }

1.2、新建 JsonController 類

package cn.wolfcode.web.controller; @Controller public class JsonController { // 若形參有一個類型 response, 方法返回值可以為 void @RequestMapping("/getTime") public void getTime(HttpServletResponse response) throws Exception { // 響應(yīng) HTML 格式內(nèi)容回瀏覽器 /* response.setContentType("text/html;charset=utf-8"); PrintWriter writer = response.getWriter(); writer.write("HTML 格式內(nèi)容"); writer.flush();*/ // 響應(yīng) JSON 格式內(nèi)容回瀏覽器 response.setContentType("application/json;charset=utf-8"); PrintWriter writer = response.getWriter(); Date now = new Date(); JsonResult jsonResult = new JsonResult(); jsonResult.setSuccess(true); jsonResult.setMsg(now.toLocaleString()); writer.write(JSON.toJSONString(jsonResult)); // 避免自己手動拼接字符串 writer.flush(); } }

2、Spring MVC 響應(yīng) JSON 步驟

在 pom.xml 中添加 Jackson 依賴。

在 mvc.xml 配置 MVC 注解解析器。

定義一個類，里面提供對應(yīng)屬性封裝數(shù)據(jù)。

在要響應(yīng) JSON 數(shù)據(jù)的控制器的處理方法上貼 @ResponseBody 注解，且方法返回類型為上面定

義的類。

在處理方法中創(chuàng)建上面定義類 的對象，封裝數(shù)據(jù)返回即可。

3、練習(xí)

3.1、練習(xí)一

響應(yīng)類型這樣的 JSON 數(shù)據(jù) {“success”:true,“msg”:“2020-03-16 10:00”}.

在 JsonController 類追加一個處理方法

package cn.web.controller; @Controller public class JsonController { @RequestMapping("/getTime") @ResponseBody public JsonResult getTime() { Date now = new Date(); JsonResult jsonResult = new JsonResult(); jsonResult.setSuccess(true); jsonResult.setMsg(now.toLocaleString()); return jsonResult; } }

3.2、練習(xí)二

響應(yīng)類型多個部門列表的 JSON 數(shù)據(jù)，類似這樣 [{“id”:1,“name”:“開發(fā)部”,“sn”:“DEV”},

{“id”:2,“name”:“人事部”,“sn”:“HR”}]。

在 JsonController 類追加一個處理方法

package cn.web.controller; @Controller public class JsonController { @Autowired private IDepartmentService departmentService; @RequestMapping("/depts") @ResponseBody public List getDepts(){ return departmentService.listAll(); } }

五、AJAX 概述

1、AJAX介紹

AJAX 不是一項具體的技術(shù)，而是幾門技術(shù)的綜合應(yīng)用。Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

AJAX 核心只不過是要在 Javascript 中調(diào)用一個叫 XMLHttpRequest 類，這個類可以與 Web 服務(wù)器使用 HTTP 協(xié)議進行交互，程序不通過瀏覽器發(fā)出請求，而是用這個特殊的 JavaScript 對象發(fā)送請求和接收響應(yīng)。

XMLHttpRequest 對象在網(wǎng)絡(luò)上的俗稱為 AJAX 對象。

2、AJAX 特點

瀏覽器中顯示一個頁面后，這個頁面以后一直不改變，所有的操作請求都由這個網(wǎng)頁中的 Javascript 代

碼發(fā)出，所有的結(jié)果都由 Javascript 代碼接受并增加到這個頁面上，瀏覽器窗口中顯示的網(wǎng)頁始終都是

初始的那個網(wǎng)頁。

增強用戶體驗：可以在用戶瀏覽網(wǎng)頁的同時與服務(wù)器進行異步交互和實現(xiàn)網(wǎng)頁內(nèi)容的局部更新。

同步和異步交互：

同步：提交請求 —> 等待服務(wù)器處理 —> 處理完畢返回 這個期間客戶端瀏覽器不能干任何事。同步是

指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個數(shù)據(jù)包的通 訊方式。

異步：請求通過事件觸發(fā) —> 服務(wù)器處理（這時瀏覽器仍然可以作其他事情）—> 處理完畢。異步是

指：發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)送下個數(shù)據(jù)包的通 訊方式。

3、AJAX缺陷

AJAX 大量使用了 Javascript 和 AJAX 引擎，而這個取決于瀏覽器的支持。IE5.0 及以上、Mozilla1.0、NetScape7 及以上版本才支持，Mozilla 雖然也支持 AJAX ，但是提供 XMLHttpRequest 的方式不一樣。所以，使用 AJAX 的程序必須測試針對各個瀏覽器的兼容性。

AJAX 更新頁面內(nèi)容的時候并沒有刷新整個頁面，因此，網(wǎng)頁的后退功能是失效的；有的用戶還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過的。這個就需要在明顯位置提醒用戶“數(shù)據(jù)已更新”。

對流媒體的支持沒有 Flash、Java Applet 好。

AJAX 不支持跨域訪問

六、AJAX的簡單入門-獲取服務(wù)端的時間

1、思路

編寫頁面，頁面有個按鈕；

給按鈕綁定一個點擊事件處理函數(shù)；

觸發(fā)點擊事件發(fā)送 AJAX 請求到控制器；

控制器響應(yīng)時間給客戶端 JSON 數(shù)據(jù)，標(biāo)準(zhǔn)格式，取值方便；

客戶端接收響應(yīng)，顯示時間。

2、代碼實現(xiàn)

創(chuàng)建 AJAX 對象（發(fā)送請求和接收響應(yīng)）；

給 AJAX 對象設(shè)置 HTTP 請求方式，URL 和是否異步；

給 AJAX 對象設(shè)置狀態(tài)監(jiān)聽函數(shù)（回調(diào)函數(shù)），當(dāng) AJAX 對象的 readyState 狀態(tài)改變會執(zhí)行此函數(shù)；

發(fā)送請求。

七、jQuery 中 AJAX API

1、jQuery.ajax([options])

2、jQuery.get(url, [data], [callback], [type])

3、jQuery.post(url, [data], [callback], [type])

八、練習(xí)

1、 GET 請求檢查用戶名是否存在

1.1、前端 JS 代碼

新建 webapp/jq_02/02.check_username.html，使用 jQuery 發(fā)送 AJAX 請求

用戶名: 密碼: 登錄

2.2、后端 Java 代碼

在 JsonController 類追加一個處理方法，使用 Spring MVC 響應(yīng) JSON 字符串。

package cn.web.controller; @Controller public class JsonController { // 若登錄成功 {"success":true,"msg":"登錄成功"} // 若登錄失敗 {"success":false,"msg":"登錄失敗 "} @RequestMapping("/loginJson") @ResponseBody public JsonResult checkUsername(String username, String password){ // 模擬，假設(shè)數(shù)據(jù)存只存在用戶 lony 密碼 123 JsonResult jsonResult = new JsonResult(); if("lony".equals(username) && "123".equals(password)){ jsonResult.setSuccess(true); jsonResult.setMsg("登錄成功"); }else { jsonResult.setSuccess(false); jsonResult.setMsg("登錄失敗"); } return jsonResult; } }

3、二級聯(lián)動

3.1、二級聯(lián)動實際應(yīng)用

比如用戶注冊填寫地址信息的會使用二級聯(lián)動。購物時，選擇所在地區(qū)也會使用二級聯(lián)動。而三級聯(lián)動只多一個級而已，做法也是一樣的。

3.2、二級聯(lián)動的實現(xiàn)思路

頁面加載完，省份下拉框從后臺獲取省份數(shù)據(jù)；

將后臺獲取的響應(yīng)數(shù)據(jù)，渲染到省份下拉框中；

給省份下框綁定值改變的事件，值發(fā)生改變之后，把選擇的省份 id 傳給后臺；

將后臺獲取的響應(yīng)數(shù)據(jù)，渲染到城市下拉框中。

3.3、代碼實現(xiàn)

新建 webapp/jq_02/04.province_city.html，引入好 jQuery，提供省份和城市下拉框

Province 類 和 City 類，用來封裝數(shù)據(jù)轉(zhuǎn) JSON 使用，避免自己手動拼接 JSON

package cn.domain; // 省份 public class Province { private Long id; private String name; public Province() { } public Province(Long id, String name) { this.id = id; this.name = name; } public Long getId() { return id; } public String getName() { return name; } // 獲取所有的省份 public static List getAllProvince() { List provinces = new ArrayList(); provinces.add(new Province(1L, "湖南")); provinces.add(new Province(2L, "廣東")); provinces.add(new Province(3L, "湖北")); return provinces; } public String toString() { return "Province [id=" + id + ", name=" + name + "]"; } }

package cn.domain; // 城市 public class City { private Long id; private String name; public City() { } public City(Long id, String name) { this.id = id; this.name = name; } /** * 根據(jù)省份 id 查詢省份中的城市! * @return */ public static List getCityByProvinceId(Long pid) { List citys = new ArrayList(); if (pid == 1) { citys = Arrays.asList( new City(11L,"長沙市"), new City(12L,"株洲市"), new City(13L,"湘潭市"), new City(14L,"衡陽市"), new City(15L,"邵陽市"), new City(16L,"岳陽市"), new City(17L,"常德市"), new City(18L,"張家界市") ); } else if (pid == 2) { citys = Arrays.asList( new City(21L,"廣州市"), new City(22L,"深圳市"), new City(23L,"佛山市"), new City(24L,"中山市"), new City(25L,"珠海市"), new City(26L,"汕頭市"), new City(27L,"潮州市"), new City(28L,"東莞市") ); } else if (pid == 3) { citys = Arrays.asList( new City(31L,"孝感市"), new City(32L,"黃岡市"), new City(33L,"咸寧市"), new City(34L,"恩施州"), new City(35L,"鄂州市"), new City(36L,"武漢市"), new City(37L,"荊門市"), new City(38L,"襄陽市") ); } return citys; } public Long getId() { return id; } public String getName() { return name; } public String toString() { return "City [id=" + id + ", name=" + name + "]"; } }

在 JsonController 類追加兩個個處理方法，使用 Spring MVC 響應(yīng)省份和城市數(shù)據(jù)，是 JSON 格式。

package cn.web.controller; @Controller public class JsonController { // 獲取省份 JSON 數(shù)據(jù) @RequestMapping("/provinces") @ResponseBody public List getPovinces(){ List provinces = Province.getAllProvince(); return provinces; } // 獲取對應(yīng)省份的城市 JSON 數(shù)據(jù) @RequestMapping("/cities") @ResponseBody public List getPovinces(Long pid){ return City.getCityByProvinceId(pid); } }

Java JSON

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。