【JavaWeb】----＞AJAX&JSON

---

一、AJAX

1.概念

  Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术,是异步的JavaScript和XML。

  通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某
部分进行更新。传统的网页(不使用Ajax)如果需要更新内容，必须重载整个网页页面。

异步：

客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作

同步：

客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作

2.实现方式

原生的JS实现方式

    <script>
        //定义方法
        function fun() {
            //发送异步请求
            //1、创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2、建立连接
            /*
            参数：
                1、请求方式：GET、POST
                    get方式，请求参数在URL后边拼接，send方法为空参
                    post方式，请求参数在send中定义
                2、请求的URL
                3、同步或异步请求：true（异步）或false(同步)
             */
            xmlhttp.open("GET", "ajaxServlet?username=tom", true);

            //3、发送请求
            xmlhttp.send();
            //4、接收并处理来着服务的响应结果
            //获取方式：xmlhttp.responseText
            //当服务器响应成功后再获取
            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
            xmlhttp.onreadystatechange = function () {
                //判断readyState就绪状态是否为4，判断事件status响应状态码是否为200
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                    // document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
        }
    </script>

JQeury实现方式

1、$.ajax( )
语法：

$,ajax({键值对});

按例代码：

    <script>
        //定义方法
        function fun() {
            //使用$.ajax()发送异步请求
            $.ajax({
                url: "ajaxServlet",//请求路径
                type: "POST",//请求方式
                data: "username=jack&age=23",//请求参数方式一
                data: {"usernsme": "jack", "age": 23},//方式二
                success: function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error: function () {
                    alert("出错了");
                },//如果请求响应出现错误会执行的回调函数

                dataType: "text",//设置接收到的响应数据的格式
            });
        }
    </script>

2、$.get( )
语法：

$.get(url, [data], [callback], [type])

	url：请求路径
	data：请求参数
	callback：回调函数
	type：响应结果的类型

按例代码：

    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun() {
            $.get("ajaxServlet", {username: "rose"}, function (data) {
                alert(data);
            }, "text");
        }
    </script>

3、$.post( )

语法：

$.post(url, [data], [callback], [type])

按例代码：

二、JSON

1.概念

  JSON是JavaScript对象表示法，现在多用于存储和交换文本信息，进行数据的传输，JSON 比 XML 更小、更快，更易解析。

2.语法

基本规则

数据在名称/值对中：json数据是由键值对构成的
	键用引号(单双都行)引起来，也可以不使用引号
		值的取值类型：
			1. 数字（整数或浮点数）
			2. 字符串（在双引号中）
			3. 逻辑值（true 或 false）
			4. 数组（在方括号中）	{"persons":[{},{}]}
			5. 对象（在花括号中） {"address":{"province"："XX"....}}
			6. null
数据由逗号分隔：多个键值对由逗号分隔
花括号保存对象：使用{}定义json 格式
方括号保存数组：[]

按例代码：

    <script>
        //定义基本格式
        var parson = {"name": "张三", age: 23, 'gender': true};

        //1、获取name的值
        // var name = parson.name;
        var name = parson["name"];
        // alert(name);
        // alert(parson);
        //2、嵌套格式{}---->[]
        var persons = {
            "persons": [
                {"name": "张三", "age": 23, "gender": true},
                {"name": "李四", "age": 13, "gender": true},
                {"name": "王五", "age": 45, "gender": false}
            ]
        };
        //获取王五值
        var name1 = persons.persons[2].name;
        // alert(name1);
        // alert(persons);
        //2、嵌套格式[]---->{}
        var ps = [
            {"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 13, "gender": true},
            {"name": "王五", "age": 45, "gender": false}
        ];
        //获取李四值
        alert(ps[1].name);
        // alert(ps);
    </script>

获取数据

	1. json对象.键名
	2. json对象["键名"]
	3. 数组对象[索引]
	4. 遍历

循环取值按例：

<script>
        //定义基本格式
        var parson = {"name": "张三", age: 23, 'gender': true};

        //获取person对象中所有的键和值
        //for in循环
        /* for (var key in parson) {
             //获取不出来，因为相当于person."name"
             //     alert(key+":"+parson.key);
             alert(key + ":" + parson[key]);
         }*/

        //2、嵌套格式[]---->{}
        var ps = [
            {"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 13, "gender": true},
            {"name": "王五", "age": 45, "gender": false}
        ];
        //通过双层for循环获取ps的所有值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for (var key in p) {
                alert(key + ":" + p[key]);
            }
        }
    </script>

3.JSON和Java对象的相互转换

JSON转为Java对象

转换步骤：

1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
	1. readValue(json字符串数据,Class)

按例：

   //演示JSON字符串转为Java对象
    @Test
    public void test5() throws Exception {
        //1、初始化JSON字符串
        String json = "{\"gender\":\"女\",\"name\":\"小张\",\"age\":18}";
        //2、创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //3、转换为Java Person对象
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);
    }

Java对象转换JSON

转换步骤：

转换方法：

1. writeValue(参数1，obj)
   参数1：
   File：将obj对象转换为JSON字符串，并保存到指定的文件中
   Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
   OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
2. writeValueAsString(obj)：将对象转为json字符串

复杂的java对象转换有两种：
3. List：数组

4. Map：对象格式一致

在转换时如遇到日期格式无法达到想要的阅读方式时可在该属性的get方法上添加以下注解：

1. @JsonIgnore：排除属性。在读取内容时就会排除该属性。

2. @JsonFormat：属性值得格式化

 //    @JsonIgnore//忽略该属性
    @JsonFormat(pattern = "yyyy-MM-dd")//属性值格式化
    public Date getBirthdy() {
        return birthdy;
    }