一、Ajax

1、Ajax概述

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）；

AJAX 不是新的编程语言，而是一种使用现有标准的新方法；

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容；

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行；

 

2、同步和异步（在客户端和服务器相互通信的基础上）

同步：

客户端必须等待服务器的响应，等待期间客户端不能进行其他操作；

异步：

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

 

3、作用

提升用户体验！

 

4、两种实现方式

原生JS实现方式（了解）；

JQuery三种实现方式：

①$.ajax()

②$.get()

③$.post()

 

5、JS原生实现

代码演示：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input id="btn" type="button" value="这里显示拿到的数据">
</body>
<script type="text/javascript">
    function fun() {
        //发送异步请求
        //1、创建核心对象
        var xmlHttp;
        if (window.XMLHttpRequest){
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlHttp=new XMLHttpRequest();
        }else{
            // IE6, IE5 浏览器执行代码
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2、建立连接
        //参数说明：
        // 2.1、请求方式：get或者post；
        //如果是get，请求参数在url后面拼接，send方法空参，xmlHttp.open("GET","test.txt?username=zibo",true);；
        //如果是get，请求参数在send中定义，xmlHttp.send("username=zibo");；
        // 2.2、请求的URL；
        // 2.3、同步或异步请求，true是异步，false是同步；
        xmlHttp.open("GET","js_ajax?username=zibo",true);
        //3、发送请求
        xmlHttp.send();

        //4、接收并处理来自服务器的响应
        //接收方式：xmlHttp.responseText;
        //接收时间：服务器响应成功之后
        xmlHttp.onreadystatechange=function(){
            if (xmlHttp.readyState===4 && xmlHttp.status===200) {
                document.getElementById("btn").setAttribute("value",xmlHttp.responseText);
            }
        }
    }
</script>
</html>

Servlet：

package com.zibo;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/js_ajax")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1、获取请求参数
        String username = req.getParameter("username");
        //2、打印username
        System.out.println("用户："+username);
        //3、响应
        resp.getWriter().write("hello : " + username);
    }
}

文件位置图：

E027Web学习笔记-Ajax和JSON_JSON

运行结果：

E027Web学习笔记-Ajax和JSON_xml_02

 

6、JQuery实现

方式一（$.ajax()）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.4.1.min.js"></script>
    <title>Title</title>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
</body>
<script type="text/javascript">
    function fun() {
        //发送异步请求
        $.ajax({
            url:"js_ajax",//请求路径
            type:"POST",
            // data:"username=zibo&age=23",//写法一，不推荐
            data:{"username":"zibo","age":23},//写法二，推荐
            success:function (data) {
                alert(data);
            },//执行成功的回调函数！
            error:function () {
                alert("执行出错的回调函数！");
            },//执行出错的回调函数
            dataType:"text"//设置接收到的相应格式的数据

        });
    }
</script>
</html>

运行结果：

E027Web学习笔记-Ajax和JSON_xml_03

方式二（$.get()）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.4.1.min.js"></script>
    <title>Title</title>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
</body>
<script type="text/javascript">
    function fun() {
        //发送异步请求
        $.get("js_ajax",{"username":"DongMei","age":"23"},function (data) {
            alert(data);
        },"text");
    }
</script>
</html>

运行结果：

E027Web学习笔记-Ajax和JSON_xml_04

 

方式三（$.post()）

与$.get()一样，只需要将get更改为post；

 

二、JSON

1、JSON简介

JSON: JavaScript Object Notation(JavaScript 对象表示法)；

JSON 是存储和交换文本信息的语法。类似 XML；

JSON 比 XML 更小、更快，更易解析；

 

2、语法

①数据在名称/值对中：

1、JSON是由键值对构成的；
2、键要用引号（单双都行）引起，也可以不引；
3、取值范围：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null，不常用

②数据由逗号分隔

③大括号保存对象

④中括号保存数组

 

