JavaWeb之前后端分离的三步骤

本文介绍: 本文是Ja vaWe b的学习，项目前后端分离的三个步骤，一是Axjx 发送请求，二是前后端传输Json 数据，三是Js 修改前端DOM树。之后的学习内容将持续更新！！！

文章 目录

一、Ajax (异步JavaScript和XML)
- 1-1 Ajax 发送请求的步骤
- 1-2 如果是POST请求，则还需要设置请求头
二、JSON的使用
三、WebAPI (修改 Dom 树)
四、综合应用 – 展示动态页面

一、Aja x (异步JavaScri p t和XML)

XMLHttpReque st 实现异步通信：用于发送 HTTP 请求，实现后台与服务器交换数据。

1-1 Aja x 发送请求的步骤

// 1. 创建请求对象
var xhr = new XMLHttpRequest();

// 2. 调用open方法，设置请求方法和请求路径
xhr.open("GET", "/data/grade-list.json");

// 3. 请求体
xhr.onload = function() {

	// 1. 将后端的响应结果(JSON数据)进行反序列化
	// this.responseText 是 JSON 格式的字符串
	var students = JSON.parse(this.responseText);

	// 2. 修改 DOM 树，将数据填充到 DOM 树中
	var oTable = document.querySelector('table');
	var html = `<tr&gt;<td&gt;${students}</td&gt;<td&gt;${students.size}</td&gt;</tr&gt;`;
	oTable.innerHTML += html;
}

// 4. 发送请求
xhr.send();

1-2 如果是POST请求，则还需要 设置请求头

var s = JSON.stringify(students);

var xhr = new XMLHttpRequest();

// 因为要在请求体中携带 JSON 数据，所以只能使用 POST 方法
xhr.open("POST", "/get-json-from-request-body");
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");

xhr.send(s);    // send 的参数，就是请求体

回到目录…

二、JSON的使用

2-1 概念

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据。
JSON 指的是 JavaScri pt 对象表示法（JavaSc ript Object No tation）
JSON 是轻量级的文本数据交换格式
JSON 具有自我描述性，更易理解

2-2 格式

大括号 { } 保存对象
中括号 [ ] 保存数组，数组可以包含多个对象
数据以 (name: value)对保存。

[
  {
    "姓名": "张三",
    "成绩": 28
  },
  {
    "姓名": "李四",
    "成绩": 29
  }
]

2-3 JSON 和 JS 转换

// JSON.parase()方法: 将JSON数据转换为JS对象
var obj = JSON.parse('{"name":"baidu","site":"www.baidu.com" }');

// JSON.stringlfy()方法: 将 JavaScript 对象转换为字符串
var myJSON = JSON.stringify(obj);

2-4 JSON 和 Java 转换

ObjectMapper使用详细介绍

ObjectMapper mapper = new ObjectMapper();

① JSON字符串转对象

// Student 对象
Student student = new Student("wang", 20);

// 将对象转换为json字符串
String jsonString = mapper.writeValueAsString(student);
// jsonString = "{"name":"wang", "age":20}"

// 将字符串转换为对象
Student student = mapper.readValue(jsonString, Student.class);

②List集合和JSON字符串之间转换

// List 集合
List<Student> studentList= new ArrayList<>();
studentList.add(。。。);

// 将List集合转换为json字符串
String jsonStr = mapper.writeValueAsString(studentList);
        
// 将json字符串转换为List集合
List<Student> studentList2 = mapper.readValue(jsonStr, List.class);

③Map 集合和JSON字符串之间转换

// Map集合
Map<String, Object> testMap = new HashMap<>();
testMap.put("name", "22");
testMap.put("age", 20);

// 将Map集合转换为json字符串
String jsonStr = mapper.writeValueAsString(testMap);

// 将json字符串转换为Map集合
Map<String, Object> testMapDes = mapper.readValue(jsonStr, Map.class);

回到目录…

三、WebAPI (修改 Dom 树)

一个页面的结构是一个树形结构, 称为 DOM 树。

这些概念在 JS 代码中就对应一个个的对象，所以叫做 “文档对象模型” 。

3-1 获取元素

querySel ector 获取元素对象：

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
	// 类选择器
	var element1 = document.querySelector('.box');
	// id 选择器
	var element2 = document.querySelector('#id');
	// 标签选择器
	var element3 = document.querySelector('h3 span input');
</script>

3-2 触发 事件

<button id="btn">点我一下</button>
<script>
	var btn = document.getElementById('btn');
	btn.onclick = function () {
		alert("hello world");
	}
</script>

3-3 操作元素

<div>
	<span>hello world</span>
	<img src="cat.jpg">
</div>
<script>
	var div = document.querySelector('div');
	
	// 读取 div 文本内容
	console.log(div.innerText);
	// 修改文本内容。即使有HTML标签，也会当做文本显示
	div.innerText = 'hello js';

	// 读取HTML内容
	console.log(div.innerHTML);
	// 修改HTML内容
	div.innerHTML = '<span>hello js</span>';

	var img = document.querySelector('img');
	// 获取元素属性
	console.log(img.src);
	// 修改元素属性
	img.src = "dog.png";
</script>

回到目录…

四、综合 应用 – 展示 动态页面

类似于 个人中心 或 成绩列表 等动态页面的展示。

4-1 list.html

先书写一个待填充的HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩单</title>
</head>
<body>
    <table border='1'>
        <!--
        <tr>
            <td>小明</td>
            <td>28</td>
        </tr>
        -->
    </table>
    <script src="js/list.js"></script>
</body>
</html>

回到目录…

4-2 ListJsonServlet.java

在Java后端，从数据库获取数据，将数据JSON序列化，发送 JSON 数据到前端页面。

@WebServlet("/send-list.json")
public class ListJsonServlet extends HttpServlet {

    private final ObjectMapper objectMapper = new ObjectMapper();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        List<Student> studentList = new ArrayList<>();
        // 1. 从数据库获取 Student 数据
        try (Connection c = DBUtil.connection()) {
            String sql = "select name, grade from grades order by id";
            try (PreparedStatement ps = c.prepareStatement(sql)) {
                try (ResultSet rs = ps.executeQuery()) {
                    while (rs.next()) {
                        Student student = new Student(
                                rs.getString("name"),
                                rs.getInt("grade")
                        );
                        // 2. 将Student 数据存入List 集合中
                        studentList.add(student);
                    }
                }
            }
        } catch (SQLException exc) {
            throw new RuntimeException(exc);
        }
        // 3. JSON序列化
        String json = objectMapper.writeValueAsString(studentList);
        // 4. 响应
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json");
        resp.getWriter().println(json);
    }
}

回到目录…

4-3 list.js

在JS中，发送 Aja x 请求，获取到 JSON 数据，再修改 DOM 树。

// 为了让 js 代码可以在所有资源都加载完成后才去执行，就入口代码放在 window 的 load 事件处理中
window.onload = function() {
    var xhr = new XMLHttpRequest()
    xhr.open('get', '/send-list.json')
    xhr.onload = function() {
        // 定义对象数组 = 响应体的文本内容(JSON字符串)反序列化的结果
        var list = JSON.parse(xhr.responseText)
        var oTable = document.querySelector('table')
        // 遍历数组
        // const list = [ {name:'zhangsan',grade:18}, {name:'lisi', grade:36} ]
        list.forEach( function(i){
            var html = `<tr><td>${i.name}</td><td>${i.grade}</td></tr>`
            oTable.innerHTML += html
        })
    }
    xhr.send()
}