通過 js——實現(xiàn)Ajax跨域、frameset/iframe等各種跨域

一、一些概念

①傳統(tǒng)Ajax：交互的數(shù)據(jù)格式——自定義字符串或XML描述；

　　　　跨域——通過服務器端代理解決。

②如今最優(yōu)方案：使用JSON格式來傳輸數(shù)據(jù)，使用JSONP來跨域。

③JSON：一種數(shù)據(jù)交換格式。基于純文本、被原生JS支持。

　　    格式：兩種數(shù)據(jù)類型描述符：大括號{ }、方括號[ ]。分隔符逗號、映射符冒號、定義符雙引好。

④JSONP：一種跨域數(shù)據(jù)交互協(xié)議，非官方。

　　1、Web頁面調(diào)用js文件，可跨域。擴展：但凡有src屬性的標簽都具有跨域能力。

　　2、跨域服務器 動態(tài)生成數(shù)據(jù) 并存入js文件(通常json后綴)，供客戶端 調(diào)用。

　　3、為了便于客戶端使用數(shù)據(jù)，形成一個非正式傳輸協(xié)議，稱為JSONP。該協(xié)議重點是允許用戶傳遞一個callback參數(shù)給服務器，然后服務器返回數(shù)據(jù)時 將此callback參數(shù)作為函數(shù)名包裹住JSON數(shù)據(jù)，使得客戶端可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)。

 二、JSONP實現(xiàn)

實例1——客戶端單方面接收：

①客戶端——在客戶端設置創(chuàng)建一個函數(shù)對象，名稱可為callFunc，用于接收服務器的js數(shù)據(jù)和對其進行處理。
　　js數(shù)據(jù)中的核心是：調(diào)用callFunc函數(shù)的同時附帶著參數(shù)，此參數(shù)即data對象的值。

<script type="text/javascript">
    var callFunc = function(data){
        alert('遠程js文件傳來的數(shù)據(jù)：' + data.result);//data為服務器端的JSON數(shù)據(jù)對象。
    };
</script>
<script type="text/javascript" src="http://其他域的js文件.com/remote.js"></script>

②服務器端——直接調(diào)用客戶端js中的函數(shù)，并傳入數(shù)據(jù)。

callFunc({"result":"value1"});

實例2——客戶端向服務器傳送 指定函數(shù)名，服務器端接收該函數(shù)名 并調(diào)用對應函數(shù) 將數(shù)據(jù)以參數(shù)形式傳入。

<script type="text/javascript">
    // 得到航班信息查詢結(jié)果后的回調(diào)函數(shù)
    var flightHandler = function(data){
        alert('你查詢的航班結(jié)果是：票價 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 張。');
    };
    // 動態(tài)添加鏈接服務器js文件的script。
　　// 在url地址中傳遞了一個code參數(shù)匹配JSON數(shù)據(jù)中的某個key，callback參數(shù)則告訴服務器：本地回調(diào)函數(shù)名為callFuncName。
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=callFuncName";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 將script元素在網(wǎng)頁加載時插入head頭部
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>

總結(jié)：實現(xiàn)的代碼并不復雜，但在實現(xiàn)Ajax跨域、frameset/iframe跨域等卻是效率頗高的。