什么是跨域?

js跨域是指通過js在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信，比如用ajax向一個(gè)不同的域請(qǐng)求數(shù)據(jù)，或者通過js獲取頁面中不同域的框架中(iframe)的數(shù)據(jù)。只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域。

出現(xiàn)跨域問題時(shí),火狐會(huì)有提示:

已攔截跨源請(qǐng)求:同源策略禁止讀取位于http://localhost/xxx的遠(yuǎn)程訪問,(原因:CROS頭缺少 'Access-Control-Allow-Origin').

使用JSONP來解決跨域問題:

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。由于同源策略，一般來說位于 server1.example.com 的網(wǎng)頁無法與不同域的服務(wù)器交互，而 HTML 的<script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開放策略，網(wǎng)頁可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON 數(shù)據(jù)，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。

原理:

1.定義一個(gè)方法來處理返回的結(jié)果(該方法必須在script引入之前聲明)


2.使用script標(biāo)簽去請(qǐng)求跨域地址的數(shù)據(jù)

3.后臺(tái)需要配置返回js直譯器能解析的語句,并且要帶上需要返回的參數(shù)

4.使用jQuery提供的工具

JS代碼:

• 普通方式

<script type="text/javascript">
function showData(data){
    if(data.success){
        console.log("請(qǐng)求成功");
    }
}
</script>
<script type="text/javascript" src="http://localhost/hello?callback=showData"></script>

• jQuery方式

<script type="text/javascript">

    //請(qǐng)求攜帶的參數(shù)中不用寫值,jQuery會(huì)自動(dòng)生成
    $.getJSON("http://localhost/hello?callback=?",function(data){
        console.log(data);
    });
</script>

java代碼:

public void service(ServletRequest req, ServletResponse res)
        throws ServletException, IOException {
    // TODO Auto-generated method stub
    System.out.println("世間若有比雷聲更大的聲響,唯有我熊哥大嗓門!");
    
    String callback = req.getParameter("callback");
    
    res.getWriter().print(callback + "({'success':true})");
}