Java?數(shù)據(jù)交換?Json?和?異步請(qǐng)求?Ajax詳解
jQuery 參考手冊(cè) - Ajax (w3school.com.cn)
一. JSON
JSON 具有自我描述性，更易理解 , 一句話，非常的好用
1. JSON介紹
??JSON: JavaScript Object Notation（JavaScript 對(duì)象標(biāo)記法）。
??JSON 是一種存儲(chǔ)和交換數(shù)據(jù)的語(yǔ)法。
??JSON 是通過(guò) JavaScript 對(duì)象標(biāo)記法書寫的文本。
??JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換格式 (String)
??JSON易于閱讀和編寫的文本形式表示數(shù)據(jù)
??JSON數(shù)據(jù)使用鍵值對(duì)的方式進(jìn)行組織，并且可以包含數(shù)組、對(duì)象和簡(jiǎn)單的數(shù)據(jù)類型（例如字符串、數(shù)字、布爾值和null)
JSON的語(yǔ)法規(guī)則相對(duì)簡(jiǎn)單，它由以下幾個(gè)基本結(jié)構(gòu)組成：
- 對(duì)象（Object）：使用花括號(hào){}表示，對(duì)象是由鍵值對(duì)組成的無(wú)序集合，每個(gè)鍵值對(duì)之間使用逗號(hào)分隔。
- 數(shù)組（Array）：使用方括號(hào)[]表示，數(shù)組是由值組成的有序集合，每個(gè)值之間使用逗號(hào)分隔。
- 值（Value）：表達(dá)數(shù)據(jù)的不同類型，可以是字符串、數(shù)字、布爾值、對(duì)象、數(shù)組或null。
- 鍵值對(duì)（Key-Value）：表示對(duì)象中的屬性和對(duì)應(yīng)的值，鍵和值之間用冒號(hào):分隔。
- 字符串（String）：由雙引號(hào)""或單引號(hào)’'括起來(lái)的Unicode字符序列。
2. JSON 的定義格式
var 變量名 = {
"k1" : value, // Number 類型
"k2" : "value", // 字符串類 型
"k3" : [],// 數(shù)組類型
"k4" : {}, // json 對(duì)象類型
"k5" : [{},{}] // json 數(shù)組
};以下是一個(gè)簡(jiǎn)單的JSON對(duì)象的例子：
{
"name": "John",
"age": 30,
"isStudent": true,
"hobbies": ["reading", "music", "sports"],
"address": {
"street": "123 Main St",
"city": "New York"
}
}3. JSON 規(guī)則
1) 映射(元素/屬性)用冒號(hào) : 表示， " 名稱 ": 值 , 注意名稱是字符串，因此要用雙引號(hào)引起 來(lái)
2) 并列的數(shù)據(jù)之間用逗號(hào) , 分隔。 " 名稱 1": 值 ," 名稱 2": 值
3) 映射的集合(對(duì)象)用大括號(hào) {} 表示 。 {" 名稱 1": 值 ," 名稱 2": 值 }
4) 并列數(shù)據(jù)的集合（數(shù)組）用方括號(hào) [] 表示 。 [{" 名稱 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], // 數(shù)組
"key4": {"age": 12, "name": "jack"}, //json 對(duì)象
"key5": [ //json 數(shù)組
{"k1": 10, "k2": "milan"}, {"k3": 30, "k4": "smith"}
]
};
//訪問(wèn) json 的屬性
console.log("key1= " + myJson.key1);
// 訪問(wèn) json 的數(shù)組屬性
console.log("key3[1]= " + myJson.key3[1]); // hello
// 訪問(wèn) key4 的 name 屬性
console.log("name= " + myJson.key4.name); // jack
// 訪問(wèn) key5 json 數(shù)組的第一個(gè)元素
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 對(duì)象和字符串對(duì)象轉(zhuǎn)換(javaScript)
1. JSON.stringify(json) 功能 : 將一個(gè) json 對(duì)象轉(zhuǎn)換成為 json 字符串 [ 簡(jiǎn)單說(shuō)名字來(lái)源 .] Serialize
2. JSON.parse( jsonString ) 功能 : 將一個(gè) json 字符串轉(zhuǎn)換成為 json 對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON 對(duì)象和字符串對(duì)象轉(zhuǎn)換</title>
<script type="text/javascript">
// 一個(gè) json 對(duì)象
var jsonObj = {"name": "對(duì)象和字符串對(duì)象轉(zhuǎn)換", age: 10};
//JSON 是一個(gè) build-in 對(duì)象,內(nèi)建對(duì)象,有方法可以使用
console.log(JSON)
// 把 json 對(duì)象轉(zhuǎn)換成為字符串對(duì)象
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);
// 把 json 對(duì)象的字符串，轉(zhuǎn)換成為 json 對(duì)象
var jsonObj2 = JSON.parse(jsonStr);
console.log(jsonObj2);
</script>
</head>
<body>
<h1>JSON 對(duì)象和字符串對(duì)象轉(zhuǎn)換</h1>
</body>
</html>注意事項(xiàng)和細(xì)節(jié)
1 、 JSON.springify(json 對(duì) 象 ) 會(huì) 返 回對(duì) 應(yīng) string, 并 不 會(huì)影 響 原 來(lái) json 對(duì) 象 ,
2 、 JSON.parse(string) 函數(shù)會(huì)返回對(duì)應(yīng)的 json 對(duì)象 , 并不會(huì)影響原來(lái) string
3 、在定義 Json 對(duì)象時(shí) , 可以使用 ' ' 表示字符串 , 比如 var json_person = { "name" : "jack" , "age" : 100 }; 也可以寫成 var json_person = { 'name' : 'jack' , 'age' : 100 };
4 、但是在把原生字符串轉(zhuǎn)成 json 對(duì)象時(shí) , 必須使用 "", 否則會(huì)報(bào)錯(cuò) 比如： var str_dog = "{'name':' 小黃狗 ', 'age': 4}" ; 轉(zhuǎn) json 就會(huì)報(bào)錯(cuò)
5 、 JSON.springify(json 對(duì)象 ) 返回的字符串 , 都是 "" 表示的字符串 , 所以在語(yǔ)法格式正確 的情況下 , 是可以重新轉(zhuǎn)成 json 對(duì)象的 .
5. JSON 在 java 中使用
說(shuō)明
1. java 中使用 json ，需要引入到第 3 方的包 gson.jar
2. Gson 是 Google 提供的用來(lái)在 Java 對(duì)象 和 JSON 數(shù)據(jù) 之間進(jìn)行映射的 Java 類庫(kù)。
3. 可以對(duì) JSON 字符串 和 Java 對(duì)象相互轉(zhuǎn)換
JSON 在 Java 中應(yīng)用場(chǎng)景
1. Javabean 對(duì)象和 json 字符串 的轉(zhuǎn)換
2. List 對(duì)象和 json 字符串 的轉(zhuǎn)換
3. map 對(duì)象和 json 字符串 的轉(zhuǎn)換
應(yīng)用場(chǎng)景示意圖
public static void main(String[] args) {
// new 一個(gè) gson 對(duì)象。引入 gson 包
Gson gson = new Gson();
//1. java 對(duì)象和 json 的轉(zhuǎn)換
System.out.println("\n=== 1. java 對(duì)象和 json 的轉(zhuǎn)換 ====");
Book book = new Book(100, "韓順平零基礎(chǔ)學(xué) Java");
// 把對(duì)象轉(zhuǎn)成為 json 字符串
String bookStr = gson.toJson(book);
System.out.println(bookStr);
// 把 json 字符串轉(zhuǎn)換成為 java 對(duì)象
Book book2 = gson.fromJson(bookStr, Book.class);
System.out.println(book2);
//2 List 集合和 json 的轉(zhuǎn)換
System.out.println("\n======2 List 集合和 json 的轉(zhuǎn)換======");
ArrayList<Book> bookList = new ArrayList<>();
bookList.add(new Book(200, "天龍八部"));
bookList.add(new Book(300, "神雕俠侶"));
//將 list 轉(zhuǎn)成 json 字符串
String bookListStr = gson.toJson(bookList);
System.out.println("bookListStr=" + bookListStr);
//將 json 字符串轉(zhuǎn)成 List 集合方式 1
List<Book> bookList2 = gson.fromJson(bookListStr,
new BookType().getType());
System.out.println("bookList2=" + bookList2);
//將 json 字符串轉(zhuǎn)成 List 集合方式 2- 使用 匿名內(nèi)部類
List<Book> bookList3 = gson.fromJson(bookListStr,
new TypeToken<List<Book>>() {}.getType());
System.out.println("bookList3=" + bookList3);
//3. map 集合和 json 的轉(zhuǎn)換
System.out.println("\n====3. map 集合和 json 的轉(zhuǎn)換=====");
Map<String, Book> bookMap = new HashMap<>();
bookMap.put("sn1", new Book(10, "射雕英雄傳"));
bookMap.put("sn2", new Book(20, "碧血?jiǎng)?));
// 把 map 轉(zhuǎn)換成為 json
String bookMapStr = gson.toJson(bookMap);
System.out.println("bookMapStr=" + bookMapStr + " 類 型 =" +
bookMapStr.getClass());
// 把 json 轉(zhuǎn)成 map
Map<String, Book> bookMap2 = gson.fromJson(bookMapStr,
new TypeToken<HashMap<String, Book>>() {}.getType());
System.out.println("bookMap2=" + bookMap2 + " 類型=" + bookMap2.getClass());
}JSON具有良好的可讀性和可擴(kuò)展性，廣泛應(yīng)用于Web應(yīng)用程序間的數(shù)據(jù)交換、配置文件的存儲(chǔ)和API的傳輸。在許多編程語(yǔ)言中，都提供了JSON的解析和生成庫(kù)，以方便對(duì)JSON數(shù)據(jù)進(jìn)行操作和處理。
二. ajax
1. Ajax基本介紹
1. AJAX 即"Asynchronous Javascript And XML"(異步 JavaScript 和 XML)
2. Ajax 是一種瀏覽器 異步發(fā)起請(qǐng)求 ( 指定發(fā)哪些數(shù)據(jù) ) ， 局部更新頁(yè)面 的技術(shù)
3. 傳統(tǒng)的方式只能刷新整個(gè)頁(yè)面
AJAX 是開(kāi)發(fā)者的夢(mèng)想，因?yàn)槟軌颍?/p>
- 不刷新頁(yè)面更新網(wǎng)頁(yè)
- 在頁(yè)面加載后從服務(wù)器請(qǐng)求數(shù)據(jù)
- 在頁(yè)面加載后從服務(wù)器接收數(shù)據(jù)
- 在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)
Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建快速、動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。它通過(guò)在后臺(tái)與服務(wù)器進(jìn)行數(shù)據(jù)交換，使網(wǎng)頁(yè)能夠在無(wú)需重新加載整個(gè)頁(yè)面的情況下更新部分內(nèi)容。
??傳統(tǒng)的網(wǎng)頁(yè)交互方式是用戶與服務(wù)器進(jìn)行完整的頁(yè)面請(qǐng)求和響應(yīng)，即用戶執(zhí)行某個(gè)操作，服務(wù)器接收請(qǐng)求并返回完整的新頁(yè)面。這種方式存在效率低下和用戶體驗(yàn)差的問(wèn)題。
??而Ajax通過(guò)在后臺(tái)使用JavaScript和XML或其他數(shù)據(jù)格式, 使網(wǎng)頁(yè)能夠
??在不刷新整個(gè)頁(yè)面的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互和部分內(nèi)容更新??。
通過(guò)異步通信，Ajax 可以在用戶完成某個(gè)操作之后，將用戶請(qǐng)求發(fā)送到服務(wù)器，并在接收到服務(wù)器的響應(yīng)后，動(dòng)態(tài)地更新頁(yè)面的相應(yīng)部分，而不需要重新加載整個(gè)頁(yè)面。
2. Ajax特點(diǎn)
Ajax技術(shù)的特點(diǎn)包括：
- 異步通信：通過(guò)使用異步通信，用戶可以繼續(xù)與頁(yè)面交互，而無(wú)需等待服務(wù)器響應(yīng)。
- 數(shù)據(jù)交換：Ajax可以與服務(wù)器進(jìn)行數(shù)據(jù)交換，可以在不刷新整個(gè)頁(yè)面的情況下更新頁(yè)面的局部?jī)?nèi)容。
- DOM操作：Ajax可以使用JavaScript操作DOM，實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面的創(chuàng)建和更新。
- 增強(qiáng)用戶體驗(yàn)：由于Ajax可以快速地更新頁(yè)面的一部分，因此可以提供更快速、更流暢的用戶體驗(yàn)。
盡管Ajax中的“X”代表XML，但實(shí)際上，現(xiàn)代的Ajax應(yīng)用程序通常使用JSON、HTML或純文本格式來(lái)傳輸數(shù)據(jù)，而不是XML。
Ajax已經(jīng)成為現(xiàn)代Web應(yīng)用程序開(kāi)發(fā)的重要技術(shù)之一，被廣泛應(yīng)用于各種Web應(yīng)用，包括社交媒體、在線購(gòu)物以及各種在線工具和應(yīng)用程序。
3. Ajax 經(jīng)典應(yīng)用場(chǎng)景
1. 搜索引擎根據(jù)用戶輸入關(guān)鍵字，自動(dòng)提示檢索關(guān)鍵字
2. 動(dòng)態(tài)加載數(shù)據(jù)，按需取得數(shù)據(jù)【樹(shù)形菜單、聯(lián)動(dòng)菜單 ... 】
3. 改善用戶體驗(yàn)。【輸入內(nèi)容前提示、帶進(jìn)度條文件上傳 ... 】
4. 電子商務(wù)應(yīng)用。 【購(gòu)物車、郵件訂閱 ... 】
5. 訪問(wèn)第三方服務(wù)?！驹L問(wèn)搜索服務(wù)、 rss 閱讀器】
6. 頁(yè)面局部刷新 , 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 請(qǐng)求
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));
}
)
})
})總結(jié)
Json（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換格式，采用鍵值對(duì)的形式來(lái)表示數(shù)據(jù)。它廣泛應(yīng)用于Web開(kāi)發(fā)中，特別適合于前后端數(shù)據(jù)傳輸和存儲(chǔ)。
Ajax（Asynchronous JavaScript and XML）是一種在Web應(yīng)用中實(shí)現(xiàn)異步通信的技術(shù)。通過(guò)Ajax，前端可以發(fā)送異步請(qǐng)求到服務(wù)器，獲取數(shù)據(jù)并進(jìn)行頁(yè)面更新，而無(wú)需刷新整個(gè)頁(yè)面。這項(xiàng)技術(shù)使得用戶體驗(yàn)更加流暢，同時(shí)減輕了服務(wù)器的負(fù)擔(dān)。
Json和Ajax經(jīng)常配合使用。通過(guò)Ajax發(fā)送請(qǐng)求，服務(wù)器可以將數(shù)據(jù)以Json格式返回給前端，前端再解析Json數(shù)據(jù)進(jìn)行頁(yè)面渲染或其他操作。Json的簡(jiǎn)潔性和易讀性使得數(shù)據(jù)傳輸更加高效，而Ajax的異步通信則能提升用戶交互體驗(yàn)。
總的來(lái)說(shuō)，Json是一種數(shù)據(jù)格式，用于表示數(shù)據(jù)，而Ajax是一種實(shí)現(xiàn)異步通信的技術(shù)。它們的結(jié)合可以幫助開(kāi)發(fā)人員構(gòu)建高效、流暢的Web應(yīng)用。
到此這篇關(guān)于Java 數(shù)據(jù)交換 Json 和 異步請(qǐng)求 Ajax的文章就介紹到這了,更多相關(guān)Java 數(shù)據(jù)交換和異步請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
網(wǎng)上百度了很多FTP的java?工具類，發(fā)現(xiàn)文章代碼都比較久遠(yuǎn)，且代碼臃腫，即使搜到了代碼寫的還可以的，封裝的常用操作方法不全面。所以本文將手寫一個(gè)好用的Java?FTP操作工具類，需要的可以參考一下2022-04-04
通過(guò)端口1433連接到主機(jī)127.0.0.1的 TCP/IP 連接失敗，錯(cuò)誤:“connect timed out”的解
這篇文章主要介紹了通過(guò)端口1433連接到主機(jī)127.0.0.1的 TCP/IP 連接失敗，錯(cuò)誤:“connect timed out”的解決方法,需要的朋友可以參考下2015-08-08
SpringBoot項(xiàng)目Jar包如何瘦身部署的實(shí)現(xiàn)
這篇文章主要介紹了SpringBoot項(xiàng)目Jar包如何瘦身部署的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
本文主要介紹了springboot中使用雪花算法生成雪花ID，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
大家在日常Java開(kāi)發(fā)中，可能會(huì)需要把程序窗口定位在屏幕中間，那該如何操作呢，下面來(lái)一起看看。2016-08-08
springboot集成測(cè)試容器重啟問(wèn)題的處理
這篇文章主要介紹了springboot集成測(cè)試容器重啟問(wèn)題的處理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-11-11
Java消息隊(duì)列JMS實(shí)現(xiàn)原理解析
這篇文章主要介紹了Java消息隊(duì)列JMS實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
springmvc—handlermapping三種映射方式
這篇文章主要介紹了springmvc—handlermapping三種映射方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
這篇文章主要介紹了Java?流處理之收集器,本文以記錄?Record?為例，結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
堆是給開(kāi)發(fā)人員用的上面說(shuō)的就是，是在JVM啟動(dòng)時(shí)創(chuàng)建；非堆是留給JVM自己用的，用來(lái)存放類的信息的，本文將詳細(xì)介紹Tomcat內(nèi)存溢出，需要了解更多的朋友可以參考下2012-11-11