Html5 ajax的跨域请求

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>