java + 原生ajax 的学习，记录一下自己学习心得。

最新推荐文章于 2021-09-13 20:09:03 发布

逍遥哥哥的最后倔强

最新推荐文章于 2021-09-13 20:09:03 发布

阅读量459

点赞数

分类专栏：学习记录文章标签： java ajax javascript blob FormData

本文链接：https://blog.csdn.net/weixin_38899563/article/details/82012569

版权

学习记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我想做的是（后面有时间再发），把前端的图片传到后台（用ajax发送请求），（java）后台对这张图片进行处理（算法用的是c语言的），然后返回到前端（html显示）。

ajax怎么发送请求呢？我一通百度，Google。（我不考虑用jQuery，因为作为学生，学习嘛，肯定要学底层的东西，对理解比较有帮助！）

ajax发送请求的四个步骤：

重点理解一下第二步的ajax的回调函数的执行原理，xhr这个对象的几个重要属性。传送门:http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html

记录一下，两个简单的请求的例子，分别是get，post请求怎么写。

前端：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	function checkname(){
		var name=document.getElementById('name').value;
                //第一步：定义ajax的请求对象
		var xhr = new XMLHttpRequest();
                /第二步：注册ajax回调函数，执行过程好好理解
		xhr.onreadystatechange=function(){
			if (xhr.readyState==4 && xhr.status==200)
			{
				document.getElementById('msg').innerHTML=xhr.responseText;
				
			}
			else{
				//alert(xhr.staus);
			}
		}
                //第三步：打开请求通道
                //注意GET请求的url 怎么写。
		xhr.open("GET","/Ajax/test1.do?name="+name,true);
		//第四步：发送请求
		xhr.send();
		
	}
	function CheckUser(){
		var UserName=document.getElementById('username').value;
		var pwd=document.getElementById('pwd').value;
		//alert(pwd);
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if (xhr.readyState==4 && xhr.status==200)
			{
				document.getElementById('result_msg').innerHTML=xhr.responseText;
				
			}
			else{
				//alert(xhr.staus);
			}
		}
		xhr.open("post","/Ajax/test2.do",true);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//类似与表单上传
                //注意：post请求的url 怎么写。
		xhr.send("username="+UserName +"&pwd="+pwd);
	}
	
	
</script>

</head>
<body>
	<label>GET测试！</label><br>
	<input type="text" id="name" name="">
	<button id="submit" onclick="checkname()">上传</button>
	<br><p >服务器返回：<span id="msg"></span></p>
	<br>
	<br>
	<label>POST测试！</label><br>
	用户:<input type="text" id="username"><br>
	密码：<input type="password" id="pwd"><br>
	<button id="user_check" onclick="CheckUser()">验  证</button><br>
	<p id="result_msg"></p>
	<br>
	<br>
	
</body>
</html>

java后台的接收：（我用的是severlet）

处理get请求

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");	
		String name=request.getParameter("name");
		PrintWriter out=response.getWriter();
		out.print(name);
	}

处理post请求

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String UserName=request.getParameter("username");
		String Pwd=request.getParameter("pwd");
		System.out.println(UserName+Pwd);
		PrintWriter out=response.getWriter();
		if (UserName.equals("admin")&&Pwd.equals("admin")) {
			out.println("access into next page!");
		}else {
			out.println("request refused!");
		}
	}

好了，划重点了，前面的例子都是，简单的字符串数据类型，如果请求中带有复杂的数据类型怎么办？

js用FormData对象，封装数据。

	function Up_file(){
		//ajax请求对象
		var xhr=new XMLHttpRequest();
		xhr.responseType = "blob";
		var file=document.getElementById('uploadfile').files[0];
		var fd=new FormData();
		fd.append('myfile',file);
		//ajax回调函数
		xhr.onreadystatechange=function(){
			if (xhr.readyState==4 && xhr.status==200)
			{
				var blob = this.response;
				loadImage_file(blob);
				
			}
			else{
				//alert(xhr.staus);
			}
		}
	
		//请求通道
		xhr.open("post","/Ajax/test3.do",true);
		xhr.send(fd);
		
	}
	function loadImage_file(blob){
	    var fr=new FileReader();
	    fr.readAsDataURL(blob);
	    fr.onload=function(e){
	      var preview=document.getElementById('picture_handle');
	      picture_handle.src=e.target.result;
	    }
	  }

