?🎄歡迎來到@邊境矢夢°的csdn博文，本文主要講解Java?中?數據交換和異步請求 Json&Ajax 的相關知識🎄

🌈我是邊境矢夢°，一個正在為秋招和算法競賽做準備的學生🌈
🎆喜歡的朋友可以關注一下🫰🫰🫰，下次更新不迷路🎆

Ps: 月亮越亮說明知識點越重要 (重要性或者難度越大)🌑🌒🌓🌔🌕??

在這里插入圖片描述

一. JSON

🌓1. JSON介紹

🌓2. JSON 的定義格式

🌕3. JSON 規則

🌔4. JSON 對象和字符串對象轉換(javaScript)

🌓5. JSON 在 java 中使用

二. ajax

🌓1. Ajax基本介紹?

🌓2. Ajax特點

🌓3.?Ajax 經典應用場景

🌕4. Ajax基本原理

🌓5. 原生Ajax

🌓6.?JQuery 的 Ajax 請求

?jQuery 參考手冊 - Ajax (w3school.com.cn)

一. JSON

JSON 具有自我描述性，更易理解 , 一句話，非常的好用

1. JSON介紹

🌸JSON:?JavaScript?Object?Notation（JavaScript 對象標記法）。

📌JSON 是一種存儲和交換數據的語法。

🎈JSON 是通過 JavaScript 對象標記法書寫的文本。

🌸JSON（JavaScript Object Notation）是一種輕量級的數據交換格式 (String)

📌JSON易于閱讀和編寫的文本形式表示數據

🎈JSON數據使用鍵值對的方式進行組織，并且可以包含數組、對象和簡單的數據類型（例如字符串、數字、布爾值和null)

JSON的語法規則相對簡單，它由以下幾個基本結構組成：

對象（Object）：使用花括號{}表示，對象是由鍵值對組成的無序集合，每個鍵值對之間使用逗號分隔。
數組（Array）：使用方括號[]表示，數組是由值組成的有序集合，每個值之間使用逗號分隔。
值（Value）：表達數據的不同類型，可以是字符串、數字、布爾值、對象、數組或null。
鍵值對（Key-Value）：表示對象中的屬性和對應的值，鍵和值之間用冒號:分隔。
字符串（String）：由雙引號""或單引號’'括起來的Unicode字符序列。

2. JSON 的定義格式

var 變量名 = {

????????"k1" : value, // Number 類型

????????"k2" : "value", // 字符串類 型

????????"k3" : [],// 數組類型

????????"k4" : {}, // json 對象類型

????????"k5" : [{},{}] // json 數組

};

以下是一個簡單的JSON對象的例子：?

{"name": "John","age": 30,"isStudent": true,"hobbies": ["reading", "music", "sports"],"address": {"street": "123 Main St","city": "New York"}
}

3. JSON 規則

1) 映射(元素/屬性)用冒號 : 表示， " 名稱 ": 值 , 注意名稱是字符串，因此要用雙引號引起 來

2) 并列的數據之間用逗號 , 分隔。 " 名稱 1": 值 ," 名稱 2": 值

3) 映射的集合(對象)用大括號 {} 表示 。 {" 名稱 1": 值 ," 名稱 2": 值 }

4) 并列數據的集合（數組）用方括號 [] 表示 。 [{" 名稱 1": 值 ," 名稱 2": 值 }, {" 名稱 1": 值 ," 名稱 2": 值 }]

