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 案例: 检测用户名是否已经被注册

需求：用户输入用户名，鼠标移除后，对用户名进行判断，提示用户名是否可用。
步骤：
1. 准备Servlet，对用户名进行校验，并返回结果(是否可用)；
2. 为页面输入框绑定鼠标移除事件；
3. 进行异步请求，获取响应结果；
4. 根据结果，动态添加 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>

单体架构项目后端开发（2）：JSON和Ajax

文章目录

1、JSON

1.1 JSON简述

1.2 XML与JSON的区别

1.3 JSON语法格式

1.4 JSON数据的转换

1.4.1 FastJson介绍

1.4.2 FastJson的使用

1.4.3 将 Java 对象转换为 JSON 格式

1.4.4 JSON 字符串转换为 Java 对象

2、Ajax

2.1 Ajax概述

2.1.1 什么是Ajax

2.1.2 Ajax 的作用

2.1.3 Ajax的好处

2.1.4 异步与同步

2.2 JS方式ajax的实现

2.3 jQuery框架的ajax

2.3.1 JQuery框架的ajax简介

2.3.2 GET请求方式

2.3.3 POST请求方式

2.3.4 Ajax请求方式

2.4 案例: 检测用户名是否已经被注册

猜你喜欢