首頁 > web前端 > js教程 > 使用JavaScript 實作各種跨域的方法_基礎知識

使用JavaScript 實作各種跨域的方法_基礎知識

WBOY
發布: 2016-05-16 17:34:07
原創
1074 人瀏覽過

一、一些概念

①傳統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跨域等卻是效率頗高的。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板