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 () { ...
随机推荐
- git 从头开始
下载安装git 打开git,输入以下命令,引号内的为你自己的名字和邮箱 git config --global user.name "Your Name"git config -- ...
- 166. Nth to Last Node in List
Description Find the nth to last element of a singly linked list. The minimum number of nodes in lis ...
- 关于excle导数据的一些代码笔记
package com.bonc.util; import java.io.File; import java.io.FileInputStream; import java.io.FileOutpu ...
- PHP正则相关
描述字符串排列模式的一种自定义语法规则 如果可以使用字符串函数处理的任务 就不要使用正则 正则表达式 就是通过构建具有特定规则的模式,与输入的字符信息比较 在进行 分割 匹配 查找 替换 等工作 ...
- 图像质量评价指标之 PSNR 和 SSIM
1. PSNR (Peak Signal-to-Noise Ratio) 峰值信噪比 给定一个大小为 \(m×n\) 的干净图像 \(I\) 和噪声图像 \(K\),均方误差 \((MSE)\) 定义 ...
- windows远程连接失败问题排查思路
一般情况下,对WIN7的远程连接只需要5步即可完成远程连接的设置: 1).用户是否设置了密码 2).计算机属性-允许远程登录 3).设置计算机永不睡眠 4).关闭防火墙或者设置入站规则 5).排查Re ...
- 使用HTML5制作loading图
昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...
- ACM入门步骤（一）
一般的入门顺序: 0. C语言的基本语法(或者直接开C++也行,当一个java选手可能会更受欢迎,并且以后工作好找,但是难度有点大),[参考书籍:刘汝佳的<算法竞赛入门经典>,C++入门可 ...
- 实现虚拟机VMware上Centos的linux与windows互相复制与粘贴
转自:http://blog.csdn.net/u012243115/article/details/40454063 1.打开虚拟机的菜单“虚拟机”,下拉框中会有一个“安装 VMwareTools” ...
- 《梦断代码Dreaming In Code》阅读计划
书籍是人类宝贵的精神财富,读书是人们重要的学习方式,是人生奋斗的航灯,是文化传承的通道,是人类进步的阶梯.学生作为学习人群的主体,必须把读书作为头等大事.学校就是一个学生在教师指导下自主读书的空间,而 ...