1、XMLHttpRequest升级版已经实现了跨域请求。不过需要在后台设置:header("Access-Control-Allow-Origin:http://www.a.com");表示某个域下允许跨域访问。

2、IE：需要使用XDomainRequest()。同样需要在后台设置：response.addHeader("Access-Control-Allow-Origin","*");

3、如果后台语言为java的话，需要自己写一个CrossDomainFilter，在过滤器中设置跨域访问，否则上传不成功。

下面以一个ajax文件上传的例子来说明跨域问题：

前台代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <form action="" method="post" onsubmit="return false;">

             <input type="file" name="myFile" id="myFile" value=""/>

             <input type="button" id="btn" value="上传" /><br />

         </form>

         <progress id="progress" max="100" value="0" style="margin-top:10px;"></progress>

     </body>

 </html>

 <script type="text/javascript">

     window.onload = function(){

         var oBtn = document.getElementById("btn");

         var oFile = document.getElementById("myFile");

         var oProgress = document.getElementById("progress");

         oBtn.onclick = function(){

             if(oFile.files.length <=0)return;

             //TODO:这里假定只是单文件上传

             var formData = new FormData();

             formData.append("file",oFile.files[0]);

             var xhr = new XMLHttpRequest();

             xhr.upload.onprogress = function(ev){

                 ev = ev || window.event;

                 if(ev.lengthComputable)oProgress.value = parseInt(ev.loaded/ev.total*100);

             }

             xhr.upload.onload = function(){

                 oProgress.value = 100;

             }

             xhr.open("POST","http://127.0.0.1:8080/ajax5.do",true);

             xhr.send(formData);

         }

     }

 </script>

后台代码：

 package com.sgepit.ajax;

 import java.io.File;

 import java.io.IOException;

 import java.util.List;

 import java.util.UUID;

 import javax.servlet.ServletException;

 import javax.servlet.annotation.WebServlet;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import javax.servlet.http.HttpSessionContext;

 import org.apache.commons.fileupload.FileItem;

 import org.apache.commons.fileupload.disk.DiskFileItemFactory;

 import org.apache.commons.fileupload.servlet.ServletFileUpload;

 /**

  * @author tengri

  *文件上传

  */

 @SuppressWarnings("all")

 @WebServlet("/ajax5.do")

 public class Ajax5 extends HttpServlet {

     @Override

     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

         this.doPost(req, resp);

     }

     @Override

     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

         DiskFileItemFactory factory = new DiskFileItemFactory();

         factory.setSizeThreshold(2014 * 1024);

         factory.setRepository(new File("D:/uploadTemp"));

         ServletFileUpload upload = new ServletFileUpload(factory);

         resp.setCharacterEncoding("utf-8");

         try {

             List<FileItem> items = upload.parseRequest(req);

             for(FileItem item : items){

                 if(!item.isFormField()){

                     //文件名

                     String fileName = item.getName();

                     System.out.println(new String(fileName.getBytes(),"utf-8"));

                     fileName = new String(fileName.getBytes(),"utf-8");

                     //检查文件格式

                     String fileEnd = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();

                     //真实上传路径

                     StringBuffer sbRealPath = new StringBuffer();

                     sbRealPath.append("D:/uploadFile/").append(fileName);

                     File file = new File(sbRealPath.toString());

                     item.write(file);

                 }

             }

         } catch (Exception e) {

             e.printStackTrace();

         }

     }

 }

