JSON和AJAX

一、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 基本步骤

  1. 创建XMLHTTPRequest对象
  2. 设置onreadystatechange回调函数
  3. open() 打开连接
  4. 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>
注意事项
  1. 创建XMLHttpRequest对象,起初并非所有浏览器都支持,所以应对老版本浏览器,需要使用以下语句,进行兼容处理
var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); //判断浏览器是否支持ajax
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
  1. onreadystatechange回调函数

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪
status200: "OK"404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

  1. XMLHttpRequest请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET 或 POSTurl:文件在服务器上的位置async:true(异步)或 false(同步)
send(string)将请求发送到服务器。string:仅用于 POST 请求
  1. 使用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字符串复制过来,直接生成即可。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值