DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 使用JavaScript 實現各種跨域的方法
使用JavaScript 實現各種跨域的方法
編輯: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跨域等卻是效率頗高的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved