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

暮晨夜雪

 关注

阅读 51

2022-02-23

文章目录

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
}

语法注意：

  1. 外面由{}括起来；
  2. 数据以"键 : 值"对的形式出现（其中键多以字符串形式出现，值可取字符串，数值，甚至其他json对象）；
  3. 每两个"键 : 值"对以逗号分隔（最后一个"键：值"对省略逗号；
  4. 参数值如果是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 格式

  1. 定义一个名为 Person 的 JavaBean类。
public class Person {
    private String username;
    private int age;
    private String birthday;
 	get/set方法
}
  1. 可以使用 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":"小斌"}]
    }
}
  1. 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>

相关推荐

Java后端开发——Ajax、jQuery和JSON

九点韶留学 15 0 0

JSON和AJAX

技术只适用于干活 95 0 0

Ajax和Json

婉殇成长笔记 59 0 0

AJAX和JSON详解

心如止水_c736 25 0 0

如何使用AJAX和JSON技术进行Web开发

老北京的热干面 78 0 0

javaweb搭配ajax和json

月白色的大狒 40 0 0

单体架构demo

一ke大白菜 47 0 0

Json和Ajax的学习

琛彤麻麻 90 0 0

AJAX和JSON的学习

无聊到学习 66 0 0

单体架构、集群架构和分布式架构概述

祈澈菇凉 28 0 0

精彩评论（0）

0 0 举报