HTMLajax跨域向服务器写入数据
1、XMLHttpRequest升级版已经实现了跨域请求。不过需要在后台设置:header("Access-Control-Allow-Origin:http://www.a.com");表示某个域下允许跨域访问。
2、IE：需要使用XDomainRequest()。同样需要在后台设置：response.addHeader("Access-Control-Allow-Origin","*");
3、如果后台语言为java的话，需要自己写一个CrossDomainFilter，在过滤器中设置跨域访问，否则上传不成功。
下面以一个ajax文件上传的例子来说明跨域问题：
前台代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <form action="" method="post" onsubmit="return false;">
9 <input type="file" name="myFile" id="myFile" value=""/>
10 <input type="button" id="btn" value="上传" /><br />
11 </form>
12 <progress id="progress" max="100" value="0" style="margin-top:10px;"></progress>
13 </body>
14 </html>
15 <script type="text/javascript">
16 window.onload = function(){
17 var oBtn = document.getElementById("btn");
18 var oFile = document.getElementById("myFile");
19 var oProgress = document.getElementById("progress");
20 oBtn.onclick = function(){
21 if(oFile.files.length <=0)return;
22 //TODO:这里假定只是单文件上传
23 var formData = new FormData();
24 formData.append("file",oFile.files[0]);
25
26 var xhr = new XMLHttpRequest();
27 xhr.upload.onprogress = function(ev){
28 ev = ev || window.event;
29 if(ev.lengthComputable)oProgress.value = parseInt(ev.loaded/ev.total*100);
30 }
31 xhr.upload.onload = function(){
32 oProgress.value = 100;
33 }
34 xhr.open("POST","http://127.0.0.1:8080/ajax5.do",true);
35 xhr.send(formData);
36 }
37
38 }
39 </script>
后台代码：
1 package com.sgepit.ajax;
2
3 import java.io.File;
4 import java.io.IOException;
5 import java.util.List;
6 import java.util.UUID;
7
8 import javax.servlet.ServletException;
9 import javax.servlet.annotation.WebServlet;
10 import javax.servlet.http.HttpServlet;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13 import javax.servlet.http.HttpSessionContext;
14
15 import org.apache.commons.fileupload.FileItem;
16 import org.apache.commons.fileupload.disk.DiskFileItemFactory;
17 import org.apache.commons.fileupload.servlet.ServletFileUpload;
18
19
20 /**
21 * @author tengri
22 *文件上传
23 */
24 @SuppressWarnings("all")
25 @WebServlet("/ajax5.do")
26 public class Ajax5 extends HttpServlet {
27
28 @Override
29 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
30 this.doPost(req, resp);
31 }
32
33 @Override
34 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
35 DiskFileItemFactory factory = new DiskFileItemFactory();
36 factory.setSizeThreshold(2014 * 1024);
37 factory.setRepository(new File("D:/uploadTemp"));
38 ServletFileUpload upload = new ServletFileUpload(factory);
39 resp.setCharacterEncoding("utf-8");
40 try {
41 List<FileItem> items = upload.parseRequest(req);
42 for(FileItem item : items){
43 if(!item.isFormField()){
44 //文件名
45 String fileName = item.getName();
46 System.out.println(new String(fileName.getBytes(),"utf-8"));
47 fileName = new String(fileName.getBytes(),"utf-8");
48 //检查文件格式
49 String fileEnd = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
50 //真实上传路径
51 StringBuffer sbRealPath = new StringBuffer();
52 sbRealPath.append("D:/uploadFile/").append(fileName);
53 File file = new File(sbRealPath.toString());
54 item.write(file);
55 }
56 }
57 } catch (Exception e) {
58 e.printStackTrace();
59 }
60 }
61
62 }
过滤器：
package com.sgepit.ajax; import java.io.IOException; import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse; /**
* @author tengri
*跨域filter
*/
public class CrossDomainFilter implements Filter{ public void destroy() {
} public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse res = (HttpServletResponse) resp;
//这里最好不要写通配符，如果允许多个域请求数据的话，可以直接用逗号隔开："http://www.baidu.com,http://google.com"
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With");
chain.doFilter(req, resp);
} public void init(FilterConfig arg0) throws ServletException { }
}
web.xml配置过滤器：
1 <filter>
2 <filter-name>myFilter</filter-name>
3 <filter-class>com.sgepit.ajax.CrossDomainFilter</filter-class>
4 </filter>
5 <filter-mapping>
6 <filter-name>myFilter</filter-name>
7 <url-pattern>/*</url-pattern>
8 </filter-mapping>
HTMLajax跨域向服务器写入数据的更多相关文章
- 使用jQuery实现跨域提交表单数据
我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQue ...
- ionic+nodejs开发遇到的跨域和post请求数据问题
最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 开发环境搭建 项目地址 https://github.com/ytudt/nodejsApp 代码和问题都会在之后的学习 ...
- 转载：ionic+nodejs开发遇到的跨域和post请求数据问题
转载自:http://www.cnblogs.com/ytu2010dt/p/5471366.html 最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 项目地址 htt ...
- 通用jsonp跨域技术获取天气数据
1. 前言 在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题可以使用jsonp技术 2.代码 <!DOCT ...
- 使用HTML5 的跨域通信机制进行数据同步
离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...
- JSONP 跨域请求 - 获取JSON数据
如何用原生方式使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数. ...
- jQuery $.ajax跨域-JSONP获取JSON数据（转载）
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- apiCloud中api.ajax方法跨域传参获取数据
apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中 获取参数 var pageP ...
- ASP.NET 跨域获取JSON天气数据
前几天做一个门户网站,在首页需要加载气象数据,采用了中央气象局的接口. 刚开始采用JSONP在前台跨域请求数据,没成功~ 后换成在c#后台请求数据返回... 前端代码: $(function () { ...
随机推荐
- python 终极篇 cookie与session
()cookie与session---------->>>>>>>>>>>>>>>>>>&g ...
- Paper Reading - Learning like a Child: Fast Novel Visual Concept Learning from Sentence Descriptions of Images ( ICCV 2015 )
Link of the Paper: https://arxiv.org/pdf/1504.06692.pdf Innovations: The authors propose the Novel V ...
- SIG蓝牙mesh笔记2_mesh组成
目录 SIG 蓝牙 mesh 组成 mesh网络概述 网络和子网 设备和节点 devices & nodes 入网 mesh中的几个概念 智能插座例子 SIG 蓝牙 mesh 组成 mesh网 ...
- php 面试题
1.通过哪一个函数,可以把错误转换为异常处理? A:set_error_handlerB:error_reportingC:error2exceptionD:catch 正确答案:A 答案分析:set ...
- 150命令之线上查询及帮助命令 man hellp
150命令之线上查询及帮助命令 man 查询命令的帮助 man + 命令 NAME ls - list directory contents 命令+命令简单说明 SYNOPSIS ...
- ACM入门步骤（一）
一般的入门顺序: 0. C语言的基本语法(或者直接开C++也行,当一个java选手可能会更受欢迎,并且以后工作好找,但是难度有点大),[参考书籍:刘汝佳的<算法竞赛入门经典>,C++入门可 ...
- HDU 5816 Hearthstone 概率dp
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5816 Hearthstone Time Limit: 2000/1000 MS (Java/Othe ...
- asp.net中Repeater结合js实现checkbox的全选/全不选
前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...
- 201621123034 《Java程序设计》第5周学习总结
作业05-继承.多态.抽象类与接口 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 答:关键字:接口.继承.多态 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般 ...
- open-stf 安装篇（linux）
OpenSTF 百度MTC的远程真机调试 Testin的云真机 腾讯WeTest的云真机 阿里MQC的远程真机租用 什么是OpenSTF? OpenSTF是一个手机设备管理平台,可以对手机进行远 ...