二进制异步请求-CSDN博客

本文链接：https://blog.csdn.net/qq_57218752/article/details/122273893

二进制异步请求

- jsp
- Servlet

jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>异步请求</title>
</head>
<body>
	<div>
		<h2>文件异步上传示例</h2>
		<p><label>请选择文件:</label></p>
		<p><input id="file" type="file" name="file"/></p>
		<p><button onclick="upload()">上传文件</button></p>
	</div>
	<script type="text/javascript">
		function upload() {
			// 1.获取到文件的数据
			var fileEle = document.getElementById("file");
			var file = fileEle.files[0];


			// 2.使用XMLHttpRequest对象传输数据
			// 2-1.创建异步请求对象
			var request = new XMLHttpRequest();
			// 2-2.准备异步请求数据
			// multipart/form-data
			var form = new FormData();
			form.append("file", file);
			
			// 2-3.绑定接收响应并进行处理的回调函数
			request.onreadystatechange = function() {
				if (request.readyState == 4
						&& request.status == 200) {
					alert("文件上传成功！")
				}
			}
	
			// 2-4.发起请求
			request.open("post", "http://localhost:8080/Hello/AjaxServlet");
			request.send(form);
		}
	</script>
	
	<div>
		<h2>图片异步加载示例</h2>
		<p><img style="width:250px;height:250px;" src="images/20210609.png"></p>
		<p><button onclick="update2()">刷新图片</button></p>
	</div>
	<script>
		// 方法一：更新img标签的src属性
		function update1() {
			var img = document.getElementsByTagName("img")[0];
			img.src = "images/baidu.png";	
		}
	
		// 方法二：异步请求
		function update2() {
			var request = new XMLHttpRequest();
			request.responseType = "blob";
			
			// 接收图片数据并进行处理
			request.onreadystatechange = function(response) {
				if (request.readyState == 4
						&& request.status == 200) {
					// 获取二进制数据
					var data = request.response;
					// 更新图片
					var img = document.getElementsByTagName("img")[0];
					img.src = window.URL.createObjectURL(data);	
				}
			}
			
			request.open("get", "http://localhost:8080/Hello/AjaxServlet");
			request.send();
		}
	</script>

</body>
</html>

Servlet

package controller;

import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Collection;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
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;

@WebServlet("/AjaxServlet")
@MultipartConfig
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 获取输出流对象，将数据返回客户端
		ServletOutputStream sos = response.getOutputStream();
		
		// 读入文件数据
		String path = "D:\\Users\\Administrator\\eclipse-workspace\\Hello\\src\\main\\webapp\\images\\baidu.png";
		File file = new File(path);
		FileInputStream fis = new FileInputStream(file);
		byte[] bytes = new byte[fis.available()];
		fis.read(bytes);
		
		// 将文件数据写入输出流
		sos.write(bytes);
		sos.flush();
		
		// 关闭流
		fis.close();
		sos.close();
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Collection<Part> parts = request.getParts();
		// 遍历请求体的每一个部分
		for (Part part : parts) {
			// 判断文件名是否为空，如果不为空表名当前part为文件数据
			if (part.getSubmittedFileName() != null) {
				String filePath = "D:\\Users\\Administrator\\"
						+ "eclipse-workspace\\Hello\\src\\main\\"
						+ "webapp\\upload\\" 
						+  part.getSubmittedFileName();
				
				// 将文件保存本地
				part.write(filePath);
				
				// 删除中间文件
				part.delete();
			}
		}
	}

}