JSON

1、什么是 JSON?

1、JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。这样就使得 JSON 成为理想的数据交换格式。
2、json 是一种轻量级的数据交换格式（轻量级指的是跟 xml 做比较）
3、数据交换指的是客户端和服务器之间业务数据的传递格式

1.1、JSON 在 JavaScript 中的使用

1.1.1、json 的定义：

1、json 是由键值对组成，并且由花括号（大括号）包围。
2、每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间进行逗号进行分隔。
案例：

image.png

1.1.2、json的访问：

1、json 本身是一个对象。
2、json 中的 key 我们可以理解为是对象中的一个属性。
3、json 中的 key 访问就跟访问对象的属性一样： json 对象.key
访问案例：

image.png

1.1.3、json 的两个常用方法：

json 的存在有两种形式。
1、一种是：对象的形式存在，我们叫它 json 对象。
2、一种是：字符串的形式存在，我们叫它 json 字符串。
3、一般我们要操作 json 中的数据的时候，需要 json 对象的格式。
4、一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。
JSON.stringify() 把 json 对象转换成为 json 字符串
JSON.parse() 把 json 字符串转换成为 json 对象
案例：

image.png

1.2、JSON 在 java 中的使用

1.2.1、javaBean 和 json 的互转

image.png

1.2.2、List 和 json 的互转

image.png

1.2.3、map 和 json 的互转

image.png

Ajax

2.1、什么是 AJAX 请求：

1、AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
2、ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
3、Ajax 请求的局部更新，浏览器地址栏不会发生变化
4、局部更新不会舍弃原来页面的内容

2.2、原生 AJAX 请求的示例：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/21
  Time: 19:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<label id="show">初始化</label><br>
用户名：<input type="text" name="uname"><br>
密码：<input type="text" name="upwd"><br>
<input type="button" value="提交" onclick="checkname()"><br>

<button onclick="ajaxRequest()">写法一</button>
<button onclick="checkname()">写法二</button>

<%--写法一--%>
<script type="text/javascript">
    // 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 test(Servlet) 中 javaScriptAjax
    function ajaxRequest() {

        //  1、我们首先要创建 XMLHttpRequest
        var xmlhttpRequest = new XMLHttpRequest();

        //  2、调用 open 方法设置请求参数
        //  参数（请求方法，请求地址，是否异步）
        xmlhttpRequest.open('POST', 'http://localhost:8081/book/test?action=javaScriptAjax', true);

        //  4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
        xmlhttpRequest.onreadystatechange = function () {
            if (xmlhttpRequest.readyState == 4 && xmlhttpRequest.status == 200) {
                //获取返回过来的字符串 -->并且转为 JSON 对象
                var jsonObj = JSON.parse(xmlhttpRequest.responseText);

                // 把响应的数据显示在页面
                document.getElementById("show").innerHTML = jsonObj.uid + '&&' + jsonObj.uname;
            }
        };
        //  3、调用 send 方法发送请求
        xmlhttpRequest.send();
    }

</script>


<%--写法二--%>
<script type="text/javascript">
    var httpRequest = null;

    function checkname() {
        var nn = document.getElementsByName("uname");
        var np = document.getElementsByName("upwd");
        var rename = nn[0].value;
        var repwd = np[0].value;

        if (rename == "" && repwd == "") {
            return;
        }
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    httpRequest = new XMLHttpRequest();
                    if (httpRequest.overrideMimeType) {
                        httpRequest.overrideMimeType("text/xml");
                    }
                } catch (e) {
                }
            }
        }
        if (httpRequest == null) {
            alert("浏览器不支持XMLHttpRequest");
            return;
        }
        httpRequest.open("post", "http://localhost:8081/book/test?action=ajaxTest", true);//请求方式，请求地址，是否异步
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        httpRequest.onreadystatechange = dataCheckBack;
        httpRequest.send("uname=" + rename + "&upwd=" + repwd);
    }

    //异步回调数据的处理方法
    function dataCheckBack() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            document.getElementById("show").innerHTML = httpRequest.responseText;
        }
    }
</script>
</body>
</html>

2.3、jQuery 中的 AJAX 请求

2.3.1、$.ajax 方法：

image.png

image.png

2.3.2、$.get 方法和$.post 方法：

image.png

image.png

2.3.3、$.getJSON 方法：

image.png

image.png

2.3.4、表单序列化 serialize()：
serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接

image.png