引出
如果想做bilibili那樣的邊看視頻邊評論怎么搞？；
如果想做bilibili邊看視頻邊評論怎么搞？
之前用jsp的方式，是無法實現(xiàn)這個需求的，因為每次評論后提交了評論，會把整個頁面全部刷新，導(dǎo)致視頻也回到未播放的初始狀態(tài)，如下所示：
代碼為：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<video src="/day06/video/DDE.mp4" controls width="500px" height="350px"></video>
<form action="/day06/video/comment" method="post">
<textarea name="content" cols="50" rows="10"></textarea><br>
<input type="submit" value="評論">
</form>
<br>
所有評論如下
${contentList}
<c:forEach items="${contentList}" var="co">
<li>
${co.createTime}：${co.content}
</li>
</c:forEach>
</body>
</html>
這是因為，在每次瀏覽器請求后，只能等待服務(wù)器的響應(yīng)，即這種方式是同步請求，與之相對應(yīng)的是異步請求。
（1）同步請求，會阻止代碼的執(zhí)行，這會導(dǎo)致屏幕上出現(xiàn)“凍結(jié)”和無響應(yīng)的用戶體驗。
（2）異步請求，當(dāng)請求的響應(yīng)數(shù)據(jù)完全收到之時，會執(zhí)行一個指定的回調(diào)函數(shù)，而在執(zhí)行異步請求的同時，瀏覽器會正常地執(zhí)行其他事務(wù)的處理。
Ajax是啥？& axios的語法
1. Ajax（Asynchronous JavaScript And XML）簡介
異步 JavaScript 和 XML，或 Ajax 本身不是一種技術(shù)，而是一種將一些現(xiàn)有技術(shù)結(jié)合起來使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 對象。當(dāng)使用結(jié)合了這些技術(shù)的 Ajax 模型以后，網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個頁面。這使得程序能夠更快地回應(yīng)用戶的操作。
盡管 Ajax 中的 X 代表 XML，但是 JSON 才是首選，因為它更加輕量，而且是用 JavaScript 編寫的。在 Ajax 模型中，JSON 和 XML 都被用來包裝信息。
ajax請求的步驟如下：
- 網(wǎng)頁中發(fā)生一個事件（頁面加載、按鈕點擊）
- 由 JavaScript 創(chuàng)建 XMLHttpRequest 對象
- XMLHttpRequest 對象向 web 服務(wù)器發(fā)送請求
- 服務(wù)器處理該請求
- 服務(wù)器將響應(yīng)發(fā)送回網(wǎng)頁
- 由 JavaScript 讀取響應(yīng)
- 由 JavaScript 執(zhí)行正確的動作（比如更新頁面）
2. axios語法 及其與 java后端交互
Axios 是一個基于 promise 的網(wǎng)絡(luò)請求庫，可以用于瀏覽器和 node.js，可以實現(xiàn)異步請求。請求的方式有g(shù)et和post兩種方式，示例代碼如下：
（1）get請求
要點：?參數(shù)=值，記得加上下文；
axios.get("/day06/video/comment/ajax?content="+content.value)
.then(response=>{
let resp = response.data;
console.log(resp)
},error=>{
console.log("error:"+error)
})
（2）post請求
要點：參數(shù)，
let params = new URLSearchParams();
params.append("content",content.value)
axios.post("/day06/video/comment/ajax",params)
.then(response=>{
let resp = response.data;
console.log(resp);
},error=>{
console.log(error)
})
此時，java后端返回一個json對象
resp.getWriter().write(JSON.toJSONString(
new ResData(200, "ok", commentList)));
3.用js的axios實現(xiàn)邊看視頻邊評論
前端代碼：
（1）啟動就得有數(shù)據(jù)的問題：先看本地存儲中有沒有評論，沒有，則查一下數(shù)據(jù)庫，servlet響應(yīng)后保存在local Storage 里面；
（2）每次添加一條評論，把評論存到數(shù)據(jù)庫中，并且刷新一下頁面的顯示；
（3）頁面卸載之前，清空本地存儲中的數(shù)據(jù)；
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="/day06/js/axios.min.js"></script>
</head>
<body>
<video src="/day06/video/DDE.mp4" controls width="500px" height="350px"></video>
<hr>
<br>
<textarea id="content" cols="20" rows="5"></textarea><br>
<button id="btn">評論</button>
<br>
用li拼出來：所有評論
<ul id="ul">
</ul>
<script>
let btn = document.getElementById("btn");
// 在啟動之前就需要查一次數(shù)據(jù)庫
// 從本地存儲中獲取數(shù)據(jù)
var data = localStorage.getItem('data');
if (data) {
// 如果本地存儲中有數(shù)據(jù)，則直接使用
updateUl(JSON.parse(data));
}else {
// 如果本地存儲中沒有數(shù)據(jù)，則發(fā)送 Axios 請求獲取數(shù)據(jù)
axios.get('/day06/video/comment/ajax/db')
.then(function(response) {
// 獲取到數(shù)據(jù)后，更新頁面并保存到本地存儲中
updateUl(response.data);
localStorage.setItem('data', JSON.stringify(response.data));
})
.catch(function(error) {
console.error(error);
});
}
// 每次新增評論時，刷新一下
btn.onclick = function () {
let content = document.getElementById("content");
let msg = document.querySelector("#msg");
console.log(content)
axios.get("/day06/video/comment/ajax/db?content="+content.value)
.then(response=>{
console.log(response);
// 調(diào)用更新事件
updateUl(response.data);
})
content.value=""; // 清空一下
}
// 定義一個刷新ul中數(shù)據(jù)的函數(shù)
function updateUl(data){
// 在li里拼出來；
let commentList = data;
let liStr = "";
let ul = document.getElementById("ul");
for (const co of commentList) {
liStr+="<li>"+co.createTime+": "+co.content +"</li>"
}
ul.innerHTML = liStr;
}
// 在頁面卸載之前，清空本地存儲中的數(shù)據(jù)
window.addEventListener('beforeunload', function() {
localStorage.removeItem('data');
});
</script>
</body>
</html>
后端代碼：
package com.tianju.servlet;
import com.alibaba.fastjson.JSON;
import com.tianju.entity.Comment;
import com.tianju.service.ICommentService;
import com.tianju.service.impl.CommentServiceImpl;
import com.tianju.util.StringUtils;
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;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
@WebServlet("/video/comment/ajax/db")
public class CommentVideoAjaxServletToDB extends HttpServlet {
private ICommentService commentService = new CommentServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 獲取前端的評論
String comment = req.getParameter("content");
if (!StringUtils.isBlank(comment)){
// 這里把數(shù)據(jù)存到數(shù)據(jù)庫
commentService.add(new Comment(new Date(),comment));
}
// 再查一下數(shù)據(jù)庫
// ajax只能用response
List<Comment> commentList = commentService.queryAll();
String listJson = JSON.toJSONString(commentList);
System.out.println(listJson);
resp.getWriter().write(listJson);
}
}
4.上面代碼存在問題 & vue是啥？
在上面代碼中，頁面顯示的內(nèi)容是把html代碼拼出來，然后進(jìn)行顯示的，這樣就把邏輯處理和前端展示兩件事情耦合起來；因此就用vue：
vue相關(guān)參考下面博客：
前端基礎(chǔ)（Vue）——基礎(chǔ)語法（{{}}, v-model, :src=“imagSrc“, v-for）& 事件@click & 屬性和方法（this.add() + this.name）
前端基礎(chǔ)（JavaScript）——基礎(chǔ)語法（變量，分支…）& Json對象【重要】& 函數(shù)定義 & 事件
// 定義一個刷新ul中數(shù)據(jù)的函數(shù)
function updateUl(data){
// 在li里拼出來；
let commentList = data;
let liStr = "";
let ul = document.getElementById("ul");
for (const co of commentList) {
liStr+="<li>"+co.createTime+": "+co.content +"</li>"
}
ul.innerHTML = liStr;
}
vue的html骨架如下所示：文章來源：http://www.zghlxwxcb.cn/news/detail-486415.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
let app = new Vue({
// 選擇操作的div區(qū)域
el:"#app",
// 數(shù)據(jù)區(qū)
data:{},
// 方法區(qū)
methods:{},
// 文檔加載之后就執(zhí)行
created(){
axios.get("/types/list/vue")
.then(response=>{
let resp = response.data;
console.log(resp);
},error=>{
console.log(error)
})
},
// 整個頁面全部加載完成后再執(zhí)行
mounted(){},
})
</script>
</body>
</html>
總結(jié)
1.之前用jsp請求存在的問題，同步請求；
2.異步請求Ajax是啥；
3.axios的get和post方法，用axios實現(xiàn)異步請求；
4.vue框架的出現(xiàn)和入門文章來源地址http://www.zghlxwxcb.cn/news/detail-486415.html
到了這里，關(guān)于Java網(wǎng)絡(luò)開發(fā)（Asynchronous異步）—— 從 Jsp 到 Ajax 的 axios 到 vue & 同步請求 到 異步請求的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
