1、JSON
1.1 JSON简述
- JSON(JavaScript Object Notation) JavaScript对象表示法(JSON源于JS)。
- JSON的特点:
- JSON 是一种轻量级的数据交换格式。
- JSON采用完全独立于语言的文本格式,就是说不同的编程语言JSON数据是一致的。
- JSON易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
1.2 XML与JSON的区别
- XML : 可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言。
- JSON: (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 相同点:它们都可以作为一种数据交换格式。
- 二者区别:
- XML是重量级的,JSON是轻量级的,XML在传输过程中比较占带宽,JSON占带宽少,易于压缩。
- XML和JSON都用在项目交互下,XML多用于做配置文件,JSON用于数据交互。
- JSON独立于编程语言存在,任何编程语言都可以去解析JSON。
1.3 JSON语法格式
{
"id": 110,
"name": "李会长",
"age": 24
}
语法注意:
- 外面由{}括起来;
- 数据以"键 : 值"对的形式出现(其中键多以字符串形式出现,值可取字符串,数值,甚至其他json对象);
- 每两个"键 : 值"对以逗号分隔(最后一个"键:值"对省略逗号;
- 参数值如果是String类型,就必须加引号,如果是数字类型,引号可加可不加;
遵守上面4点,便可以形成一个json对象。
代码示例::
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
//自定义JSON数据格式 (Java中的对象)
var person = {"name":"tom","sex":"女", "age":12};
console.log(person);
//数组格式
var persons = {"person":[{"name":"tom","sex":"女", "age":12},{"name":"jack","sex":"男", "age":22}]};
console.log(persons);
//集合
var list = [{"name":"老五","sex":"女", "age":12},{"name":"会长","sex":"男", "age":12}];
console.log(list);
</script>
</head>
<body>
</body>
</html>
1.4 JSON数据的转换
目前,前后端的ajax通讯几乎用的都是json格式的,所以在开发的过程中,经常会涉及到JSON数据的转换。
1.4.1 FastJson介绍
- FastJson 是一个 Java 库,可以将 Java 对象转换为 JSON 格式,当然它也可以将 JSON 字符串转换为 Java 对象。
- FastJson特点如下:
- 能够支持将Java Bean序列化成JSON字符串,也能够将JSON字符串反序列化成Java Bean。
- FastJson操作JSON的速度是非常快的。
- 无其他包的依赖,使用比较方便。
1.4.2 FastJson的使用
- 在Maven项目中使用FastJson库,需要提前在Maven的配置文件中添加此FastJson包的依赖。
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.3</version>
</dependency>
<dependency>
<groupId>com.colobu</groupId>
<artifactId>fastjson-jaxrs-json-provider</artifactId>
<version>0.3.1</version>
</dependency>
1.4.3 将 Java 对象转换为 JSON 格式
- 定义一个名为 Person 的 JavaBean类。
public class Person {
private String username;
private int age;
private String birthday;
get/set方法
}
- 可以使用 JSON.toJSONString() 将 Java 对象转换为 JSON 对象:
public class TestFastJSON {
//Java对象转JSON
@Test
public void javaBeanToJSON(){
//创建Person对象
Person p = new Person("码云",15, DateUtils.getDateFormart());
//使用JSON对象的 toString方法将对象转换为JOSN数据
String s = JSON.toJSONString(p);
System.out.println(s); //{"age":15,"birthday":"2020-07-03 19:54:33","username":"码云"}
}
//List集合转Json
@Test
public void ListToJSON(){
//创建Person对象
Person p1 = new Person("码云",15, DateUtils.getDateFormart());
Person p2 = new Person("虎子",13, DateUtils.getDateFormart());
Person p3 = new Person("小斌",18, DateUtils.getDateFormart());
List<Person> list = new ArrayList<>();
Collections.addAll(list,p1,p2,p3);
//使用JSON对象的 toString方法将对象转换为JOSN数据
String s = JSON.toJSONString(list);
System.out.println(s);
//[{"age":15,"birthday":"2020-07-03 19:59:05","username":"码云"},{"age":13,"birthday":"2020-07-03 19:59:05","username":"虎子"},{"age":18,"birthday":"2020-07-03 19:59:05","username":"小斌"}]
}
}
- FastJson中的 @JSONField 注解
- 通过 @JSONField 我们可以自定义字段的名称进行输出,并控制字段的排序,还可以进行序列化标记。
- 指定name属性,字段的名称;
- 使用 ordinal属性,指定字段的顺序;
- 使用 serialize属性,指定字段不序列化;
@Data
public class Person {
//自定义输出的名称, 并且进行输出排序
@JSONField(name="USERNAME",ordinal = 1)
private String username;
@JSONField(name="AGE",ordinal = 2)
private int age;
//排除不需要序列化的字段
@JSONField(serialize = false)
private String birthday;
public Person() {
}
public Person(String username, int age, String birthday) {
this.username = username;
this.age = age;
this.birthday = birthday;
}
}
1.4.4 JSON 字符串转换为 Java 对象
- JSON.parseObject()
- 可以使用 JSON.parseObject() 将 JSON 字符串转换为 Java 对象。
- 注意反序列化为对象时,必须要有默认无参的构造函数,否则会报异常。
- JSON.parseArray()
- 可以使用 JSON.parseArray() 将 JSON 字符串转换为 集合对象。
//JSON转Java对象
@Test
public void JSONToJavaBean(){
// JSON字符串转换为Person对象
String json = "{\"age\":15,\"birthday\":\"2020-07-03 19:54:33\",\"username\":\"码云\"}";
Person person = JSON.parseObject(json, Person.class);
System.out.println(person);
// JSON字符串转换为集合对象
String json2 ="[{\"age\":15,\"birthday\":\"2020-07-03 19:59:05\",\"username\":\"码云\"},{\"age\":13,\"birthday\":\"2020-07-03 19:59:05\",\"username\":\"虎子\"},{\"age\":18,\"birthday\":\"2020-07-03 19:59:05\",\"username\":\"小斌\"}]";
List<Person> list = JSON.parseArray(json2,Person.class);
System.out.println(list);
}
2、Ajax
2.1 Ajax概述
传统的网页如果需要更新内容,必须重载整个网页页面。每当用户向服务器发送请求,哪怕只是需要更新一点点的局部内容,服务器都会将整个页面进行刷新。这种方式的缺点是:
- 性能会有所降低 (一点内容,就刷新整个页面!)
- 用户的操作页面会中断(整个页面被刷新了)
2.1.1 什么是Ajax
- Ajax 即"Asynchronous Javascript And XML",是指一种创建交互式网页应用的网页开发技术。
- Ajax = 异步 JavaScript 和 XML。
- Ajax是客户端与服务器进行交互时,可以【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术
2.1.2 Ajax 的作用
- Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(局部更新)。
2.1.3 Ajax的好处
- 减轻服务器负担,按需要获得数据。
- 无需刷新更新页面,减少用户的实际和心理的等待时间。
- 只更新部分页面,有效利用带宽。
- 主流浏览器都支持Ajax。
2.1.4 异步与同步
- 浏览器访问服务器的方式
- 同步访问:客户端必须等待服务器端的响应,在等待过程中不能进行其他操作。
- 异步访问:客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作。
2.2 JS方式ajax的实现
- JS的ajax:出现最早。使用一个对象XmlHttpRequest对象。专门用于进行ajax请求发送,和响应的接收。
- 使用ajax发请求,使用ajax接收响应,使用JS进行页面刷新。
- 缺点:
- 若使用JS的AJAX技术,为了实现简单功能,就需要书写大量复杂代码。
- JS的AJAX代码,浏览器兼容性比较差。
2.3 jQuery框架的ajax
2.3.1 JQuery框架的ajax简介
- jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大。
- 与ajax操作相关的jquery方法,在开发中经常使用的有三种:POST、GET、AJAX
2.3.2 GET请求方式
通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能,如需复杂的ajax参数设置请使用$.ajax。
Get请求方式语法:
$.get(url,data,callback,type)
- 参数1:
url
请求路径; - 参数2:
data
请求时携带的数据
格式:key=value
或者 {username=’baby’, pwd:666}; - 参数3:
callback
响应成功后的回调函数; - 参数4:
type
响应的数据类型,有text、html、xml、json;
代码示例
//JQuery get方式发送异步请求
function run2() {
//1.参数1 url
var url = "/login";
//2.参数2 数据
var data = {username:"jack"};
//3.发送get请求
$.get(url,data,function (param) {
//data响应回来的内容体
alert("响应成功! 响应数据: " + param);
},"text");
}
2.3.3 POST请求方式
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能,如需复杂的ajax参数设置请使用$.ajax。
Post请求方式语法:
$.post(url,data,callback,type)
里面的四个参数和get方式是一样,不一样的是请求方式的不同。
代码示例
//JQuery post方式发送异步请求
function run3() {
//1.参数1 url
var url = "/login";
//2.参数2 数据
var data = {username:"lucy"};
//3.发送get请求
$.post(url,data,function (param) {
//data响应回来的内容体
alert("响应成功! 响应数据: " + param);
},"text");
}
2.3.4 Ajax请求方式
$.ajax()方法可以更加详细的设置底层的参数。该方法通常用于其他方法不能完成的请求。
Ajax请求方式语法:
- 方式1: jQuery.ajax({[settings]})
- 方式2: $.ajax({})
settings是一个js字面量形式的对象,格式是键值对{name:value, name:value },常用的name属性名如下:
代码示例
//Ajax方式 发送请求
function run4() {
$.ajax({
url:"/login",
async:true, //是否异步
data:{username:"tom"},
type:"POST", //请求方式
dataType:"text", //返回数据的数据类型
success:function (param) {
alert("响应成功!! " + param)
},
error:function () {
alert("响应失败!!")
}
});
}
2.4 案例: 检测用户名是否已经被注册
- 需求:用户输入用户名,鼠标移除后,对用户名进行判断,提示用户名是否可用。
- 步骤:
- 准备Servlet,对用户名进行校验,并返回结果(是否可用);
- 为页面输入框绑定鼠标移除事件;
- 进行异步请求,获取响应结果;
- 根据结果,动态添加 HTML代码;
- 后台 Servlet
@WebServlet("/checkName")
public class CheckNameServelt extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//获取姓名
String username = req.getParameter("username");
//封装数据
HashMap<String,Object> map = new HashMap<>();
//判断用户是否存在
if("tom".equals(username)){
map.put("flag",true);
map.put("msg","用户名已经被占用!");
String data = JSON.toJSONString(map);
resp.getWriter().print(data);
}else{
//用户名未被使用
map.put("flag",false);
map.put("msg","用户名可以使用!");
String data = JSON.toJSONString(map);
resp.getWriter().print(data);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
- 前台JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>new jsp</title>
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$("#username").blur(function () {
//获取用户名
var name = $(this).val();
//判断用户名不为空
if(name != null && name != ""){
$.ajax({
url:"/checkName",
type:"GET",
data:{username:name},
dataType:"json",
success:function (data) {
if(data.flag){
//设置span内容体
$("#spanMsg").html("<font color='red'>" + data.msg+ "</font>");
}else if(!data.flag){
$("#spanMsg").html("<font color='green'>"+ data.msg + "</font>");
}
},
error:function () {
alert("请求处理失败!")
}
});
}
})
});
</script>
</head>
<body>
<form action="#" method="post">
用户名: <input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="spanMsg" style="color:red"></span><br>
密码: <input type="text" name="password" placeholder="请输入密码"><br>
</form>
</body>
</html>