使用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物件的值。

複製代碼 代碼如下:

②伺服器端－直接呼叫客戶端js中的函數，並傳入資料。

複製程式碼 程式碼如下:

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

實例2－客戶端傳送指定函數名，伺服器端接收函數名稱並呼叫對應函數將資料以參數形式傳入。

複製代碼 代碼如下:

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