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 () { ...

随机推荐

Windows10安装GPU版本的Tensorflow
本人电脑配置(公司的)gtx1080ti,下载的的cuda8.0,cudnn6.0,python3.5.3安装完成后,安装tensorflow 1.pip install tensorflow-gpu ...
leetcode个人题解——#19 Remove Nth Node From End of List
思路:设置两个指针,其中第二个指针比第一个延迟n个元素,这样,当第二个指针遍历到指针尾部时,对第一个指针进行删除操作. 当然,这题要注意一些边界值,比如输入[1,2] n=2时如果按照思路走会指向未分 ...
truffle框架快速开发合约步骤
矩阵元区块链智能合约开发指南 1 适用范围本规范描述了矩阵元区块链系统智能合约的开发约束与规范,用以指导DAPP开发者按照本规范开发基于矩阵元区块链运行的应用. 2 术语解释术语术语解释 DAP ...
JQuery文本框验证
<" CODEPAGE="936"%><!--#in ...
20145214 《Java程序设计》第1周学习总结
20145214 <Java程序设计>第1周学习总结教材学习内容总结第一章了解了Java的诞生和版本演进的历史,目前的最新版本是Java SE8. java的三大平台分别是Java ...
web前端之路 - 开篇
一 web发展历程了解事物的历史有助于我们渐进式的从发展的思路清楚了解事物的来龙去脉. 这里有一篇网文写得比较清晰和完整:https://www.tianmaying.com/tutorial/we ...
【week5】psp
本周psp psp饼图: 随笔字数折线图: 代码行折线图:
Nautilus-Share-Message: Called "net usershare info" but it failed: Failed to
See what nautilus processes are running : ps aux | grep nautilus Kill all nautilus processes you see ...
Directory类的使用、Alt+Shift+F10可以查看其命名空间
对于一个对象,按下Alt+Shift+F10可以查看其命名空间. Directory类的使用 using System; using System.Collections.Generic; using ...
SQL SERVER技术内幕之3 联接查询
JOIN表运算符对两个输入表进行操作.联接有三种基本类型:交叉联接.内联接和外联接.这三种联接的区别是它们采用的逻辑查询处理步骤各不相同,每种联接都有一套不同的步骤.交叉联接只有一个步骤----笛卡尔 ...

HTMLajax跨域向服务器写入数据

HTMLajax跨域向服务器写入数据的更多相关文章

随机推荐

热门专题