Sencha Touch AJAX 跨網域存取 (Cross Domain Request)

通常為了省麻煩，我們會把『提供網頁的 server』與『提供資料的 API server』放在同一個網域下，除非是存取第三方的 server，但現在大多走 OAuth 配合 token 在做存取...

那為何我會遇到跨網域問題？

是這樣的，使用 PhoneGap 開發 app 時，若要跟 API server 要資料也屬於跨網域存取，不過 PhoneGap 的 webkit 設計不像我們平常在用的 browser，所以不會有此限制。

只是開發過程我們會直接利用 browser debug，不會每次都把網頁放到 PhoneGap 內，然後 build、deploy 到 mobile device... 這實在太花時間了，這就是為何我需要解決 cross domain 的原因。

使用jquery跨網域存取json資料

jQuery的$.getJSON()能夠跨網域存取資料，是base在browser可以load不同網域的js檔的方式去包裝的。

<script src="http://www.example.com/test.js"></script>

範例

Client端

$.getJSON("http://www.example.com/getMessage.php?jsoncallback=?",
    function(data) {
        alert(data.message);
    });

Request發出時，jsoncallback後面的?會被取代成特定string，server回應的訊息必需包含此string才會被接受。而回傳的data會被轉成object。


Server端

$data = '{"message" : "hello world"}';
echo $_GET['jsoncallback'] . '(' . $data . ')';

參考資料

• How to access cross-domain data with AJAX using JSONP, jQuery and PHP
• XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin