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. 【sqli-labs】 less55 GET -Challenge -Union -14 queries allowed -Variation1 (GET型 挑战 联合查询 只允许14次查询 变化2)

    http://192.168.136.128/sqli-labs-master/Less-55/?id=1' 试了几次,整型带括号正常了 http://192.168.136.128/sqli-lab ...

  2. 如何在Android Studio中查看一个类的继承关系呢？

    在面板顶部的工具栏中,找到Navigate,然后在下拉列表中,找到“Type Hierarchy”(快捷键 Ctrl+H),点击.即可在面板右侧出现该类的Hierarchy层级图.

  3. 在centos安装 sql server

    主要参考官方文档https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-setup-red-hat

  4. jdbcUrl is required with driverClassName错误解决

    jdbcUrl is required with driverClassName springboot2.0配置多数据源: spring.datasource.primary.url=jdbc:mys ...

  5. 零基础到精通Linux，从这篇文章开始

    2018年想做Linux运维的人应该如何学习才能快速精通Linux? Linux入门这么简单,为什么很多人学不会? 想要成为一个合格的运维工程师,到底怎么才能从零开始精通Linux? 作为一个运维小白 ...

  6. js 　计算是今天多少周

    /** * 判断年份是否为润年 * * @param {Number} year */ function isLeapYear(year) { return (year % 400 == 0) || ...

  7. [SQL Service]从一张表取值更新另一张表字段

    1. update table_A set  table_A_column = ab.column from table_A aa left join table_B ab on aa.xx = ab ...

  8. 使用Python的Flask框架，结合Highchart，动态渲染图表

    服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...

  9. Codeforces Problem 778B Bitwise Formula

    题目链接:http://codeforces.com/contest/779/problem/E 题意:有n个变量都可以用m位二进制数表示,这n个数的value将以两种格式中的一种给出 1.变量名, ...

  10. Divisible Group Sums

    Divisible Group Sums Given a list of N numbers you will be allowed to choose any M of them. So you c ...