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. Stanford coursera Andrew Ng 机器学习课程第二周总结（附Exercise 1）

    Exercise 1:Linear Regression---实现一个线性回归 重要公式 1.h(θ)函数 2.J(θ)函数 思考一下,在matlab里面怎么表达?如下: 原理如下:(如果你懂了这道作 ...

  2. nagios 插件ndoutils 安装配置

    nagios 插件ndoutils 安装配置 原文地址:http://www.cnblogs.com/caoguo/p/5022645.html # Nagios install ndoutils # ...

  3. mysql_基础2

    创建数据表:

  4. CAD绘制一个半径标注（com接口VB语言）

    主要用到函数说明: _DMxDrawX::DrawDimRadial 绘制一个半径标注.详细说明如下: 参数 说明 DOUBLE dCenterX 被标注的曲线的中点X值 DOUBLE dCenter ...

  5. SpringMVC参数绑定、Post乱码解决方法

    从客户端请求key/value数据,经过参数绑定,将key/value数据绑定到controller方法的形参上. springmvc中,接收页面提交的数据是通过方法形参来接收.而不是在control ...

  6. Python总结2

    时间:25日上午'''列表定义:在[]内,可以存放多个任意类型的值,并以逗号隔开''''students=['sb','2b']print(students[1])student_info=['min ...

  7. PAT_A1018#Public Bike Management

    Source: PAT A1018 Public Bike Management (30 分) Description: There is a public bike service in Hangz ...

  8. 洛谷——P1183 多边形的面积

    P1183 多边形的面积 多边形求面积公式: $\frac {\sum_{i=0}^{n-1}(x_iy_{i+1}-y_ix_{i+1})}{2}$ #include<bits/stdc++. ...

  9. POJ3278——Catch That Cow

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 114140   Accepted: 35715 ...

  10. NSE入门--nmap 脚本基础