Chapter5-几种异步功能的实际运用

最新推荐文章于 2024-05-18 21:57:13 发布

1轩阿.

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量870

点赞数 21

分类专栏： HTML5 文章标签：前端 javascript 开发语言 html5 java java-ee

本文链接：https://blog.csdn.net/qq_34933348/article/details/136445404

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Fetch的第二参数

fetch（url,{对象}(可选))

{对象}：{

method:'get/post'

headers:

}

异步请求图片

实现类似于淘宝网的实际案例（网站预加载小图片，当鼠标悬停在小图片上，加载大图片）

案例代码：

<!DOCTYPE html>

<htmHl lang="en">

<head>

<meta charset="UTF-8">

<title>请求图像</title>

</head>

<body>

<img src="img/th.png" alt="" id="img">

 

<script type="text/javascript">

let img=document.querySelector("#img");

let src=img.src;

img.addEventListener("mouseover",(evt => {

fetch("img/th_big.png")

.then(response => response.blob())

.then(blob=> img.src = URL.createObjectURL(blob))

}));

 

img.addEventListener("mouseout",(evt => {

img.src=src;

}));

 

</script>

</body>

</html>

代码说明：

<img src="img/th.png" alt="" id="img">：在body中插入一张图像，其源文件是"img/th.png"，当图像无法加载时，会显示alt文本（此处为空）。图像的ID是"img"，以便在JavaScript中引用它。

let src=img.src; 的作用是获取并保存原始图像的URL

13-17行的：

img.addEventListener("mouseover",(evt => {

fetch("img/th_big.png")

.then(response => response.blob())

.then(blob=> img.src = URL.createObjectURL(blob))

}));

作用是：当鼠标悬停(mouseover)在图像上时，执行此函数。这个函数使用fetch API从服务器获取一个名为"img/th_big.png"的文件，然后将其转换为一个Blob对象，Blob将对象的数据转换为二进制数据，最后将这个Blob对象转换为一个URL，并设置为图像的src属性。

19-21行的：

img.addEventListener("mouseout",(evt => {

img.src=src;

}));

作用是：

当鼠标从图像移开时(mouseout)，执行此函数。这个函数将图像的src属性设置回原始的src（保存在变量src中也就是第12行的作用）。

注意：这段代码假设所有文件（包括JavaScript、HTML和图像文件）都在同一目录下的"img"子目录中。如果不是这样，你需要更改src和fetch调用的路径以匹配你的文件结构。

2.客户端的json传送到服务器端（Java Web）

这里我们首先需要创建一个简单的HTML网页，通过按钮来触发发送json数据事件。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>发送json数据</title>

</head>

<body>

<input type="button" value="发送json数据" id="send-btn">

 

<script type="text/javascript">

let student={

name:"Alice",

age:20,

gender:"female",

tall:165.5

};

let btn =document.querySelector("#send-btn");

btn.addEventListener("click",(event)=> {

fetch("ProcessJson",{

method:"post",

body:JSON.stringify(student),

headers:new Headers({"content-type":"application/json"})

})

.then(response=>console.log(response.status));

});

 

</script>

</body>

</html>

这里的11-16行：

我们定义一个JavaScript对象，名为student，包含四个属性：name、age、gender和tall。

19-22行的作用是：当检测到（click）事件，我们触发发送json数据的函数请求，使用Fetch API发送一个HTTP请求。请求的URL是"ProcessJson"，使用POST方法发送请求。

{method:"post", body:JSON.stringify(student), headers:new Headers({"content-type":"application/json"})}这段代码的作用是：：定义请求的选项。其中，将student对象转换为JSON字符串，并设置请求头的内容类型为"application/json"。

24行的作用是：当请求完成时，打印响应的状态码。这里仅用于演示目的（查看是否能够发送成功），实际应用中可能需要更详细的错误处理或数据提取。可以在控制台中查看返回的状态码，下面是两种可能的情况：

当返回“404”时，表面发送json数据失败了，这时候可能的情况有这几种（仅供参考）：

第一种：tomcat未启动

第二种：是设置发送的URL为“ProcessJson”，但在我们的Java类中设置的value或urlParttern不是“ProcessJson”

第三章：部署的工件名和url并不匹配。

具体的解决方法，请逐一排查以上故障。

Chapter5-几种异步功能的实际运用

发送成功，控制台会返回200，如图所示：

Chapter5-几种异步功能的实际运用

并且，发送成功后，我们可以在IDEA中的Tomcat服务器状态栏中看见我们发送的数据类型和json数据，如图：

Chapter5-几种异步功能的实际运用

附上Java类代码：

