我想做的是(后面有时间再发),把前端的图片传到后台(用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!");
}
}
好了,划重点了,前面的例子都是,简单的字符串数据类型,如果请求中带有复杂的数据类型怎么办?
推荐你阅读这篇文章:
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
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如何,接收字节流文件,你看前面的推荐的文章,就知道了。
余生请大家多多指教!