H5ke9 异步处理

目录

.then()的使用详解

案例一:触小图标变大,移走变回

案例三:页面提交文件,我服务器端接收


上次fetvh就一个参数url,,就是get请求

fetch还可以第二个参数对象,可以指定method:改为POST

                                                              请求头header

        :发送txt,servlet,json给客户端,,异步请求图片

1都是客户端传到服务器端

2异步文件上传,两三行代码把文件传输

.then()的使用详解

是Promise对象的一个方法,用于安排在Promise完成(或解析)后要执行的回调函数。它接受一个或两个参数:第一个参数是Promise成功解析时要调用的函数,第二个可选参数是Promise被拒绝时要调用的函数。

myPromise.then(successFunction, failureFunction);

到达客户端调用第一个回调函数,有状态码,和头,写的是lamdar表达式----只有一条语句就作为lamda返回值.的又是promise

  1. 如果第一个有return,那么下一个then形参就是上一个返回值
  2. 随即promise状态改为filled调用正确第一个方法.如果第一个出错下一个状态改为reject,调用错误(例如使用未命名的参数)第二个方法
function async_request()
        {
            fetch("../ke8/textfile")//2函数向文件发送请求
            .then(response=>{
                return response.text();
            })
        .then(data=>document.querySelector("#out").innerHTML=data);//写在data里面
        // .catch//如果有错误
        }

你看我们的data就是上一个返回值response.text()----response代表路径

fetch方法在需要发起网络请求时被调用。


3.别人(03-Promise对象的then方法_哔哩哔哩_bilibili)是先声明两个函数,再使用..我们是直接使用

失败

只有一条语句就作为lamda返回值

只有一条语句就作为lamda返回值

只有一条语句就作为lamda返回值

2请求正文到达客户端调用第二个,图片写到此类型blob,blob是一个二进制数据..URL.createObjject(blob)这方法把内存里的数据给搞出来

思想一: 

        选乒乓球的给servlet1

        羽毛球的给servlet2

         这样不会卡,总的servlet负责

笔记:

JAVA字符BUffer

String字节读取