java解析：(可以在硬盘下查看你上传的文件)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		 
	   
		//PrintWriter out=response.getWriter();
		DiskFileItemFactory factory=new DiskFileItemFactory();
		// 设置临时存储目录
        factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
        // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
        factory.setSizeThreshold(MEMORY_THRESHOLD);
		ServletFileUpload upload=new ServletFileUpload(factory);
		//设置最大文件上传值
		upload.setFileSizeMax(MAX_FILE_SIZE);
		// 设置最大请求值 (包含文件和表单数据)
        upload.setSizeMax(MAX_REQUEST_SIZE);
        
        // 中文处理
        upload.setHeaderEncoding("UTF-8"); 
        
        // 构造临时路径来存储上传的文件
        // 这个路径相对当前应用的目录
		String uploadPath = request.getServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY;
		 // 如果目录不存在则创建
        File uploadDir = new File(uploadPath);
        if (!uploadDir.exists()) {
            uploadDir.mkdir();
        }
        //如果是form-data类型就开始解析数据
		if(ServletFileUpload.isMultipartContent(request)) {
			System.out.println("开始获取数据。。。");
			
			try {
				//解析请求内容提取文件数据
				List<FileItem> formItems=upload.parseRequest(request);
				if (formItems!=null&&formItems.size()>0) {
					for (FileItem fileItem : formItems) {
						if (!fileItem.isFormField()) {
							 String fileName = new File(fileItem.getName()).getName();
		                     String filePath = uploadPath + File.separator + fileName;
		                     File storeFile = new File(filePath);
		                     // 在控制台输出文件的上传路径
		                      System.out.println(filePath);
		                   // 保存文件到硬盘
		                     fileItem.write(storeFile);
//读取本地图片输入流
		     				FileInputStream fileInputStream=new FileInputStream(filePath);
		     				int i=fileInputStream.available();
		     				//System.out.println("数据大小："+i);
		     				//byte数组用于存放图片字节数据
		     				byte[] buff = new byte[i];
		     				fileInputStream.read(buff);
		     				//关闭输入流
		     				fileInputStream.close();
		     				//HttpServletResponse response=ServletActionContext.getResponse();
		     				//System.out.println("为啥不开始执行！");
		     				ServletOutputStream fileOutputStream=response.getOutputStream();
		     				fileOutputStream.write(buff);
		     				//System.out.println("写到输出流！");
		     				fileOutputStream.flush();
		     				fileOutputStream.close();
		                    
						}
					}
					
				}
				
			} catch (Exception e) {
				// TODO: handle exception
				e.printStackTrace();
			}
			
		}
		//out.print("request hava handle!");
		
	}

解析代码的出处：

http://www.runoob.com/servlet/servlet-file-uploading.htm

java输出流：response.getWrite()和response.getOutputStream()只能用一个。（别我为什么写这么一句！）

我这边是把图片的写到输出流，然后前端接收。

//读取本地图片输入流
		     				FileInputStream fileInputStream=new FileInputStream(filePath);
		     				int i=fileInputStream.available();
		     				//System.out.println("数据大小："+i);
		     				//byte数组用于存放图片字节数据
		     				byte[] buff = new byte[i];
		     				fileInputStream.read(buff);
		     				//关闭输入流
		     				fileInputStream.close();
		     				//HttpServletResponse response=ServletActionContext.getResponse();
		     				//System.out.println("为啥不开始执行！");
		     				ServletOutputStream fileOutputStream=response.getOutputStream();
		     				fileOutputStream.write(buff);
		     				//System.out.println("写到输出流！");
		     				fileOutputStream.flush();
		     				fileOutputStream.close();

前端ajax如何，接收字节流文件，你看前面的推荐的文章，就知道了。

余生请大家多多指教！

逍遥哥哥的最后倔强

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
java + 原生ajax 的学习，记录一下自己学习心得。

我想做的是（后面有时间再发），把前端的图片传到后台（用ajax发送请求），（java）后台对这张图片进行处理（算法用的是c语言的），然后返回到前端（html显示）。 ajax怎么发送请求呢？我一通百度，Google。（我不考虑用jQuery，因为作为学生，学习嘛，肯定要学底层的东西，对理解比较有帮助！） ajax发送请求的四个步骤：重点理解一下第二步的ajax的回调函...
复制链接

扫一扫