使用JavaScript 實現各種跨域的方法

一、一些概念

①傳統Ajax：互動的資料格式——自訂字串或XML描述；

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

②如今最優方案：使用JSON格式來傳輸資料，使用JSONP來跨域。

③JSON：一種資料交換格式。基於純文字、被原生JS支援。

　　 格式：兩種資料類型描述符：大括弧{ }、方括弧[ ]。分隔字元逗號、映射符冒號、定義符雙引好。

④JSONP：一種跨域資料互動協議，非官方。

　　1、Web頁面調用js檔案，可跨域。擴充：但凡有src屬性的標籤都具有跨域能力。

　　2、跨網域服務器 動態產生資料 並存入js檔案(通常json尾碼)，供用戶端 調用。

　　3、為了便於用戶端使用資料，形成一個非正式傳輸協議，稱為JSONP。該協議重點是允許使用者傳遞一個callback參數給伺服器，然後伺服器返回資料時 將此callback參數作為函數名包裹住JSON資料，使得用戶端可以隨意定製自己的函數來自動處理返回資料。

二、JSONP實現

執行個體1——用戶端單方面接收：

①用戶端——在用戶端設定建立一個函數對象，名稱可為callFunc，用於接收伺服器的js資料和對其進行處理。
　　js資料中的核心是：調用callFunc函數的同時附帶著參數，此參數即data對象的值。

複製代碼 代碼如下:<script type="text/javascript">
var callFunc = function(data){
alert('遠程js檔案傳來的資料：' + data.result);//data為伺服器端的JSON資料對象。
};
</script>
<script type="text/javascript" src="http://其他域的js檔案.com/remote.js"></script>

②伺服器端——直接調用用戶端js中的函數，並傳入資料。複製代碼 代碼如下:callFunc({"result":"value1"});

執行個體2——用戶端向伺服器傳送 指定函數名，伺服器端接收該函數名 並調用對應函數 將資料以參數形式傳入。複製代碼 代碼如下:<script type="text/javascript">
// 得到航班資訊查詢結果後的回呼函數
var flightHandler = function(data){
alert('你查詢的航班結果是：票價 ' + data.price + ' 元，' + '餘票 ' + data.tickets + ' 張。');
};
// 動態添加連結的伺服器js檔案的script。
　　// 在url地址中傳遞了一個code參數匹配JSON資料中的某個key，callback參數則告訴伺服器：本地回呼函數名為callFuncName。
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=callFuncName";
var script = document.createElement('script');
script.setAttribute('src', url);
// 將script元素在網頁載入時插入head頭部
document.getElementsByTagName('head')[0].appendChild(script);
</script>

總結：實現的代碼並不複雜，但在實現Ajax跨域、frameset/iframe跨域等卻是效率頗高的。