Java网络开发(Asynchronous异步)—— 从 Jsp 到 Ajax 的 axios 到 vue 同步请求 到 异步请求

news2024/11/16 12:02:22

目录

  • 引出
  • 如果想做bilibili边看视频边评论怎么搞?
  • Ajax是啥?& axios的语法
    • 1. Ajax(Asynchronous JavaScript And XML)简介
    • 2. axios语法 及其与 java后端交互
      • (1)get请求
      • (2)post请求
  • 3.用js的axios实现边看视频边评论
  • 4.上面代码存在问题 & vue是啥?
  • 总结

引出

如果想做bilibili那样的边看视频边评论怎么搞?;

在这里插入图片描述


如果想做bilibili边看视频边评论怎么搞?

之前用jsp的方式,是无法实现这个需求的,因为每次评论后提交了评论,会把整个页面全部刷新,导致视频也回到未播放的初始状态,如下所示:

代码为:

<%@ 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>

在这里插入图片描述

这是因为,在每次浏览器请求后,只能等待服务器的响应,即这种方式是同步请求,与之相对应的是异步请求。

(1)同步请求,会阻止代码的执行,这会导致屏幕上出现“冻结”和无响应的用户体验。

(2)异步请求,当请求的响应数据完全收到之时,会执行一个指定的回调函数,而在执行异步请求的同时,浏览器会正常地执行其他事务的处理。

Ajax是啥?& axios的语法

1. Ajax(Asynchronous JavaScript And XML)简介

异步 JavaScript 和 XML,或 Ajax 本身不是一种技术,而是一种将一些现有技术结合起来使用的方法,包括:HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。当使用结合了这些技术的 Ajax 模型以后,网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。

尽管 Ajax 中的 X 代表 XML,但是 JSON 才是首选,因为它更加轻量,而且是用 JavaScript 编写的。在 Ajax 模型中,JSON 和 XML 都被用来包装信息。

在这里插入图片描述

ajax请求的步骤如下:

  1. 网页中发生一个事件(页面加载、按钮点击)
  2. 由 JavaScript 创建 XMLHttpRequest 对象
  3. XMLHttpRequest 对象向 web 服务器发送请求
  4. 服务器处理该请求
  5. 服务器将响应发送回网页
  6. 由 JavaScript 读取响应
  7. 由 JavaScript 执行正确的动作(比如更新页面)

2. axios语法 及其与 java后端交互

Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js,可以实现异步请求。请求的方式有get和post两种方式,示例代码如下:

在这里插入图片描述

(1)get请求

要点:?参数=值,记得加上下文;

        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请求

要点:参数,

        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实现边看视频边评论

前端代码:

(1)启动就得有数据的问题:先看本地存储中有没有评论,没有,则查一下数据库,servlet响应后保存在local Storage 里面;

(2)每次添加一条评论,把评论存到数据库中,并且刷新一下页面的显示;

(3)页面卸载之前,清空本地存储中的数据;

<%@ 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");

    // 在启动之前就需要查一次数据库
    // 从本地存储中获取数据
    var data = localStorage.getItem('data');
    if (data) {
        // 如果本地存储中有数据,则直接使用
        updateUl(JSON.parse(data));
    }else {
        // 如果本地存储中没有数据,则发送 Axios 请求获取数据
        axios.get('/day06/video/comment/ajax/db')
            .then(function(response) {
                // 获取到数据后,更新页面并保存到本地存储中
                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);
            // 调用更新事件
            updateUl(response.data);

        })
        content.value=""; // 清空一下
    }

    // 定义一个刷新ul中数据的函数
    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;
    }

    // 在页面卸载之前,清空本地存储中的数据
    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)){
            // 这里把数据存到数据库
            commentService.add(new Comment(new Date(),comment));
        }
        // 再查一下数据库
        // ajax只能用response
        List<Comment> commentList = commentService.queryAll();
        String listJson = JSON.toJSONString(commentList);
        System.out.println(listJson);
        resp.getWriter().write(listJson);
    }
}

4.上面代码存在问题 & vue是啥?

在上面代码中,页面显示的内容是把html代码拼出来,然后进行显示的,这样就把逻辑处理和前端展示两件事情耦合起来;因此就用vue:

vue相关参考下面博客:
前端基础(Vue)——基础语法({{}}, v-model, :src=“imagSrc“, v-for)& 事件@click & 属性和方法(this.add() + this.name)

前端基础(JavaScript)——基础语法(变量,分支…)& Json对象【重要】& 函数定义 & 事件

