博客

JavaWeb之前后端分离的三步骤

  • Post author:
  • Post category:java


文章目录


提示：以下是本篇文章正文内容，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 如果是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 指的是 JavaScript 对象表示法（JavaScript Object Notation）
  • 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 树。


  • 文档

    : 一个页面就是一个 文档，使用 document 表示。

  • 元素

    : 页面中所有的标签都称为 元素，使用 element 表示。

  • 节点

    : 网页中所有的内容都可以称为 节点，使用 node 表示。

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



3-1 获取元素


querySelector 获取元素对象：
 

<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中，发送 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()
}



4-4 执行效果

在这里插入图片描述


回到目录…


总结

:


提示：这里对文章进行总结：

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


版权声明：本文为qq15035899256原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Tags: