一、Json
1.1 概述
SON(JavaScript Object Notation, JS 对象表示) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于机器解析和生成，并有效地提升网络传输效率。
主要应用就是，将前端传来的字符串转为java类对象，或者将java类对象转为字符串。
1.2 语法和值
【[ ] 】 表示数组
【{ } 】 表示对象
【""】【’’】 表示是属性名或字符串类型的值
【：】 表示属性和值之间的分隔符
【，】表示多个属性的间隔符或者是多个元素的间隔符
数字（整数或浮点数）
字符串（在双引号或单引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null
1.3 html中演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Json语法</title>
</head>
<body>
</body>
<script type="text/javascript">
var str = '{"name": "王五", "age":25, "address":"北京"}';
var person = JSON.parse(str);//将字符串str转为person类对象
console.log(person.name + "+" + person.age + "+" + person.address);
</script>
</html>
1.4 后端Json解析
需要使用jar包工具类：
（1）FastJson ，由阿里巴巴提供【常用】
（2）Jackson，国外的解析工具【难用】
创建对象一个Person类，包含姓名、年龄和地址。
FastJson解析
ublic class ObjectToJson {
public static void main(String[] args) {
fastjson1();
fastjson2();
}
/**
* 将java对象转为Json格式字符串
* (1)阿里的工具fastjson
* 注意事项：1.如果不需要某个属性，可以在Person类中的某一个【属性】上面加上注解@JSONField(serialize = false)
* 2.构造方法中写入【JSON.toJSONString(p1, SerializerFeature.PrettyFormat)】，美化格式输出
* 3.构造方法写入【JSON.toJSONString(p1, SerializerFeature.WriteMapNullValue)】，属性为空也打印
* 4.构造方法中写入【JSON.toJSONString(p1, SerializerFeature.WriteNullStringAsEmpty)】，属性为空以【""】打印
* 5.关闭循环检测SerializerFeature.DisableCircularReferenceDetect，默认是开启的
* 应对的情况是：A类中有一个属性是要创建B类对象，B类中有一个属性是创建A类对象，这样会发生死循环
* 但是，当使用List集合，两次添加同一个对象的时候，会发生错误 {"$ref":"$[0]"}，这里可以展示关闭
*/
public static void fastjson1() {
Person p1 = new Person("张三", 27, null);
String jsonP1 = JSON.toJSONString(p1, SerializerFeature.WriteNullStringAsEmpty);
System.out.println(jsonP1);
Person p2 = new Person("李四", 22, "上海");
Person p3 = new Person("王五", 25, "广州");
List<Person> persons = new ArrayList<>();
persons.add(p1);
persons.add(p2);
persons.add(p3);
persons.add(p1);
String jsonPersons = JSON.toJSONString(persons, SerializerFeature.WriteMapNullValue, SerializerFeature.DisableCircularReferenceDetect);
System.out.println(jsonPersons);
}
/**
* 使用json字符串转为java对象，注意字符串的书写格式
*/
public static void fastjson2() {
String str = "{\"name\":\"张三\",\"age\":20, \"address\":\"北京\"}";
Person person = JSON.parseObject(str, Person.class);
System.out.println(person.toString());
}
}
JackSon解析【了解】
public class JacksonDemo {
public static void main(String[] args) throws IOException {
jackson1();
jackson2();
}
/**
* 使用jackson将对象转字符串
* 注意事项：
* （1）@JsonIgnore注解用于排除某个属性，这样该属性就不会被Jackson序列化和反序列化
* （2）mapper.enable(SerializationFeature.INDENT_OUTPUT);美化输出
* （3）允许序列化空的属性类（否则会抛出异常）mapper.disable(SerializationFeature.FAIL_ON_EMPTY_BEANS);
*/
public static void jackson1() throws JsonProcessingException {
Person p1 = new Person("张三", 27, null);
Person p2 = new Person("李四", 22, "上海");
Person p3 = new Person("王五", 25, "广州");
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.enable(SerializationFeature.INDENT_OUTPUT, SerializationFeature.FAIL_ON_EMPTY_BEANS);//美化
String str1 = objectMapper.writeValueAsString(p1);
System.out.println(str1);
ArrayList<Person> list = new ArrayList<>();
list.add(p1);
list.add(p2);
list.add(p3);
String str = objectMapper.writeValueAsString(list);
System.out.println(str);
}
/**
* 字符串转对象
*/
public static void jackson2() throws IOException {
String str = "{\"name\":\"张三\",\"age\":20, \"address\":\"北京\"}";
ObjectMapper objectMapper = new ObjectMapper();
Person person = objectMapper.readValue(str, Person.class);
System.out.println(person.toString());
}
}
二、AJAX技术
2.1 概述
AJAX 是一种在无需重新加载整个网页的情况下，能够实现局部更新的技术。
AJAX = 异步 JavaScript 和 XML。 (Asynchronized JavaScript And XML)
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2.2 工作原理
AJAX是基于现有的Internet标准，并且联合使用它们：
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)、JSON
2.3 基本步骤
- 创建XMLHTTPRequest对象
- 设置onreadystatechange回调函数
- open() 打开连接
- send() 发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX入门</title>
</head>
<body>
<div id="box"></div>
<input type="button" value="发送ajax请求" onclick="sendajax()">
<script type="text/javascript">
function sendajax() {
//1.创建XMLHTTPRequest
var xhr = new XMLHttpRequest();
//2.设置onreadystatechange回调函数，每次运行完毕send()方法，就再回来执行
xhr.onreadystatechange = function () {
//readyState==4表示服务器响应完毕，status为链接状态
if (xhr.readyState==4 && xhr.status == 200) {
//将从xml文件获取的数据写入到id为box的标签位置，进行展示
document.getElementById("box").innerHTML = xhr.responseText;
}
}
//3.open()打开链接，这里是get请求
xhr.open("get","book.xml",true);
//4.发送请求
xhr.send();
}
</script>
</body>
</html>
注意事项
- 创建XMLHttpRequest对象，起初并非所有浏览器都支持，所以应对老版本浏览器，需要使用以下语句，进行兼容处理
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); //判断浏览器是否支持ajax
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
- onreadystatechange回调函数
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪 |
| status | 200: "OK"404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
- XMLHttpRequest请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步） |
| send(string) | 将请求发送到服务器。string：仅用于 POST 请求 |
- 使用post请求方式注意的问题
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头
//使用post请求的时候，信息不能直接在url里呈现，必须放到send方法中
xmlhttp.open("POST","/try/ajax/servlet4",true);
//请求头类型其实就是form表单的enctype属性值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username=leilei&password=123");
2.4 案例——注册的时候提示用户名是否可用
servlet部分
@WebServlet(name = "CheckUserServlet", value = "/checkuser")
public class CheckUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
List<String> users = new ArrayList<>();
//集合，模拟数据库
Collections.addAll(users, "张三", "李四", "王五");
if (users.contains(username)) {
//这里可以使用write和print，但是不能使用println，因为换行也会输出，导致前端接收的数据带有换行字符，从而出错
response.getWriter().println("1"); //有相关的用户名，就发送1
} else {
response.getWriter().write("0"); //没有就发送0，可以注册
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
ajax部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style type="text/css">
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<h1>用户注册</h1>
<form action="" method="post">
<!--onblur当失去焦点的时候启动，这里只，一旦离开这个输入框，就开始判断-->
<input type="text" name="username" placeholder="用户名" onblur="checkuser(this)"><span id="span1"></span><br/>
<input type="password" name="password" placeholder="密码"><br/>
<input type="password" name="repassword" placeholder="再次输入密码"><br/>
<input type="email" name="email" placeholder="邮箱"><br/>
<input type="tel" name="phone" placeholder="手机号"><br/>
<button type="submit">提交</button>
</form>
<script type="text/javascript">
function checkuser(obj) {
var username = obj.value;
//判断是否为空的常用手段
if (username == null || username.trim().length == 0) {
return; //为空，不做任何操作
}
//如果不是空，则进行判断
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var span1 = document.getElementById("span1");
if (xhr.responseText == "1") {
span1.innerHTML="用户名已存在";
span1.className = "red"; //将其赋予类名red，可以由前面的css中的.red进行处理
} else {
span1.innerHTML="恭喜你，用户名可用";
span1.className = "green";
}
}
}
//让servlet以为页面有变化，进行刷新username，但是不跳转页面
xhr.open("get", "checkuser?username=" + username + "&n=" + Math.random(), true);
xhr.send();
}
</script>
</body>
</html>
2.5 案例——Ajax与Json的联用
servlet部分，这里要注意，编码更改，让浏览器按照json格式解读
@WebServlet(name = "JsonServlet",value = "/json")
public class JsonServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//要告诉浏览器json格式
response.setContentType("application/json;charset=utf-8");
/**
* 内容类型（MIME）多用途互联网扩展类型，告诉浏览器文件是什么类型，并用相应浏览器打开
* text/html text/css text/javascript text/json application/json image/jpg image/png image/bmp
*/
Person person = new Person("李老欧六", 30, "五棵松");
String jsonstr = JSON.toJSONString(person);
response.getWriter().println(jsonstr);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求json数据</title>
</head>
<body>
<input type="button" value="ajax请求json" onclick="sendajax3()">
<script type="text/javascript">
function sendajax3() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText); //打印获取的数据文本
var p = JSON.parse(xhr.responseText); //将文本转为对象
alert(p.name + " " + p.age + " " + p.address);
}
}
xhr.open("get", "json", true);
xhr.send();
}
</script>
</body>
</html>
三、IDEA配置Json插件
IDEA 插件：可以将JSON字符串转为类，进行批量处理，非常方便。
在对应的类中，右键选择Generate，或者使用ALT+Insert按键，然后选择GsonFormat，将Json字符串复制过来，直接生成即可。
2245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