这段Java代码定义了一个名为ProcessJson的Servlet，用于处理HTTP POST请求。它继承自HttpServlet类。在doPost方法中，它打印出请求头中的content-type信息，并使用BufferedReader读取请求体中的数据，并逐行打印出来。doGet方法是一个备用方法，它将请求转发给doPost方法处理。

package com.example.sendJson;

 

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.BufferedReader;

import java.io.IOException;

 

@WebServlet(name = "ProcessJson",value = "/ProcessJson")

public class ProcessJson extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

System.out.println(request.getHeader("content-type"));

 

BufferedReader reader=request.getReader();

String line=null;

while ((line=reader.readLine())!=null){

System.out.println(line);

}

reader.close();

}

 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request,response);

}

}

3.异步文件上传

首先我们需要创建一个简单的HTML页面：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>上传文件</title>

</head>

<body>

<p>提示200为上传成功，404为未找到（失败）…… 请大家根据自己的电脑实际运行情况参考，注意tomcat必须开启</p>

<input type="file" multiple>

<input type="button" value="上传" id="upload-btn">

 

<script>

let btn=document.querySelector("#upload-btn");

let file_field=document.querySelector("input[type=file]");

btn.addEventListener("click",(event)=>{

let formDate=new FormData();

for(let i=0;i<file_field.files.length;i++){

formDate.append("file"+(i+1),file_field.files[i]);

}

fetch("process-file",{

method:"post",

body:formDate

})

.then(response=>alert(response.status));

})

</script>

</body>

</html>

页面包含一个段落提示上传成功和未找到的提示，以及两个输入框，一个用于选择文件，一个用于点击上传按钮。页面中的JavaScript代码会在点击上传按钮时创建一个FormData对象，将选择的文件添加到对象中，并使用fetch函数发送POST请求到"process-file"地址。最后，根据返回的响应显示上传的状态（200-299为成功)。

FormData的作用：FormData可以用于创建一个表单数据对象，它允许您以键值对的形式将数据添加到该对象中，这些数据可以是以文件的形式或者是以其他形式（比如字符串、布尔值等）添加。FormData对象的用途是与服务器进行数据交换，通常用于通过XMLHttpRequest发送POST或PUT请求时，将表单数据作为请求体发送给服务器。

附ProcessFile代码：

package com.example.uploadfile;

 

import javax.servlet.ServletContext;

import javax.servlet.ServletException;

import javax.servlet.annotation.MultipartConfig;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.Part;

import java.io.File;

import java.io.IOException;

import java.util.Collection;

 

@WebServlet(name = "ProcessFile", value = "/process-file")

@MultipartConfig

public class ProcessFile extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

Collection<Part> parts=request.getParts();

for(Part part:parts){

System.out.println("\n");

String header=part.getHeader("content-disposition");

System.out.println(header);

System.out.println(part.getContentType());

System.out.println(part.getSize());

System.out.println(part.getName());

 

String fileName=header.substring(header.lastIndexOf("=")+2,header.lastIndexOf("\""));

System.out.println(fileName);

ServletContext context =request.getServletContext();

String savePath=context.getRealPath("/file");

savePath +=File.separator+fileName;

System.out.println(savePath);

part.write(savePath);

}

 

 

 

}

 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request,response);

}

}

当该Servlet类处理HTTP POST请求时，它会从请求中获取所有的文件部分，并使用循环逐个处理每个文件。对于每个文件部分，它会打印文件的头部信息（包括文件名）、内容类型、大小等。然后，它使用ServletContext的getRealPath方法获取文件保存的实际路径(这里为file目录下），并将文件保存到该路径下。具体步骤如下： 1. 从请求中获取所有的文件部分（Part）。 2. 使用循环逐个处理每个文件部分。 3. 从文件部分获取文件的头部信息，包括文件名（fileName）。 4. 获取ServletContext对象（request.getServletContext()），并使用getRealPath方法获取文件保存的实际路径。 5. 将文件名拼接到路径中，得到最终的保存路径。 6. 使用part.write方法将文件部分写入到最终的保存路径中。

1轩阿.

关注

21
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Chapter5-几种异步功能的实际运用

在doPost方法中，它打印出请求头中的content-type信息，并使用BufferedReader读取请求体中的数据，并逐行打印出来。19-22行的作用是：当检测到（click）事件，我们触发发送json数据的函数请求，使用Fetch API发送一个HTTP请求。，并将文件保存到该路径下。页面包含一个段落提示上传成功和未找到的提示，以及两个输入框，一个用于选择文件，一个用于点击上传按钮。，Blob将对象的数据转换为二进制数据，最后将这个Blob对象转换为一个URL，并设置为图像的src属性。
复制链接

扫一扫