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跨域向服务器写入数据的更多相关文章

  1. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

  2. ionic+nodejs开发遇到的跨域和post请求数据问题

    最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 开发环境搭建 项目地址 https://github.com/ytudt/nodejsApp 代码和问题都会在之后的学习 ...

  3. 转载：ionic+nodejs开发遇到的跨域和post请求数据问题

    转载自:http://www.cnblogs.com/ytu2010dt/p/5471366.html 最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 项目地址 htt ...

  4. 通用jsonp跨域技术获取天气数据

    1. 前言 在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题可以使用jsonp技术 2.代码 <!DOCT ...

  5. 使用HTML5 的跨域通信机制进行数据同步

    离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...

  6. JSONP 跨域请求 - 获取JSON数据

    如何用原生方式使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数. ...

  7. jQuery $.ajax跨域-JSONP获取JSON数据（转载）

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  8. apiCloud中api.ajax方法跨域传参获取数据

    apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中 获取参数 var pageP ...

  9. ASP.NET 跨域获取JSON天气数据

    前几天做一个门户网站,在首页需要加载气象数据,采用了中央气象局的接口. 刚开始采用JSONP在前台跨域请求数据,没成功~ 后换成在c#后台请求数据返回... 前端代码: $(function () { ...

随机推荐

  1. HDU - 3415（DP + 单调队列）

    链接:HDU - 3415 题意:给出一个包含 n 个数的环,求满足长度大于 0 小于等于 k 的最大区间和. 题解:将数组加倍,形成环.求一个前缀和sum.枚举每一个sum[i],以 i 结尾的最大 ...

  2. hexo部署失败如何解决

  3. Spring Cloud（十）：服务网关 Zuul（路由）【Finchley 版】

    Spring Cloud(十):服务网关 Zuul(路由)[Finchley 版]  发表于 2018-04-23 |  更新于 2018-05-09 |  通过之前几篇 Spring Cloud 中 ...

  4. lintcode142 O(1)时间检测2的幂次

    O(1)时间检测2的幂次 用 O(1) 时间检测整数 n 是否是 2 的幂次. 您在真实的面试中是否遇到过这个题? Yes 样例 n=4,返回 true; n=5,返回 false. 二进制的n中只有 ...

  5. Faster RCNN论文解析

    Faster R-CNN由一个推荐区域的全卷积网络和Fast R-CNN组成, Fast R-CNN使用推荐区域.整个网络的结构如下: 1.1 区域推荐网络 输入是一张图片(任意大小), 输出是目标推 ...

  6. Python 学习笔记之——用 sklearn 对数据进行预处理

    1. 标准化 标准化是为了让数据服从一个零均值和单位方差的标准正态分布.也即针对一个均值为 \(mean\) 标准差为 \(std\) 的向量 \(X\) 中的每个值 \(x\),有 \(x_{sca ...

  7. solidity事件详解

    很多同学对Solidity 中的Event有疑问,这篇文章就来详细的看看Solidity 中Event到底有什么用? 写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊. ...

  8. 如何在Python 2.X中也达到类似nonlocal关键字的效果

    nonlocal关键字时Python 3.X中引入的,目的是让内层函数可以修改外层函数的变量值,而该关键字在Python 2.X中是不存在的.那么,要在Python 2.X中达到类型达到类似nonlo ...

  9. 接口文档管理工具-Postman、Swagger、RAP（转载）

    接口文档管理工具-Postman.Swagger.RAP 转自:http://www.51testing.com/html/10/n-3715910.html 在项目开发测试中,接口文档是贯穿始终的. ...

  10. oracle数据库之PL/SQL 流程控制语句

    介绍 PL/SQL 的流程控制语句, 包括如下三类: 1.控制语句: IF 语句 2.循环语句: LOOP 语句, EXIT 语句 3.顺序语句: GOTO 语句, NULL 语句 一 条件语句 IF ...