过滤器：

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配置过滤器：

 <filter>

       <filter-name>myFilter</filter-name>

       <filter-class>com.sgepit.ajax.CrossDomainFilter</filter-class>

   </filter>

   <filter-mapping>

       <filter-name>myFilter</filter-name>

       <url-pattern>/*</url-pattern>

   </filter-mapping>

Html5 ajax的跨域请求的更多相关文章

  1. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  2. Ajax之跨域请求

    一.引子 我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径‘http://127.0.0.1:8000/index/’,对应的视图是index视图返回一个inde ...

  3. 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)

    利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...

  4. 原生JS实现Ajax的跨域请求

    原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:“同源策略”,你就知道了: 同源策略限制从一个源加载的文档或脚本如 ...

  5. 【转载】Ajax JS 跨域请求

    原文: 简单的ajax请求:http://blog.csdn.net/net_lover/article/details/5172509 复杂的ajax请求:http://blog.csdn.net/ ...

  6. jQuery的Ajax的跨域请求

    今天碰到一个Ajax跨域请求的问题,我把源码down下来,然后在服务器端写了一个http请求的代理(因为服务器端是不存在跨域问题的),说白了就是用BufferedReader写了个IO流,然后读取到目 ...

  7. jQuery的ajax jsonp跨域请求

    了解:ajax.json.jsonp.“跨域”的关系 要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...

  8. ajax j跨域请求sonp

    需求 遇到的问题 解决方案 需求 如今,该项目需要获得数据访问外部链接.它是跨域.使用ajax 直提示: 遇到的问题 1. 怎样使用ajax 跨域请求数据 2. 能不能post请求 解决的方法 经过网 ...

  9. ajax的跨域请求

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

随机推荐

  1. （转）Arcgis for javascript实现百度地图ABCD marker的效果

    概述: 在我的博客中,有一篇相关的文章,这段时间,有很多人问我求源码,只是时间过去已长,源代码已找不到,乘着这个9.3放假,又重新实现了下,并相关代码做了优化,在此贴出来,方便大家使用. 相关文章地址 ...

  2. shouldComponentUpdate不能直接比较object

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  3. 最适合初学者的Linux运维学习教程2018版

    Linux运维工程师是一个新颖岗位,现在非常吃香,目前从行业的角度分析,随着国内软件行业不断发展壮大,越来越多复杂系统应运而生,为了保证系统稳定运行,必须要有足够多的Linux运维工程师.维护是软件生 ...

  4. C#文件路径问题

    一丶声明的文件路径 @"/Upload\\" + timeStr + @"\\" + fileName; \\ 中第一个\是转义符 \\表示的是一个字符 即'\ ...

  5. Python - 面对对象(其他相关,异常处理,反射,单例模式,等..)

    目录 Python - 面对对象(其他相关,异常处理,反射,等..) 一.isinstance(obj, cls) 二.issubclass(sub, super) 三.异常处理 1. 异常处理 2. ...

  6. Huawei-R&S-网络工程师实验笔记20190607-STP生成树协议（基本配置、桥优先级、根桥选举、根端口、路径开销、边缘端口）

    >Huawei-R&S-网络工程师实验笔记20190607-STP生成树协议(基本配置.桥优先级.根桥选举.根端口.路径开销.边缘端口) >>实验开始,先上拓扑图参考: &l ...

  7. Huawei-R&S-网络工程师实验笔记20190527-华为设备密码重置、设置web管理

    >Huawei-R&S-网络工程师实验笔记20190527-华为设备密码重置.设置web管理 >>实验开始(使用SecureCRT 等工具软件): 一.华为设备密码重置,通过 ...

  8. max_element()与min_element()

    #include<iostream>#include<algorithm>using namespace std;bool cmp(int i,int j){ return i ...

  9. Android实现ViewPager无限循环滚动回绕

     Android实现ViewPager无限循环滚动回绕 Android系统提供的ViewPager标准方式是左右可以自由滑动,但是滑动到最左边的极限位置是第一个page,滑动到最右边的位置是最后一 ...

  10. 从SQL Server到MySQL，近百亿数据量迁移实战

    从SQL Server到MySQL,近百亿数据量迁移实战 狄敬超(3D) 2018-05-29 10:52:48 212 沪江成立于 2001 年,作为较早期的教育学习网站,当时技术选型范围并不大:J ...