• JavaWeb之前后端分离的三步骤

    文章目录

    提示：以下是本篇文章正文内容，Java系列学习将会持续更新

    一、Ajax (异步JavaScript和XML)

    AJAX 是一种用于创建快速动态网页的技术。

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

    1-1 Ajax 发送请求的步骤

    // 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><td>${students}</td><td>${students.size}</td></tr>`;
	oTable.innerHTML += html;
}

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    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 的参数，就是请求体

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    回到目录…

    二、JSON的使用

    2-1 概念

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

    2-2 格式

    • 大括号 { } 保存对象
    • 中括号 [ ] 保存数组，数组可以包含多个对象
    • 数据以 (name: value)对 保存。
    [
  {
    "姓名": "张三",
    "成绩": 28
  },
  {
    "姓名": "李四",
    "成绩": 29
  }
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    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);

    • 1
    • 2
    • 3
    • 4
    • 5

    2-4 JSON 和 Java 转换

    ObjectMapper使用详细介绍

    ObjectMapper mapper = new ObjectMapper();

    • 1

    ① 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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    ②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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    ③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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    回到目录…

    三、WebAPI (修改 Dom 树)

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

    • 文档: 一个页面就是一个 文档，使用 document 表示。
    • 元素: 页面中所有的标签都称为 元素，使用 element 表示。
    • 节点: 网页中所有的内容都可以称为 节点，使用 node 表示。

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

    3-1 获取元素

    querySelector 获取元素对象：

    <div class="box">abcdiv>
<div id="id">defdiv>
<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    3-2 触发事件

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3-3 操作元素

    <div>
	<span>hello worldspan>
	<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 = 'hello js';

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    回到目录…

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

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

    4-1 list.html

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    回到目录…

    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);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    回到目录…

    4-3 list.js

    在JS中，发送 Ajax 请求，获取到 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()
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    4-4 执行效果

    在这里插入图片描述

    回到目录…

    总结:
    提示：这里对文章进行总结：
    以上就是今天的学习内容，本文是JavaWeb的学习，项目前后端分离的三个步骤，一是Axjx发送请求，二是前后端传输Json数据，三是Js修改前端DOM树。之后的学习内容将持续更新！！！

  • 相关阅读:
    软件测试需要学多久 ?这篇文章告诉你答案..
    毕业了，感觉自己一无是处，不知道做什么，怎么办？
    Linux入门教程：P13-＞磁盘管理类
    如何理解Spring的IOC和AOP
    Linux：syslog()的使用和示例
    初级前端面试题之网络相关
    linux中命令行如何使用git
    0-5V转4-20mA电路
    【Java开发常见错误】数值计算精度和舍入问题
    leetcode：504. 七进制数
  • 原文地址：https://blog.csdn.net/qq15035899256/article/details/126452888