// 定义一个刷新ul中数据的函数
    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骨架如下所示:

<!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区域
        el:"#app",
        // 数据区
        data:{},
        // 方法区
        methods:{},
        // 文档加载之后就执行
        created(){
            axios.get("/types/list/vue")
                .then(response=>{
                    let resp = response.data;
                    console.log(resp);
                },error=>{
                    console.log(error)
                })
        },
        // 整个页面全部加载完成后再执行
        mounted(){},
    })
</script>

</body>
</html>


总结

1.之前用jsp请求存在的问题,同步请求;
2.异步请求Ajax是啥;
3.axios的get和post方法,用axios实现异步请求;
4.vue框架的出现和入门

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/642541.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

海外社媒营销揭秘:品牌出海的关键策略与注意事项

在全球化的背景下&#xff0c;品牌出海已成为众多企业拓展市场的必然选择。而海外社媒营销作为一种有效的推广手段&#xff0c;不仅能够帮助品牌建立海外影响力&#xff0c;还可以增强品牌知名度、提高销售额。然而&#xff0c;要在海外社媒平台上实施成功的营销策略&#xff0…

网络安全零基础都能看的SQL注入

1.1 .Sql 注入攻击原理 SQL 注入漏洞可以说是在企业运营中会遇到的最具破坏性的漏洞之一&#xff0c;它也是目前被利用得最多的漏洞。要学会如何防御 SQL 注入&#xff0c;首先我们要学习它的原理。 针对 SQL 注入的攻击行为可描述为通过在用户可控参数中注入 SQL 语法&#x…

高压脉冲电源和高压放大器应用领域的区别

在之前的科普中我们讲解了高压脉冲电源和高压放大器的定义及二者区别&#xff0c;其实除此之外&#xff0c;它们在应用上也是有不同倾向性的&#xff0c;那么今天让安泰测试Agitek为大家分享高压脉冲电源和高压放大器应用领域究竟有什么不同&#xff1f; 高压脉冲电源的应用领…

躺不平摆不烂的测试员如何自救?

随着测试从业年龄的增加&#xff0c;毕业的概率大增&#xff0c;而机会骤减&#xff0c;从而使测试员陷入躺不平、摆不烂的状态。 相较于开发员&#xff0c;测试员是没有资格躺平的&#xff0c;毕竟测试员没可能从短短几年黄金时间&#xff0c;从工作中积累到足以躺平的财富&a…

wordpress去除分类URL的categpory

前言 在日常使用Wordpress搭建网站时&#xff0c;发现文章或者分类页的URL地址中默认带有Category&#xff0c;URL层级过长会影响我们网站SEO的优化&#xff0c;也不利于用户体验。这里讲一下如何去除URL中categpory的方法。 操作 第一步先登录到WordPress后台&#xff0c;然…

前端样式网站(前端css框架)

1. Bootstrap:Bootstrap The most popular HTML, CSS, and JS library in the world.Bootstrap 是最流行的 CSS 框架,提供了丰富的前端样式和组件,非常适合开发响应式网站和应用程序。 2. Bulma:Bulma: Free, open source, and modern CSS framework based on FlexboxBulma 是…

nodejs 版本切换(windows版)

一、按健winR弹出窗口&#xff0c;键盘输入cmd,然后敲回车。然后进入命令控制行窗口&#xff0c;并输入where node查看之前本地安装的node的路径。 二、找到上面找到的路径&#xff0c;将node.exe所在的父目录里面的所有东西都删除。 三、从官网下载安装包 https://github.com/…

一文看懂!shell编程-【提取IP地址、文件归档、发送消息】

【引言】 您是否曾经遇到过需要提取大量IP地址、归档文件、发送消息等烦琐的工作&#xff1f; 如果是&#xff0c;那么您一定不能错过这篇文章&#xff01; 在本文中&#xff0c;我们将探讨Shell编程的各种技巧和方法&#xff0c;帮助您轻松完成这些任务。无需任何编程基础&…

这些常用的IC专业术语,你了解多少?

IC工程师在日常的学习和工作中或多或少会都遇到一些专业的IC词汇。下面就来为大家盘点一下各个岗位的专业高频名词。&#xff08;文档内持续更新&#xff0c;全文档文末可领&#xff09; 数字功能验证高频名词 CIN (Carry INput)&#xff1a;进位输入 COUT(Carry OUTput)&…

关于数据库分库分表的一点想法