then(response=>{----response对象包含以下可能有用的属性和方法:
        headers: 响应的头信息,以键值对的形式存储。
        text(): 返回响应的文本内容。
        json(): 返回响应的JSON内容。
        blob(): 返回响应的Blob内容。
        formData(): 返回响应的FormData内容。
        url: 响应的URL地址。

我的错误一

从注意这js的

要与servlet 的value这个一样


案例一:触小图标变大,移走变回

requeset-image.html

mouseover事件

ProcessJson

大小图片转换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>请求图像</title>
    </head>
    <body><img src="img/th.png" id="img">
<script type="text/javascript">
    let img =document.querySelector("#img");
    let  src=img.src;
    img.addEventListener("mouseover",(event=>{
        fetch("img/th_big.png")
        .then(reponse=>reponse.blob())
        .then(blob=>img.src=URL.createObjectURL(blob));
    }));

    img.addEventListener("mouseout",(event)=>{//回来
        img.src=src;
    })

</script>
    </body>
</html>
求解答:
img.addEventListener("mouseover",(event=>{
    fetch("img/th_big.png")拿图片
    .then(reponse=>reponse.blob())传进来?
    .then(blob=>img.src=URL.createObjectURL(blob));给URl?
}));

案例二:发送json

转化为JSON对象-----当然方法不会转为JSON

获取所有键的名称

有更多对象hasmoreekement--是hasnext

        想打印content-type

哦哦哦:我估计html就是客户端

如何我java就是服务器端

getReader(): POST请求中,客户端通常将数据包含在请求体中,这些数据可以通过getReader()方法获取。这些数据通常来自HTML表单的输入字段、查询参数或者HTTP请求正文中的JSON或XML数据。 

问题:前端给后端的到底有什么

           网页里在哪里看application/json这个类型来着

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

高数笔记06:无穷级数

图源&#xff1a;文心一言 时间比较紧张&#xff0c;仅导图~~&#x1f95d;&#x1f95d; 第1版&#xff1a;查资料、画导图~&#x1f9e9;&#x1f9e9; 参考资料&#xff1a;《高等数学 基础篇》武忠祥 &#x1f433;目录 &#x1f433;常数项级数 &#x1f40b;概要 &…

Python基础(第五期): python数据容器(序列) 列表 集合 元素 字符串 字典 序列遍历操作

python基础专栏 python基础&#xff08;第五期&#xff09; 文章目录 python基础&#xff08;第五期&#xff09;数据容器一、列表1、列表的定义2、列表的下标索引 3、列表的(添加)方法3.1 列表的查询方法3.2 修改特定下标索引的值3.3 列表指定位置插入元素3.3 列表指定元素的追…

Git同时配置Gitee和GitHub

Git同时配置Gitee和GitHub 一、删除原先ssh密钥二、生成密钥 这里的同时配置是针对于之前配置过单个gitee或者github而言的&#xff0c;如果需要看git从安装开始的配置&#xff0c;则可以看这一篇文章 git安装配置教程 一、删除原先ssh密钥 在C盘下用户/用户名/.ssh文件下找到…

Docker Swarm实现容器的复制均衡及动态管理:详细过程版

Swarm简介 Swarm是一套较为简单的工具&#xff0c;用以管理Docker集群&#xff0c;使得Docker集群暴露给用户时相当于一个虚拟的整体。Swarm使用标准的Docker API接口作为其前端访问入口&#xff0c;换言之&#xff0c;各种形式的Docker Client(dockerclient in go, docker_py…

Ps:PSDT 模板文件

自 Photoshop CC 2015.5 版以后&#xff0c;Ps 中新增了一种文件格式&#xff1a;.PSDT。 说明&#xff1a; PSD、PDD、PSDT 都是 Ps 的专用文件格式&#xff0c;需要继续在 Ps 中进行编辑的文件可存为此类格式。 PSD Photoshop document Photoshop 默认文档格式&#xff0c;支…

【ArcGIS模型构建器】06:ArcGIS中DOM批量分幅教程

ArcGIS中利用模型构建器实现DOM批量分幅裁剪。 文章目录 1. 加载数据2. 批量分幅1. 加载数据 批量分幅通常是基于数字正射影像来实现。 数字正射影像(DOM.tif)CASS标准图幅(shp) 2. 批量分幅 单个图幅可以通过裁剪或者按掩膜提取工具来进行,批量分幅采用模型构建器进行。…

django REST框架- Django-ninja

Django 是我学习的最早的web框架&#xff0c;大概在2014年&#xff0c;当时选他原因也很简单就是网上资料比较丰富&#xff0c;自然是遇到问题更容易找答案&#xff0c;直到 2018年真正开始拿django做项目&#xff0c;才对他有了更全面的了解。他是一个入门有门槛&#xff0c;学…

【t5 pytorch版源码学习】t5-pegasus-pytorch源码学习

0. 项目来源 中文生成式预训练模型&#xff0c;以mT5为基础架构和初始权重&#xff0c;通过类似PEGASUS的方式进行预训练。 bert4keras版&#xff1a;t5-pegasus pytorch版&#xff1a;t5-pegasus-pytorch 本次主要学习pytorch版的代码解读。 项目结构&#xff1a; train…

Python详细教程,如何使用Python进行数据可视化?

文章目录 前言一、导入必要的库二、加载数据三、创建基本图表四、添加更多细节五、使用Seaborn库创建更复杂的图表关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③…

卡尔曼家族从零解剖-(04)贝叶斯滤波→细节讨论,逻辑梳理,批量优化

讲解关于slam一系列文章汇总链接:史上最全slam从零开始&#xff0c;针对于本栏目讲解的 卡尔曼家族从零解剖 链接 :卡尔曼家族从零解剖-(00)目录最新无死角讲解&#xff1a;https://blog.csdn.net/weixin_43013761/article/details/133846882 文末正下方中心提供了本人 联系…

【C++】类与对象 上

前言 感觉自己的基础还是不够好 最近打算在学新知识的同时 把之前的一些知识点再复习一下 引入 在C语言的学习中 我们学习过结构体 我们用结构体来描述复杂的对象 在结构体中只能定义变量 而在C的结构体中 我们可以在C中 定义函数 下面给出一个简单的例子 创建一个结构体 并…

ZZ038 物联网应用与服务赛题第I套

2023年全国职业院校技能大赛 中职组 物联网应用与服务 任 务 书 &#xff08;I卷&#xff09; 赛位号&#xff1a;______________ 竞赛须知 一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等; 2.竞赛任务中所使用的各类软件工…

解决美颜SDK集成:技术最佳实践和故障排除

美颜SDK已成为许多应用的核心功能&#xff0c;因为它可以增强用户体验&#xff0c;提高图像质量&#xff0c;吸引更多的用户。然而&#xff0c;集成美颜SDK并不总是一帆风顺。本文将为您介绍一些关键的技术最佳实践&#xff0c;以及如何排除集成过程中可能遇到的故障。 一、技…

YoloV8目标检测与实例分割——目标检测onnx模型推理

一、模型转换 1.onnxruntime ONNX Runtime&#xff08;ONNX Runtime或ORT&#xff09;是一个开源的高性能推理引擎&#xff0c;用于部署和运行机器学习模型。它的设计目标是优化执行使用Open Neural Network Exchange&#xff08;ONNX&#xff09;格式定义的模型&#xff0c;…

MapReduce WordCount程序实践(IDEA版)

环境 Linux&#xff1a;Hadoop2.x Windows&#xff1a;jdk1.8、Maven3、IDEA2021 步骤 编程分析 编程分析包括&#xff1a; 1.数据过程分析&#xff1a;数据从输入到输出的过程分析。 2.数据类型分析&#xff1a;Map的输入输出类型&#xff0c;Reduce的输入输出类型&#x…

【服务器使用】vscode winscp进行服务器容器连接(含修改初始密码)

1&#xff1a;获取docker的登陆信息 例如节点&#xff08;host&#xff09;、端口&#xff08;port&#xff09;、密码&#xff08;passwd&#xff09;等信息&#xff0c;这个自己找组内的前辈获取即可 2&#xff1a;配置config文件 找到vscode里面ssh处的config文件 人工找…

【Linux】 基础命令 第一篇

目录 ls​编辑 ls -l ls -a ls -i ls ./* cd指令&&pwd cd . && cd .. 绝对路径&#xff1a; dir/Linux/2023/10 相对路径&#xff1a; 跳转至另一路径​编辑 cd~ cd - touch指令(创建文件) stat指令&#xff1a; mkdir 指令(创建文件夹) tree指…

【Unity】2D角色跳跃控制器

最近加了学校的Nova独游社&#xff0c;本文是社团出的二面题&#xff0c;后续有时间优化下可能会做成一个二维冒险小游戏。本文主要涉及相关代码&#xff0c;参考教程&#xff1a;《勇士传说》横版动作类游戏开发教程 效果演示 【Unity】2D角色跳跃模拟器 主要实现功能&#xf…

虚幻C+++基础 day2

角色移动与视角控制 Character类与相关API 创建Character子类MainPlayer.h // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "GameFramework/Character.h" #include &q…

element的表单校验证件号规则以及输入“无”的情况校验通过

element的表单校验证件号规则以及输入“无”的情况校验通过 <el-col :span"6"><el-form-item label"证件号码" prop"Idnumber" class"grid-content bg-purple"><el-input v-model"testForm.Idnumber" placeh…