日期：2021年12月10日

出处：黑马程序员JavaWeb全套教程，Java Web从基础到项目实战（IDEA版）

正文

AJAX

ASynchronous JavaScript And XML <==> 异步的JavaScript 和 xml

是一种无需重新加载整个网页的情况下，能够更新部分网页的技术（通过客户端后台和服务端的通信来实现）

同步和异步

AJAX实现方式

原生的JS实现(了解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax()</title>

    <script>
        function fun(){
            // 发送异步请求
            // 1.创建核心对象
            var xhttp;
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            //2.建立连接
            xhttp.open("GET", "ajaxServlet?username=ajax", false/*true为异步，false为同步*/);
            // 3.发送请求
            xhttp.send();
            // 4.接收并处理服务器的响应结果
            xhttp.onreadystatechange = function() {
                // 判断就绪状态和响应状态码
                if (this.readyState == 4 && this.status == 200) {
                    //获取服务器的响应结果
                    var responseText = xhttp.responseText;
                    alert(responseText);
                }
            }
        }
    </script>
</head>

<body>
<input type="button" value="发送请求" onclick="fun()">
<input>
</body>
</html>

注意：在建立连接的步骤中

get请求方式，请求参数在url后面拼接，send()方法为空参

post请求方式，请求参数在send()方法中定义

为了更好地体现同步与异步的区别可以设置如下

修改之后重新部署服务器

由于是同步请求所以文本框在提交之前是无法被点击的

就绪状态readyState和响应状态码status

JQuery实现方式

$.ajax()

它的书写格式类似于MySQL语句

注意：值一定不要忘记加双引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.ajax()</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
</head>
<script>
    //使用$.ajax发送异步请求
    $.ajax({
        url:"ajaxServlet",
        type:"POST",
        // data:"username=xiaofly"&&"age=21",
        data: {"username": "xiaofly","age":"21"},//请求参数
        success:function (data) {
            alert(data)
        },//响应成功后的回调函数
        dataType:"text"//设置接收到响应的数据格式
        //最后的键值对后面不要写逗号
    });
</script>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

$.get()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.get()</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
</head>
<script>

    function fun() {
        $.get("ajaxServlet",{username:"hong"},function (data) {
            alert(data)
        },"text")
    }

</script>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

$.post()方法和$ .get()方法大同小异，现阶段只是改变了方法名，所以这里就不再代码展示了

JSON

JavaScript Object Notation<==>JacaScript对象表示法

是一种数据格式

JSON现在多用于存储和交换文本信息的语法进行数据传输类似于xml

JSON基本语法

注意：

一、索引越界

二、在遍历时想把键值对都输出只能用 [ ]的方式

for (var key in one) {

//alert(key+"："+one.key); ❌

alert(key+"："+one[key]); ✔

}

<script>
    //基本格式
    var one = {"name":"张三",'age':22,address:"jh"}
    // alert(one);
    var name1 = one.name;
    var name2 = one["name"];
    // alert(name1);
    // alert(name2);
    for (var key in one) {
        // alert(key+"："+one.key);
        alert(key+"："+one[key]);
    }

    // 嵌套格式：[{},{},{},....]
    var two = [{"name": "zhangsan","age":23,"gender":true},
                {"name": "lisi","age":25,"gender":false}];
    // alert(two);
    var name3 = two[1].name;
    // alert(name3);

    //嵌套格式：{**:[...]
    var three = {"persons":[{"name": "zhangsan","age":23,"gender":true},
                            {"name": "lisi","age":25,"gender":false}
        ]
    };
    // alert(three);
    var name4 = three.persons[1].name;
    // alert(name4);

</script>

JSON数据和Java对象的相互转换

JSON解析器

Java对象转换JSON

注意：

注解
复杂java对象的转换

package JSON;

import com.fasterxml.jackson.core.JsonProcessingException;
import org.junit.Test;
import com.fasterxml.jackson.databind.ObjectMapper;

import java.io.File;
import java.io.FileWriter;
import java.util.*;

// TODO: 2021/12/13 Java对啊ing转为JSON字符串
public class JSON_Demo1 {
    @Test
    public void test1() throws Exception {
//        1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(25);
        p.setGender("男");
//        2.创建Jackson的核心对象， ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
//        3.转换
        String json = mapper.writeValueAsString(p);//将对象转为json字符串
        System.out.println(json);

//        mapper.writeValue(new File("D://json_test1.txt"),p);//将数据写到D://json_test1.txt

        mapper.writeValue(new FileWriter("D://json_text2.txt"),p);//一流的形式将数据关联到D://json_test2.txt

    }
    @Test
    public void test2() throws Exception {

        Person p = new Person();
        p.setName("张三");
        p.setAge(25);
        p.setGender("男");
        p.setBirthday(new Date());

        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(p);
        System.out.println(json);
    }
    @Test
    public void test3() throws Exception {

        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(25);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(25);
        p2.setGender("男");
        p2.setBirthday(new Date());

        Person p3 = new Person();
        p3.setName("张三");
        p3.setAge(25);
        p3.setGender("男");
        p3.setBirthday(new Date());

        //创建List集合
        List<Person> ps = new ArrayList<>();
        ps.add(p1);
        ps.add(p2);
        ps.add(p3);

        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);
        System.out.println(json);
    }
    @Test
    public void test4() throws Exception {
//        1.创建Person对象
        Map<String,Object> map = new HashMap<>();
        map.put("name","zhuangsan");
        map.put("age",26);
        map.put("gender","男");

        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        System.out.println(json);
    }
}

JSON转换Java对象（了解）

和Java转JSON大同小异并且不怎么常用这里就不再演示了

方法：readValue(JSON字符串数据，Class类型)

发现问题及解决方案

一开始调试的时候我都是用FireFox，后来死活都不对，反复检查的好几遍代码，都没有问题，后来用谷歌浏览器进行调试就没问题，后来又查了一下火狐浏览器本身的网页为了用户有良好的体验就会有一些额外的请求，如果你不检查的话运行也是没有问题的，解决方案：blog.csdn.net/qq_39696269…

拓展

如何查看html代码编写的错误

总结

花费了两天学完了AJAX和JSON，进度滞后了，其实完全不需要花费这么长时间学习的，一开始学习AJAX感觉确实挺复杂的，其实学完之后感觉没啥的，我认为主要原因是刚开始接触AJAX的时候由于老师先讲的是用原生JS方式的实现方法认为不是特别重要就浏览了一遍，但是往后学之后发现后面的课程是基于前面的基础上讲解的。期间还遇到里一些细节上的小错误，比如对象命名不一致方法调用不了等等，这些都耽误了我很长时间，不过也算是学扎实了。

这段知识的重点是AJAX中 $.get()和$ .post()方法的书写格式，JSON中Java对象转换JSON的书写格式，其中需要注意的也都在正文中标注了。