3、定义、嵌套和获取值的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script type="text/javascript">
    //1、定义基本格式
    var student = {"name":"zibo","age":23,gender:true};
    document.write(student.name + "<br/>");

    //2、嵌套：{} -> []
    var students = {
        "student":[
        {"name":"ZiBo","age":23,gender:true},
        {"name":"DongMei","age":23,gender:false},
        {"name":"zibo","age":23,gender:true}
        ]
    };
    document.write(students.student[1].name + "<br/>");

    //3、嵌套：[] -> {}
    var stus = [
        {"name":"ZiBo","age":23,gender:true},
        {"name":"DongMei","age":23,gender:false},
        {"name":"zibo","age":23,gender:true}
    ];
    document.write(stus[1].age);
</script>
</html>

 

4、JSON解析器

常见解析器：JsonLib，Gson，fastjson，jackson（Spring MVC内置解析器）

 

5、Java对象转JSON：

jackson使用步骤：

第一步：导入jackson jar包，

E027Web学习笔记-Ajax和JSON_Ajax_05

下载地址是

​​链接：https://pan.baidu.com/s/1-p9vJMNl5NiyOn0enaWtvw 
提取码：twqo ​​

第二步：创建jackson核心对象 ObjectMapper；

第三步：调用ObjectMapper相关方法进行转换；
 

转换方法：
write(参数1,obj)
参数1：
File：将obj对象转换成JSON字符串，并保存到执行的文件中；
Writer：将obj对象转换成JSON字符串，并将JSON字符串填充到字符输出流；
OutputStream：将obj对象转换成JSON字符串，并将JSON字符串填充到字节输出流；

writeValueAsString(obj)：将obj对象转换为JSON字符串；

代码演示：

package com.zibo.test;

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

public class JTest {
    @Test
    public void test1() throws Exception {
        //1、创建对象
        Student student = new Student();
        student.setName("zibo");
        student.setAge(23);
        student.setGender(true);
        //2、创建jackson核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3、调用ObjectMapper相关方法进行转换
        String json = mapper.writeValueAsString(student);
        System.out.println(json);
    }
}

运行结果：

E027Web学习笔记-Ajax和JSON_xml_06

注解：

1、@JsonIgnore：排除属性；
2、@JsonFormat：属性值的格式化；

示例：

//注意注解是写在实体类中的
package com.zibo;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.Date;

public class Student {
    private String name;
    private int age;
    @JsonIgnore
    private boolean gender;
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public boolean isGender() {
        return gender;
    }

    public void setGender(boolean gender) {
        this.gender = gender;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }
}

复杂的Java对象转JSON：

List：数组；

Map：与Java对象格式一致；

代码示例：

package com.zibo.test;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zibo.Student;
import org.junit.Test;

import java.util.*;

public class JTest {
    @Test
    public void test1() throws Exception {
        //1、创建对象
        Student student1 = new Student();
        student1.setName("ZiBo");
        student1.setAge(23);
        student1.setGender(true);
        student1.setBirthday(new Date());
        Student student2 = new Student();
        student2.setName("DongMei");
        student2.setAge(23);
        student2.setGender(false);
        student2.setBirthday(new Date());
        Student student3 = new Student();
        student3.setName("zibo1");
        student3.setAge(23);
        student3.setGender(true);
        student3.setBirthday(new Date());
        List<Student> list = new ArrayList<>();
        list.add(student1);
        list.add(student2);
        list.add(student3);
        Map<Integer,Student> map = new HashMap<>();
        map.put(1,student1);
        map.put(2,student2);
        map.put(3,student3);
        //2、创建jackson核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3、调用ObjectMapper相关方法进行转换
        String json1 = mapper.writeValueAsString(list);
        String json2 = mapper.writeValueAsString(map);
        System.out.println(json1);
        System.out.println(json2);
    }
}

运行结果：

E027Web学习笔记-Ajax和JSON_xml_07

6、JSON转Java对象

代码示例：

package com.zibo.test;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zibo.Student;
import org.junit.Test;

import java.util.*;

public class JTest {
    @Test
    public void test1() throws Exception {
        //1、初始化JSON字符串
        String json = "{\"name\":\"zibo\",\"age\":23,\"gender\":true}";
        //2、创建jackson核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3、调用ObjectMapper相关方法进行转换
        Student stu = mapper.readValue(json,Student.class);
        System.out.println(stu.getName());//zibo
    }
}