1、什么是JSON
JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，而且很多语言都提供了对json的支持（包括c,c++,c#,JavaScript，Java，python等），这样就使得JSON成为理想的数据交换语言。
轻量级指的是和xml作比较
数据交换指的是客户端和服务器端之间业务数据的传递格式
json的存在有两种形式：
1、对象的形式存在，json对象
2、字符串的形式存在，json字符串
一般要在客户端与服务器之间进行数据交换时，使用json字符串
这两种形式可以互相转换。
将json对象转为字符串格式使用JSON.stringify(json对象)
将json字符串转为对象格式使用JSON.parse(json字符串)
1.1、JSON在JavaScript中的使用
json是由键值对组成，并且由大括号{}包围。每个键由引号引起来，键和值之间使用冒号进行分割，多组键值对之间使用逗号进行分隔。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// json的定义
let jsonObj = {
"key1" : "value1",
"key2" : 2,
"key3" : [1,23,"asda",{"keyArr1":1}],
"key4" : {"key":"value"}
}
// json的访问
console.log(jsonObj.key1);
console.log(jsonObj.key2);
// json中的数组可以直接通过这种方式遍历访问
for (let i = 0; i < jsonObj.key3.length;i++) {
// key3数组的遍历访问
console.log(jsonObj.key3[i]);
}
console.log(jsonObj.key4);
// 访问json中对象的值
console.log(jsonObj.key4.key)
// json对象转字符串
let jsonString = JSON.stringify(jsonObj);
console.log(typeof jsonString)
// json字符串转json对象
let jsonOObj = JSON.parse(jsonString);
console.log(typeof jsonOObj)
console.log(jsonOObj.key1);
console.log(jsonOObj.key2);
</script>
</head>
<body>
</body>
</html>
1.2、JSON在Java中的使用
使用Java写JSON需要外部依赖，我这里使用的是gson-2.2.4.jar，可以在阿里镜像找一下导过来使用
Person代码如下：
package document.json;
/*
@author zhangJH
@create 2023-06-28-12:55
*/
public class Person {
private Integer id;
private String name;
@Override
public String toString() {
return "Person{" +
"id=" + id +
", name='" + name + ''' +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Person() {
}
public Person(Integer id, String name) {
this.id = id;
this.name = name;
}
}
测试代码如下
package document.json;
/*
@author zhangJH
@create 2023-06-28-12:56
*/
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import org.junit.Test;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class JsonTest {
// javaBean和json的互转
@Test
public void test1(){
Person wd = new Person(1, "无敌战神");
Gson gson = new Gson();
// toJson方法可以把Java对象转换为json字符串
String s = gson.toJson(wd);
System.out.println(s);
// 还可以将字符串转为对象
Person person = gson.fromJson(s, Person.class);
System.out.println(person);
}
// List和json的互转
@Test
public void test2(){
List<Person> list = new ArrayList<Person>();
list.add(new Person(1,"1"));
list.add(new Person(2,"2"));
Gson gson = new Gson();
// 把List集合转成json字符串
String s = gson.toJson(list);
System.out.println(s);
// 将json字符串转为指定类型的List，需要创建一个类
// 这个类要继承于"TypeToken"，且要指定泛型为你转换回去的那个类ArrayList<Person>或List<Person>
List<Person> personList = gson.fromJson(s, new ListTryJson().getType());
System.out.println(personList);
}
// map和json的互转
@Test
public void test3(){
Map<Integer,Person> map = new HashMap<Integer,Person>();
map.put(1, new Person(1,"1"));
map.put(2, new Person(2,"2"));
map.put(3, new Person(3,"3"));
Gson gson = new Gson();
// 把map集合转为json字符串
String s = gson.toJson(map);
System.out.println(s);
// 把json字符串转为map集合(使用匿名内部类的方式)
Map<Integer,Person> o = gson.fromJson(s, new TypeToken<HashMap<Integer,Person>>(){}.getType());
System.out.println(o.get(1));
}
}
ListTryJson代码如下
package document.json;
/*
@author zhangJH
@create 2023-06-28-13:14
*/
import com.google.gson.reflect.TypeToken;
import java.util.List;
import java.util.Map;
public class ListTryJson extends TypeToken<List<Person>> {
}
2、Ajax请求
2.1、什么是Ajax请求
Ajax是一种创建交互式网页应用的网页开发技术，也是一种浏览器通过js异步发起请求，局部更新页面的技术。
2.2、原生Ajax请求的示例
web.xml文件需要配置servlet,且需要导入gson的jar包
ajax.html代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
let XmlHttpRequest = new XMLHttpRequest();
// 2、调用open方法设置请求参数
// 请求方式为get，请求地址为http://localhost:8080/Ajax_i18n/ajaxServlet,是否异步:true
XmlHttpRequest.open("GET", "http://localhost:8080/Ajax_i18n/ajaxServlet?action=javaScriptAjax", true);
// 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
XmlHttpRequest.onreadystatechange = function () {
// 当状态码为4并且状态为200时
if (XmlHttpRequest.readyState === 4 && XmlHttpRequest.status === 200) {
// 得到字符串的数据
let Text = XmlHttpRequest.responseText;
// 转换为对象
let JsonText = JSON.parse(Text);
document.getElementById("div01").innerText = `id为${JsonText.id}姓名为${JsonText.name}`;
}
}
// 3、调用send方法发送请求
XmlHttpRequest.send()
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
AjaxServlet.java代码示例：
package json;
/*
@author zhangJH
@create 2023-06-28-14:07
*/
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class AjaxServlet extends BaseServlet {
protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("接收到了Ajax的请求");
String a = "Hello";
Person person = new Person(1,"haha");
Gson gson = new Gson();
// 将person对象转为字符串后传递,这样就可以利用流的形式传递了
String s = gson.toJson(person);
resp.getWriter().write(s);
System.out.println("完成");
}
}
2.3、Ajax的特点
Ajax的局部更新：浏览器地址栏不会发生变化，且局部更新不会舍弃原来页面的内容
异步：即使数据有所卡住，也不会对后面的代码有所影响，它会让后面的代码继续执行，而前面的代码执行完后再过来，不会完全卡住。
同步：数据卡住，你得等数据好了，才能执行下一步代码，否则无法执行，会一直卡死在那里
Ajax是异步的，效果很好。
