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 () { ...
随机推荐
- TW实习日记：第14天
今天可以说是又忙又不忙了,忙是因为要赶bug,似乎总有种隐形的力量催着你交工,但实际上太多涉及后端接口的问题,所以又要等别人修改接口才能改bug,可以说真是十分蛋疼了. 改bug的最大心得就是:写好注 ...
- POJ 3308 Paratroopers（最大流最小割の最小点权覆盖）
Description It is year 2500 A.D. and there is a terrible war between the forces of the Earth and the ...
- Java中Collection和Collections的区别（转载）
转载来源:http://www.cnblogs.com/dashi/p/3597937.html 1.java.util.Collection 是一个集合接口(集合类的一个顶级接口).它提供了对集合对 ...
- mysql入门 — （1）
使用cd进入到mysql/bin文件夹下面,或者配置完环境之后,直接在cmd中使用mysql,然后回车开启mysql. 登录 为了安全考虑,在这里只设置了本地root用户可以连接上数据库.使用的指令是 ...
- Ubuntu16.0.4 安装mysql
1. sudo apt-get install mysql-server 2. sudo apt-get install mysql-client 3. sudo apt-get install l ...
- <Effective C++>读书摘要--Implementations<二>
<Item29> Strive for exception-safe code. 1.如下面的代码 class PrettyMenu { public: ... void changeBa ...
- CheckStateChanged（复选框选中状态更改事件）和 CheckedChanged(单选按钮选中状态更改事件)二者区别？
CheckStateChanged(复选框选中状态更改事件)和 CheckedChanged(单选按钮选中状态更改事件)二者区别: 复选框控件(CheckBox)提供了CheckedChanged控件 ...
- delphi 取得数据集某字段值的六种方法
//取name字段的示例 edit1.Text:=ADOquery1.Fields[2].AsString; //取得数据表的第二个字段的值 edit2.Text:=ADOquery1.Fie ...
- MATLAB中的randi函数
randi Pseudorandom integers from a uniform discrete distribution.来自一个均匀离散分布的伪随机整数 R = randi(IMAX,N) ...
- K-means聚类算法与EM算法
K-means聚类算法 K-means聚类算法也是聚类算法中最简单的一种了,但是里面包含的思想却不一般. 聚类属于无监督学习.在聚类问题中,给我们的训练样本是,每个,没有了y. K-means算法是将 ...