搜索热点


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

何轩伟 2023-11-16 212 11/16

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

{对象}:{

method:'get/post'

headers:

}

  1. 异步请求图片

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

案例代码:

<!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方法将文件部分写入到最终的保存路径中。

 

- THE END -
最后修改:2023年11月16日
0

非特殊说明,本博所有文章均为博主原创。