Ajax實現跨域訪問的三種方法

1、什麼是跨域

咱們先回顧一下域名地址的組成：

http:// www . google : 8080 / script/jquery.js

　　　　  http:// （協議號）

               www  （子域名）

             google （主域名）

               8080 （端口號）

script/jquery.js （請求的地址）

* 當協議、子域名、主域名、端口號中任意一各不相同時，都算不一樣的「域」。

* 不一樣的域之間相互請求資源，就叫「跨域」。

好比：http://www.abc.com/index.html 請求 http://www.def.com/sever.php

2、處理跨域的方法1 -- 代理（這個方法比較「笨」 故不作詳細介紹）

好比在北京（www.beijing.com/sever.php）和上海（www.shanghai.com/sever.php）各有一個服務器，北京的後端（www.beijing.com/sever.php）直接訪問上海的服務，而後把獲取的響應值返回給前端。也就是北京的服務在後臺作了一個代理，前端只須要訪問北京的服務器也就至關與訪問了上海的服務器。這種代理屬於後臺的技術，因此不展開敘述。

3、處理跨域的方法2 -- JSONP

假設在http://www.aaa.com/index.php這個頁面中向http://www.bbb.com/getinfo.php提交GET請求，那麼咱們在www.aaa.com頁面中添加以下代碼：

?

1 2 3 4 5 6 7

var eleScript= document.createElement("script"); //建立一個script元素   eleScript.type = "text/javascript"; //聲明類型、   eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src屬性 引入跨域訪問的url   document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在頁面中添加新建立的script元素

當GET請求從http://www.bbb.com/getinfo.php返回時，能夠返回一段JavaScript代碼，這段代碼會自動執行，能夠用來負責調用http://www.aaa.com/index.php頁面中的一個callback函數。看下面一個列子：

在www.aaa.com頁面中：

1 2 3 4 5 6 7 8 9 10 11

<script> 　　function jsonp( json ){ 　　　　document.write( json.name ); //輸出周星馳 } <script>   <script src="http://www.bbb.com/getinfo.php"></script>

在www.bbb.com頁面中：

　　jsonp({ "name":"周星馳","age":45 });

也就是在www.aaa.com頁面中聲明，在www.bbb.com頁面中調用。可是JSONP只支持 「GET」 請求，但不支持 「POST」 請求。

3、處理跨域的方法2 -- XHR2（推薦方法）

「XHR2」 全稱 「XMLHttpRequest Level2」 是HTML5提供的方法，對跨域訪問提供了很好的支持，而且還有一些新的功能。

* IE10一下的版本都不支持

* 只須要在服務器端頭部加上下面兩句代碼：　

　header( "Access-Control-Allow-Origin:*" );

　header( "Access-Control-Allow-Methods:POST,GET" );

關於 「XHR2」 的更多信息你們能夠查看官方文檔，在這裏就不詳細敘述了，總之這是這個很好用的方法。

以上所述就是本文的所有內容了，但願你們可以喜歡。

 

web項目能夠自定義過濾器：

編寫過濾器：

package com.itxc.filter;
 
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
public class CORSFilter implements Filter {
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
 
    }
 
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        filterChain.doFilter(servletRequest, servletResponse);
    }
 
    @Override
    public void destroy() {
 
    }
}

配置xml:

filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.itxc.filter.CORSFilter</filter-class>
</filter>
 
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

跨域問題搞定！！