文章目录
提示：app开发定制以下是本篇文章正文内容，Javaapp开发定制系列学习将会持续更新
一、Ajax (异步JavaScript和XML)
AJAX app开发定制是一种用于app开发定制创建快速动态网页的技术。
XMLHttpRequestapp开发定制实现异步通信：用于发送 HTTP 请求，app开发定制实现后台与服务器交换数据。
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 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
三、 (修改 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>- 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 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>- 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'> <!-- <tr> <td>小明</td> <td>28</td> </tr> --> </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树。之后的学习内容将持续更新！！！