[AJAX] 跨網域取得/存取資料

Standard

這次的 Case,客戶那邊的特殊需求:Server 端的程式不能碰,因此部分 php 程式要擺在我們自家,而 htm 純頁面擺客戶主機。

而部分資料會自我們自家 Server 中取得或寫入,以下會以”取得”為例。

找了一下資料,必須繞一點路,用 JSONP 來解決這個問題。

以取得資料為例:

首先先引入 jQuery,我是用 Google 提供的 :p

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3.2");
</script>

再來寫 AJAX:

function getData() {

    $.ajax({
        dataType:'jsonp', 
        jsonp: 'doGetData',
        url: 'http://bServer.com/getdata.php',
        error: function(xmlHttpRequest,error) {
          alert('發生錯誤,請稍後再試。');
        }
    });
    return false;

}

function doGetData(msg) {  
    if(msg.result == 'OK')
    {
        alert(msg.howmany);
    }
}

上面這段的效果是當我使用 getData() 方法後,會自 bServer.com 的 getdata.php 取得值,再交由 doGetData() 方法處理返回值,當 JSON 中的 result 值為 OK,則以 alert 方式顯示 howmany 值。

那麼 php 那端的寫法呢?請看下面:

<?php
// 引入變數設定檔,剛好主機內版本是沒有裝 JSON 的 .. 因此我另外去找了個 JSON.php
require_once("JSON.php");

$json = new Services_JSON();
$r = "OK";

// 取得資料的邏輯 .. 可能是從資料庫撈之類的,這邊我直接帶 100
$howmany = 100;

$data = array(
    'result' => $r,
    'howmany' => $howmany
);

echo "doGetData"."(".$json->encode($data).")";
>

注意到其中 echo <strong>doGetData</strong> 這邊,請對應 JavaScript 那邊所寫的 jsonp 方法。

大致是這樣。

參考資料:
http://kevyu.blogspot.com/2010/02/ajaxdomain.html

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *