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.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <title></title>
  6.  6     </head>
  7.  7     <body>
  8.  8         <form action="" method="post" onsubmit="return false;">
  9.  9             <input type="file" name="myFile" id="myFile" value=""/>
  10. 10             <input type="button" id="btn" value="上传" /><br />
  11. 11         </form>
  12. 12         <progress id="progress" max="100" value="0" style="margin-top:10px;"></progress>
  13. 13     </body>
  14. 14 </html>
  15. 15 <script type="text/javascript">
  16. 16     window.onload = function(){
  17. 17         var oBtn = document.getElementById("btn");
  18. 18         var oFile = document.getElementById("myFile");
  19. 19         var oProgress = document.getElementById("progress");
  20. 20         oBtn.onclick = function(){
  21. 21             if(oFile.files.length <=0)return;
  22. 22             //TODO:这里假定只是单文件上传
  23. 23             var formData = new FormData();
  24. 24             formData.append("file",oFile.files[0]);
  25. 25
  26. 26             var xhr = new XMLHttpRequest();
  27. 27             xhr.upload.onprogress = function(ev){
  28. 28                 ev = ev || window.event;
  29. 29                 if(ev.lengthComputable)oProgress.value = parseInt(ev.loaded/ev.total*100);
  30. 30             }
  31. 31             xhr.upload.onload = function(){
  32. 32                 oProgress.value = 100;
  33. 33             }
  34. 34             xhr.open("POST","http://127.0.0.1:8080/ajax5.do",true);
  35. 35             xhr.send(formData);
  36. 36         }
  37. 37
  38. 38     }
  39. 39 </script>

后台代码：

  1.  1 package com.sgepit.ajax;
  2.  2
  3.  3 import java.io.File;
  4.  4 import java.io.IOException;
  5.  5 import java.util.List;
  6.  6 import java.util.UUID;
  7.  7
  8.  8 import javax.servlet.ServletException;
  9.  9 import javax.servlet.annotation.WebServlet;
  10. 10 import javax.servlet.http.HttpServlet;
  11. 11 import javax.servlet.http.HttpServletRequest;
  12. 12 import javax.servlet.http.HttpServletResponse;
  13. 13 import javax.servlet.http.HttpSessionContext;
  14. 14
  15. 15 import org.apache.commons.fileupload.FileItem;
  16. 16 import org.apache.commons.fileupload.disk.DiskFileItemFactory;
  17. 17 import org.apache.commons.fileupload.servlet.ServletFileUpload;
  18. 18
  19. 19
  20. 20 /**
  21. 21  * @author tengri
  22. 22  *文件上传
  23. 23  */
  24. 24 @SuppressWarnings("all")
  25. 25 @WebServlet("/ajax5.do")
  26. 26 public class Ajax5 extends HttpServlet {
  27. 27
  28. 28     @Override
  29. 29     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  30. 30         this.doPost(req, resp);
  31. 31     }
  32. 32
  33. 33     @Override
  34. 34     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  35. 35         DiskFileItemFactory factory = new DiskFileItemFactory();
  36. 36         factory.setSizeThreshold(2014 * 1024);
  37. 37         factory.setRepository(new File("D:/uploadTemp"));
  38. 38         ServletFileUpload upload = new ServletFileUpload(factory);
  39. 39         resp.setCharacterEncoding("utf-8");
  40. 40         try {
  41. 41             List<FileItem> items = upload.parseRequest(req);
  42. 42             for(FileItem item : items){
  43. 43                 if(!item.isFormField()){
  44. 44                     //文件名
  45. 45                     String fileName = item.getName();
  46. 46                     System.out.println(new String(fileName.getBytes(),"utf-8"));
  47. 47                     fileName = new String(fileName.getBytes(),"utf-8");
  48. 48                     //检查文件格式
  49. 49                     String fileEnd = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
  50. 50                     //真实上传路径
  51. 51                     StringBuffer sbRealPath = new StringBuffer();
  52. 52                     sbRealPath.append("D:/uploadFile/").append(fileName);
  53. 53                     File file = new File(sbRealPath.toString());
  54. 54                     item.write(file);
  55. 55                 }
  56. 56             }
  57. 57         } catch (Exception e) {
  58. 58             e.printStackTrace();
  59. 59         }
  60. 60     }
  61. 61
  62. 62 }

过滤器：

  1. package com.sgepit.ajax;
  2.  
  3. import java.io.IOException;
  4.  
  5. import javax.servlet.Filter;
  6. import javax.servlet.FilterChain;
  7. import javax.servlet.FilterConfig;
  8. import javax.servlet.ServletException;
  9. import javax.servlet.ServletRequest;
  10. import javax.servlet.ServletResponse;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. /**
  14.  * @author tengri
  15.  *跨域filter
  16.  */
  17. public class CrossDomainFilter implements Filter{
  18.  
  19.     public void destroy() {
  20.     }
  21.  
  22.     public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
  23.             throws IOException, ServletException {
  24.         HttpServletResponse res = (HttpServletResponse) resp;
  25.         //这里最好不要写通配符，如果允许多个域请求数据的话，可以直接用逗号隔开："http://www.baidu.com,http://google.com"
  26.         res.setHeader("Access-Control-Allow-Origin", "*");
  27.         res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
  28.         res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With");
  29.         chain.doFilter(req, resp);
  30.     }
  31.  
  32.     public void init(FilterConfig arg0) throws ServletException {
  33.  
  34.     }
  35. }

web.xml配置过滤器：

  1. 1 <filter>
  2. 2       <filter-name>myFilter</filter-name>
  3. 3       <filter-class>com.sgepit.ajax.CrossDomainFilter</filter-class>
  4. 4   </filter>
  5. 5   <filter-mapping>
  6. 6       <filter-name>myFilter</filter-name>
  7. 7       <url-pattern>/*</url-pattern>
  8. 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. 【转】Bootstrap FileInput中文API整理

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  2. 关于java中“使用了未经检查或不安全的操作、有关详细信息，请使用 ——Xlint：unchecked重新编译”

    今天看<算法 第4版>排序章节时,发现了一个了一个小问题.先贴一下代码: public class Selection{ public static void main(String[]a ...

  3. 用 splice 函数分别实现 push、pop、shift、unshift 的方法

    主要需要注意的是不同方法他们本身返回的值应该是什么,是数组当前的长度,还是取出的元素的值,再在splice函数里面进行相应的return就可以了.具体如下: 用 splice函数实现 push方法 f ...

  4. C二维数组行为空，列不为空

    二维数组: 处理二维数组得函数有一处可能不太容易理解:数组的行可以在函数调用时传递,但是数组的列却只能被预置在函数内部. eg: #define COLS 4 int sum(int ar[][COL ...

  5. UVa 1225 - Digit Counting - ACM/ICPC Danang 2007 解题报告 - C语言

    1.题目大意 把前n$(n\le 10000)$个整数顺次写在一起:12345678910111213……计算0~9各出现了多少次. 2.思路 第一想法是打表,然而觉得稍微有点暴力.不过暂时没有想到更 ...

  6. 将System.Drawing.Bitmap转换为Direct2D.D2DBitmap

    最近在尝试Direct2D编程,挺好玩的. 但是有时候还是会用到GDI+来生成图片,但D2D绘图需要用到自己的D2DBitmap类. 因此需要转换,查阅了下网上的资料,写了这么一个方法: using ...

  7. 头文件#ifndef #define #endif使用

    想必很多人都看过“头文件中的 #ifndef #define #endif 防止该头文件被重复引用”.但是是否能理解“被重复引用”是什么意思?是不能在不同的两个文件中使用include来包含这个头文件 ...

  8. Switches and Lamps（思维）

    You are given n switches and m lamps. The i-th switch turns on some subset of the lamps. This inform ...

  9. Java学习个人备忘录之关键字static

    被static标记的东西会放在内存中被共享的,对象用到时,就会来取的. class Person { String name; //成员变量,实例变量 static String country = ...

  10. mysql 只返回一条数据

    问题描述: 需要得到时间最近的一条记录,但是按照时间字段排完序之后,得到的是全部. 解决办法: order by createtime desc //降序:asc:升序 LIMIT 1