5) 元素值類型： string, number, object, array, true, false, null

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>json 快速入門案例</title><script type="text/javascript">var myJson = {"key1": "快速入門案例", // 字符串"key2": 123, // Number"key3": [1, "hello", 2.3], // 數組"key4": {"age": 12, "name": "jack"}, //json 對象"key5": [ //json 數組{"k1": 10, "k2": "milan"}, {"k3": 30, "k4": "smith"}]};//訪問 json 的屬性console.log("key1= " + myJson.key1);// 訪問 json 的數組屬性console.log("key3[1]= " + myJson.key3[1]); // hello// 訪問 key4 的 name 屬性console.log("name= " + myJson.key4.name); // jack// 訪問 key5 json 數組的第一個元素console.log("myJson.key5[0]= " + myJson.key5[0]); //[object, object]console.log("myJson.key5[0].k2= " + myJson.key5[0].k2)// milan</script>
</head>
<body>
<h1>json 快速入門案例</h1>
</body>
</html>

4. JSON 對象和字符串對象轉換(javaScript)

1. JSON.stringify(json) 功能 : 將一個 json 對象轉換成為 json 字符串 [ 簡單說名字來源 .] Serialize

2. JSON.parse( jsonString ) 功能 : 將一個 json 字符串轉換成為 json 對象??

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSON 對象和字符串對象轉換</title><script type="text/javascript">// 一個 json 對象var jsonObj = {"name": "對象和字符串對象轉換", age: 10};//JSON 是一個 build-in 對象,內建對象,有方法可以使用console.log(JSON)// 把 json 對象轉換成為字符串對象var jsonStr = JSON.stringify(jsonObj);console.log(jsonStr);// 把 json 對象的字符串，轉換成為 json 對象var jsonObj2 = JSON.parse(jsonStr);console.log(jsonObj2);</script>
</head>
<body>
<h1>JSON 對象和字符串對象轉換</h1>
</body>
</html>

注意事項和細節

1 、 JSON.springify(json 對象 ) 會返回對應 string, 并不會影響原來 json 對象 ,

2 、 JSON.parse(string) 函數會返回對應的 json 對象 , 并不會影響原來 string

3 、在定義 Json 對象時 , 可以使用 ' ' 表示字符串 , 比如 var json_person = { "name" : "jack" , "age" : 100 }; 也可以寫成 var json_person = { 'name' : 'jack' , 'age' : 100 };

4 、但是在把原生字符串轉成 json 對象時 , 必須使用 "", 否則會報錯比如： var str_dog = "{'name':' 小黃狗 ', 'age': 4}" ; 轉 json 就會報錯 ?

5 、 JSON.springify(json 對象 ) 返回的字符串 , 都是 "" 表示的字符串 , 所以在語法格式正確 的情況下 , 是可以重新轉成 json 對象的 .??

5. JSON 在 java 中使用

說明

????????1. java 中使用 json ，需要引入到第 3 方的包 gson.jar

????????2. Gson 是 Google 提供的用來在 Java 對象和 JSON 數據 之間進行映射的 Java 類庫。

????????3. 可以對 JSON 字符串和 Java 對象相互轉換

JSON 在 Java 中應用場景

????????1. Javabean 對象和 json 字符串 的轉換

????????2. List 對象和 json 字符串 的轉換

????????3. map 對象和 json 字符串 的轉換

?

應用場景示意圖

    public static void main(String[] args) {// new 一個 gson 對象。引入 gson 包Gson gson = new Gson();//1. java 對象和 json 的轉換System.out.println("\n=== 1. java 對象和 json 的轉換 ====");Book book = new Book(100, "韓順平零基礎學 Java");// 把對象轉成為 json 字符串String bookStr = gson.toJson(book);System.out.println(bookStr);// 把 json 字符串轉換成為 java 對象Book book2 = gson.fromJson(bookStr, Book.class);System.out.println(book2);//2 List 集合和 json 的轉換System.out.println("\n======2 List 集合和 json 的轉換======");ArrayList<Book> bookList = new ArrayList<>();bookList.add(new Book(200, "天龍八部"));bookList.add(new Book(300, "神雕俠侶"));//將 list 轉成 json 字符串String bookListStr = gson.toJson(bookList);System.out.println("bookListStr=" + bookListStr);//將 json 字符串轉成 List 集合方式 1List<Book> bookList2 = gson.fromJson(bookListStr, new BookType().getType());System.out.println("bookList2=" + bookList2);//將 json 字符串轉成 List 集合方式 2- 使用 匿名內部類List<Book> bookList3 = gson.fromJson(bookListStr, new TypeToken<List<Book>>() {}.getType());System.out.println("bookList3=" + bookList3);//3. map 集合和 json 的轉換System.out.println("\n====3. map 集合和 json 的轉換=====");Map<String, Book> bookMap = new HashMap<>();bookMap.put("sn1", new Book(10, "射雕英雄傳"));bookMap.put("sn2", new Book(20, "碧血劍"));// 把 map 轉換成為 jsonString bookMapStr = gson.toJson(bookMap);System.out.println("bookMapStr=" + bookMapStr + " 類 型 =" +bookMapStr.getClass());// 把 json 轉成 mapMap<String, Book> bookMap2 = gson.fromJson(bookMapStr, new TypeToken<HashMap<String, Book>>() {}.getType());System.out.println("bookMap2=" + bookMap2 + " 類型=" + bookMap2.getClass());}

?JSON具有良好的可讀性和可擴展性，廣泛應用于Web應用程序間的數據交換、配置文件的存儲和API的傳輸。在許多編程語言中，都提供了JSON的解析和生成庫，以方便對JSON數據進行操作和處理。

二. ajax

1. Ajax基本介紹?

1. AJAX 即"Asynchronous Javascript And XML"(異步 JavaScript 和 XML)

2. Ajax 是一種瀏覽器 異步發起請求 ( 指定發哪些數據 ) ， 局部更新頁面 的技術

3. 傳統的方式只能刷新整個頁面

AJAX 是開發者的夢想，因為您能夠：

不刷新頁面更新網頁
在頁面加載后從服務器請求數據
在頁面加載后從服務器接收數據
在后臺向服務器發送數據

?Ajax（Asynchronous JavaScript and XML）是一種用于創建快速、動態網頁的技術。它通過在后臺與服務器進行數據交換，使網頁能夠在無需重新加載整個頁面的情況下更新部分內容。

🎈傳統的網頁交互方式是用戶與服務器進行完整的頁面請求和響應，即用戶執行某個操作，服務器接收請求并返回完整的新頁面。這種方式存在效率低下和用戶體驗差的問題。

📌而Ajax通過在后臺使用JavaScript和XML或其他數據格式, 使網頁能夠

????????🌸在不刷新整個頁面的情況下與服務器進行數據交互和部分內容更新🌸。

????????通過異步通信，Ajax 可以在用戶完成某個操作之后，將用戶請求發送到服務器，并在接收到服務器的響應后，動態地更新頁面的相應部分，而不需要重新加載整個頁面。

2. Ajax特點

Ajax技術的特點包括：

異步通信：通過使用異步通信，用戶可以繼續與頁面交互，而無需等待服務器響應。
數據交換：Ajax可以與服務器進行數據交換，可以在不刷新整個頁面的情況下更新頁面的局部內容。
DOM操作：Ajax可以使用JavaScript操作DOM，實現動態頁面的創建和更新。
增強用戶體驗：由于Ajax可以快速地更新頁面的一部分，因此可以提供更快速、更流暢的用戶體驗。

盡管Ajax中的“X”代表XML，但實際上，現代的Ajax應用程序通常使用JSON、HTML或純文本格式來傳輸數據，而不是XML。

Ajax已經成為現代Web應用程序開發的重要技術之一，被廣泛應用于各種Web應用，包括社交媒體、在線購物以及各種在線工具和應用程序。

3.?Ajax 經典應用場景

1. 搜索引擎根據用戶輸入關鍵字，自動提示檢索關鍵字

2. 動態加載數據，按需取得數據【樹形菜單、聯動菜單 ... 】

3. 改善用戶體驗。【輸入內容前提示、帶進度條文件上傳 ... 】

4. 電子商務應用。【購物車、郵件訂閱 ... 】

5. 訪問第三方服務。【訪問搜索服務、 rss 閱讀器】

6. 頁面局部刷新 , https://piaofang.maoyan.com/dashboard

4. Ajax基本原理

?5. 原生Ajax

function checkUser() {var xhr = new XMLHttpRequest();var uname = document.getElementById("uname").value;xhr.open("GET", "/ajaxStu/check?username=" + uname, true);xhr.onreadystatechange = function () {// console.log("xhr = ",  xhr);if (xhr.readyState === 4 && xhr.status === 200) {if(xhr.responseText.trim() === "") {document.getElementById("myres").value = "用戶名可用";} else {document.getElementById("myres").value = "用戶名不可用";}}document.getElementById("div1").innerText = xhr.responseText;}xhr.send();}

6.?JQuery 的 Ajax 請求

jQuery(function () {$("#check").click(function () {window.alert("hello")$.ajax({url:"/ajaxStu/check2",type:"POST",data:{username:$("#uname").val(),date:new Date()},success:function (date, status, xhr) {console.log("成功~");console.log(date);console.log(status);console.log(xhr);if("king" === date.username) {$("#myres").val("用戶不可用");} else {$("#myres").val("用戶可用");}$("#div1").html(JSON.stringify(date));},error:function () {console.log("失敗~")},dataType:"json"})$.get("/ajaxStu/check2",{username:$("#uname").val(),date:new Date()},function (date, status, xhr) {console.log("get()成功~");console.log(date);console.log(status);console.log(xhr);if("king" === date.username) {$("#myres").val("用戶不可用");} else {$("#myres").val("用戶可用");}$("#div1").html(JSON.stringify(date));},"json")$.post("/ajaxStu/check2",{username:$("#uname").val(),date:new Date()},function (date, status, xhr) {console.log("post()成功~");console.log(date);console.log(status);console.log(xhr);if("king" === date.username) {$("#myres").val("用戶不可用");} else {$("#myres").val("用戶可用");}$("#div1").html(JSON.stringify(date));},"json")$.getJSON("/ajaxStu/check2",{username:$("#uname").val(),date:new Date()},function (date, status, xhr) {console.log("getJSON()成功~");console.log(date);console.log(status);console.log(xhr);if("king" === date.username) {$("#myres").val("用戶不可用");} else {$("#myres").val("用戶可用");}$("#div1").html(JSON.stringify(date));})})})