- 本章演示实例：点我跳转
- Fetch的第二参数
fetch（url,{对象}(可选))
[qzdypre]
{对象}：{
method:'get/post'
headers:
}
[/qzdypre]
- 异步请求图片
实现类似于淘宝网的实际案例（网站预加载小图片，当鼠标悬停在小图片上，加载大图片）
案例代码：
[qzdypre]
<!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>
[/qzdypre]
代码说明：
<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数据事件。
[qzdypre]
<!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>
[/qzdypre]
这里的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并不匹配。
具体的解决方法，请逐一排查以上故障。
发送成功，控制台会返回200，如图所示：
并且，发送成功后，我们可以在IDEA中的Tomcat服务器状态栏中看见我们发送的数据类型和json数据，如图：
附上Java类代码：
这段Java代码定义了一个名为ProcessJson的Servlet，用于处理HTTP POST请求。它继承自HttpServlet类。在doPost方法中，它打印出请求头中的content-type信息，并使用BufferedReader读取请求体中的数据，并逐行打印出来。doGet方法是一个备用方法，它将请求转发给doPost方法处理。
[qzdypre]
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);
}
}
[/qzdypre]
3.异步文件上传
首先我们需要创建一个简单的HTML页面：
[qzdypre]
<!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>
[/qzdypre]
页面包含一个段落提示上传成功和未找到的提示，以及两个输入框，一个用于选择文件，一个用于点击上传按钮。页面中的JavaScript代码会在点击上传按钮时创建一个FormData对象，将选择的文件添加到对象中，并使用fetch函数发送POST请求到"process-file"地址。最后，根据返回的响应显示上传的状态（200-299为成功)。
FormData的作用：FormData可以用于创建一个表单数据对象，它允许您以键值对的形式将数据添加到该对象中，这些数据可以是以文件的形式或者是以其他形式（比如字符串、布尔值等）添加。FormData对象的用途是与服务器进行数据交换，通常用于通过XMLHttpRequest发送POST或PUT请求时，将表单数据作为请求体发送给服务器。
附ProcessFile代码：
[qzdypre]
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);
}
}
[/qzdypre]
当该Servlet类处理HTTP POST请求时，它会从请求中获取所有的文件部分，并使用循环逐个处理每个文件。对于每个文件部分，它会打印文件的头部信息（包括文件名）、内容类型、大小等。然后，它使用ServletContext的getRealPath方法获取文件保存的实际路径(这里为file目录下），并将文件保存到该路径下。具体步骤如下： 1. 从请求中获取所有的文件部分（Part）。 2. 使用循环逐个处理每个文件部分。 3. 从文件部分获取文件的头部信息，包括文件名（fileName）。 4. 获取ServletContext对象（request.getServletContext()），并使用getRealPath方法获取文件保存的实际路径。 5. 将文件名拼接到路径中，得到最终的保存路径。 6. 使用part.write方法将文件部分写入到最终的保存路径中。
文章评论