目录
🌔4. JSON 对象和字符串对象转换(javaScript)
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)
2. 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)
<!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>注意事项和细节
5. JSON 在 java 中使用
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 集合方式 1
List<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 转换成为 json
String bookMapStr = gson.toJson(bookMap);
System.out.println("bookMapStr=" + bookMapStr + " 类 型 =" +
bookMapStr.getClass());
// 把 json 转成 map
Map<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基本介绍
AJAX 是开发者的梦想，因为您能够：
- 不刷新页面更新网页
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台向服务器发送数据
Ajax（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术。它通过在后台与服务器进行数据交换，使网页能够在无需重新加载整个页面的情况下更新部分内容。
🎈传统的网页交互方式是用户与服务器进行完整的页面请求和响应，即用户执行某个操作，服务器接收请求并返回完整的新页面。这种方式存在效率低下和用户体验差的问题。
📌而Ajax通过在后台使用JavaScript和XML或其他数据格式, 使网页能够
🌸在不刷新整个页面的情况下与服务器进行数据交互和部分内容更新🌸。
通过异步通信，Ajax 可以在用户完成某个操作之后，将用户请求发送到服务器，并在接收到服务器的响应后，动态地更新页面的相应部分，而不需要重新加载整个页面。
2. Ajax特点
尽管Ajax中的“X”代表XML，但实际上，现代的Ajax应用程序通常使用JSON、HTML或纯文本格式来传输数据，而不是XML。
Ajax已经成为现代Web应用程序开发的重要技术之一，被广泛应用于各种Web应用，包括社交媒体、在线购物以及各种在线工具和应用程序。
3. Ajax 经典应用场景
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));
}
)
})
})总结
Json（JavaScript Object Notation）是一种轻量级的数据交换格式，采用键值对的形式来表示数据。它广泛应用于Web开发中，特别适合于前后端数据传输和存储。
Ajax（Asynchronous JavaScript and XML）是一种在Web应用中实现异步通信的技术。通过Ajax，前端可以发送异步请求到服务器，获取数据并进行页面更新，而无需刷新整个页面。这项技术使得用户体验更加流畅，同时减轻了服务器的负担。
Json和Ajax经常配合使用。通过Ajax发送请求，服务器可以将数据以Json格式返回给前端，前端再解析Json数据进行页面渲染或其他操作。Json的简洁性和易读性使得数据传输更加高效，而Ajax的异步通信则能提升用户交互体验。
总的来说，Json是一种数据格式，用于表示数据，而Ajax是一种实现异步通信的技术。它们的结合可以帮助开发人员构建高效、流畅的Web应用。