1 开篇 面对数据的激增&#xff0c;相信大家也都有分库分表的一些方案&#xff0c;这次的这个分享&#xff0c;算是自己的一个想法&#xff0c;可以当做一个参考方案&#xff0c;也欢迎相互讨论。 话不多说&#xff0c;直接进入主题。 日常开发中&#xff0c;实现数据库的分库…

系统稳定性与高可用保障

一、前言 高并发、高可用、高性能被称为互联网三高架构&#xff0c;这三者都是工程师和架构师在系统架构设计中必须考虑的因素之一。今天我们就来聊一聊三 H 中的高可用&#xff0c;也是我们常说的系统稳定性。 > 本篇文章只聊思路&#xff0c;没有太多的深入细节。阅读全…

“海底长城”合龙!揭秘深中海底隧道中的无损检测技术

作为工业大国&#xff0c;近年来国家在各类“大国工程”中投入巨大&#xff0c;同时也获得了喜人的成果&#xff0c;从长江三峡水利枢纽造福全国人民&#xff0c;到天问落火、空间站核心舱在轨开工&#xff0c;天舟二号货运飞船稳靠太空港&#xff0c;神舟十二号载人飞船成功发…

博睿数据应邀出席第五届双态IT北京用户大会,分享《如何帮助用户构建高级可观测性》

6月10日&#xff0c;第五届双态IT北京用户大会在北京召开&#xff0c;来自IT行业的各位专家齐聚一堂&#xff0c;分享行业理念、发展趋势、运维方法以及最佳实践。 博睿数据应邀出席大会&#xff0c;作《如何帮助用户构建高级可观测性》主题演讲&#xff0c;从云原生带来的挑战…

vue-cli3搭建项目实现移动端自适应----- flexible和 postcss-px2rem

1、安装 flexible和 postcss-px2rem npm i lib-flexible postcss-px2rem --save 2.在项目入口文件main.js 中引入lib-flexible import lib-flexible 3. 把目录 public/index.html 中的这个标签注释&#xff01;由于flexible会动态给页面header中添加标签 4.配置postcss-px2r…

不一样的ECS U实例

不一样的ECS U实例 ECS U实例U实例入门开通U实例服务远程连接U实例重置密码远程连接 安装Mysql安装Mysql并启动Mysql数据库操作本地远程连接Mysql 安装Nginx安装Nginx启动Nginx 安装JDK安装Tomcat 体验感受操作上适用场景上体验建议 参与ECSU实例评测&#xff0c;申请免费体验机…

操作系统原理 —— 文件的逻辑结构(二十三)

文件的逻辑结构 这里说的逻辑结构&#xff0c;就是指在用户看来&#xff0c;文件内部的数据应该是如何组织起来的&#xff0c;而 物理结构 指的是在操作系统看来&#xff0c;文件的数据是如何被存放的。 从逻辑结构结构来看&#xff0c;我们可以打开一个记事本&#xff0c;里…

渲染案例 | 《妈妈的牵牛花》荣获厦门国际动漫节金奖

2023年5月25日&#xff0c;第十五届厦门国际动漫节“金海豚奖”动画组获奖名单公布。其中&#xff0c;蓝海创意云《青团计划》优秀代表作品——《妈妈的牵牛花》荣获最佳学生动画金奖。 蓝海创意云作为行业内知名的影视动画渲染服务商&#xff0c;深度参与《妈妈的牵牛花》的后…

NAS文件管理拷贝速度很慢?大文件还是得用它!

有时候我们上传文件&#xff0c;个位数的传输速度实在让我们抓耳挠腮&#xff0c;不禁疑惑&#xff0c;有什么办法可以快速地传输文件呢&#xff1f; 就拿铁威马来说吧&#xff0c;铁威马的TOS 桌面上的 “文件管理” 是一款基于浏览器的网页版文件管理工具&#xff0c;该工具…

pytorch低版本找到并安装torch_geometric对应版本

一、找到官网的安装命令 不同版本的torch_geometric 对应的安装命令不完全一致&#xff0c;因此我们需要首先找到所需torch_geometric版本的正确安装命令。然后再去找对应的版本。 目前torch_geometric官网上只有pytorch 2.0.* 和1.13.* 版本的 torch_geometric 版本对应关系…

聊一聊性能测试

提到性能测试&#xff0c;很多从业相关人员可能会感觉比较混淆。 性能测试&#xff0c;它是属于测试领域一个专业细分领域&#xff0c;和软件测试一样&#xff0c;性能测试涉及到的范围和所需要的技能是非常广而精的&#xff0c;如果从大的类型来划分的话性能测试可以被分为&a…