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

这篇具有很好参考价值的文章主要介绍了Java网络开发(Asynchronous异步)—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引出

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

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


如果想做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>

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

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

(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 都被用来包装信息。

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

ajax请求的步骤如下:

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

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

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

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

(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框架的出现和入门文章来源地址https://www.toymoban.com/news/detail-486415.html

到了这里,关于Java网络开发(Asynchronous异步)—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端同步异步讲解--Ajax(axios进阶)的相关操作

    之前我们讲到了数据在前后端传输是依赖xml文件,但是由于时代变迁,他也已经比逐步淘汰,json对象就逐步开始作为数据传输通道的桥梁,忘记的话可以去回顾文章对应的json对象 最全的前端知识之css与jsp介绍-CSDN博客 文章浏览阅读1k次,点赞31次,收藏21次。ok了,宝子们,

    2024年02月21日
    浏览(63)
  • 异步回调中axios,ajax,promise,cors详解区分

    Ajax、Promise和Axios之间的关系是,它们都是用于在Web应用程序中发送异步HTTP请求的JavaScript库,但它们有不同的实现方式和用法。 Ajax是一种旧的技术,使用XMLHttpRequest对象来向服务器发送异步请求并获取响应。它通常需要手动编写回调函数来处理响应,并且容易出现回调地狱问

    2024年02月13日
    浏览(55)
  • 同步_异步请求和Ajax并利用axios框架简化

    目录 同步和异步 原生的Ajax 创建XMLHttpRequest对象 常用方法 常用属性 axios框架 同步请求:发送请求后,会做出回应,回应的内容会覆盖浏览器中的内容,这样会打断其他正常的操作,显得不太友好,并且请求时会携带所有的信息。 异步请求:前端正常输入时,可以同时与后端

    2024年02月13日
    浏览(35)
  • Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践)

    目录 一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用 1.3.4、拦截器在 Vue 脚手架中的

    2024年02月04日
    浏览(43)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(68)
  • 【论文笔记 | 异步联邦】Asynchronous Federated Optimization

    Asynchronous Federated Optimization,OPT2020: 12th Annual Workshop on Optimization for Machine Learning,不属于ccfa 任务激活不频繁(比较难以达成条件):对于弱边缘设备,学习任务只在设备空闲、充电、连接非计量网络时执行 通信不频繁:边缘设备和远程服务器之间的连接可能经常不可用、缓

    2024年04月27日
    浏览(40)
  • Vue的Ajax请求-axios、前后端分离练习

    ​ Axios,是Web数据交互方式,是一个基于promise [5]的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 [2] axios :不是vue的插件,可以在任何地方使用

    2024年02月11日
    浏览(48)
  • 前端开发中的ajax请求、axios封装

    目录 浏览器http请求 同步 js标签跨域、url 异步ajax、websock协议 ajax是异步的技术术语,最早的api是xhr(XMLHttpRequest) fetch es6 api axios 封装axios(无论用requst还是axios请求都会生效) src/utils/request.ts请求/响应拦截器封装 ts post请求request.post(url)和 通用请求request({url,method:\\\'post\\\'})对象

    2024年02月11日
    浏览(48)
  • vue2 利用网络代理axios实现开发环境前端跨域

    vue2 利用网络代理axios实现前端跨域 vue.config.js 配置代理 vue文件 实现开发环境跨域请求 测试生产环境跨域跳转 https://blog.csdn.net/weixin_43858851/article/details/137518111?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22137518111%22%2C%22source%22%3A%22weixin_43858851%22%7D

    2024年04月12日
    浏览(44)
  • Vue全家桶(二):Vue中的axios异步通信

    Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API [JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据

    2024年02月09日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包