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 () { ...
随机推荐
- CsvHelper文档-2读
CsvHelper文档-2读 这个库默认不需要做任何设置就可以很容易的使用它.如果你的类属性名称直接匹配csv的标题名称,那么可以按照下面的实例来用: (以下所有的代码都需要引用using csvhe ...
- 深度学习图像分割——U-net网络
写在前面: 一直没有整理的习惯,导致很多东西会有所遗忘,遗漏.借着这个机会,养成一个习惯. 对现有东西做一个整理.记录,对新事物去探索.分享. 因此博客主要内容为我做过的,所学的整理记录以及新的算法. ...
- POJ 3084 Panic Room（最大流最小割）
Description You are the lead programmer for the Securitron 9042, the latest and greatest in home sec ...
- 自测之Lesson7：设备文件操作
题目:请编写一个输入密码(不回显)的程序,要求通过设置终端来完成. 完成代码: #include <stdio.h> #include <unistd.h> #include ...
- DAY4敏捷冲刺
站立式会议 工作安排 (1)服务器配置 已完成对微信小程序登录凭证储存至云端数据库,计划使用微信接口返回的session_id进行转化返回本地,以保持登录态. (2)数据库配置 单词学习记录+用户信息 ...
- 【Linux】- Ubuntu 配置mysql远程访问
ubuntu上安装mysql非常简单只需要几条命令就可以完成. sudo apt-get install mysql-server 安装过程中会提示设置密码什么的,注意设置了不要忘了,安装完成之后 ...
- project之chrome.exe
查看chrome.exe的以来文件可以得到下面这个列面,大部分是在%systemroot%/system32下面的系统dll文件,只有两个是chromium自己生成的:base.dll, conten ...
- html5 download all in one
html5 download all in one HTML5 download & Fetch API & File API & Blob https://scarletsk ...
- 第63天：json的两种声明方式
一. json 两种声明方式 1. 对象声明 var json = {width:100,height:100} 2. 数组声明 var man = [ // 数组的 js ...
- asp.net MVC 导出查询结果到Excel
首先在View视图中有一表单form,导出按钮<input class="btn export" type="button" value="导出 ...