一、一些概念

①傳統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跨域等卻是效率頗高的。

?

?

轉載于:https://www.cnblogs.com/slowsoul/archive/2013/02/14/2910661.html

總結

以上是生活随笔為你收集整理的【笔记】通过 js——实现 各种跨域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。