JSON 跨域資料傳輸資料的方法
JSON 資料格式
JSON 原名為 Javascript Object Notation，是一種輕量級的資料交換語言，以文字為基礎，且易於讓人閱讀。JSON最開始被廣泛的應用於WEB應用的開發，透過 JSON 資料格式， JavaScript 語言能輕易的處理或交換資料，所以在Web2.0興起前，JSON在WEB資料傳輸領域佔有重要的地位。JSON 的描述資料結構有兩種型式，分別為物件(object) 與 陣列(array)，多數的 JSON 資料則是採用兩者混用模式。
物件格式
物件是以大括弧包起來的一段描述 { ..... } 。物件中包含了一系列 名稱：數值 的對應，而每個名稱：數值的對應間使用「，」分隔，如下所示：
{name1:value1, name2:value2}
陣列
陣列在是以中括弧包起來的一段描述 [ ..... ] 。每個值使用「，」分隔，範列如下：
["Taipei", "New Taipei", "Taichung"]安全性問題
因 Javascript 一般都是使用 eval( ) 讀取 JSON 的資料，此方式是在可靠資料來源與不支援 JSON 解析的瀏覽器上最快速的方法。但因為透過 eval( ) 的方式同樣可以執行任意的 Javascript 導致安全性的漏洞。另一個安全上的問題則是在跨站請求偽造(Cross-site request forgery，簡稱 CSRF 或 XSRF) 的部分，而這個問題在Javascript採用了稱為沙盒的機制，限制Javascript僅能引入同一個網站的程式碼後提高了安全性。雖然採用沙盒的增加了安全性，卻導致 AJAX 無法進行跨網站間的資料傳輸。解決 JSON 無法跨域 ( Cross Domain ) 的問題
解決此問題的方法有兩種，一、在 http response 的 header ，加入 Access-Control-Allow-Origin 的來源許可；二、透過 JSONP 的方式，將分述如下：
Access-Control-Allow-Origin
網頁伺服器在回應瀏覽器請求時，都會送口客戶端一個 http header，在 http header 中有時會帶有 Access-Control-Allow-Origin ，開發者透過定義 Access-Control-Allow-Origin，就可以控制 Javascript 的訪問與資料傳輸請求，接受 aaa.bbb.com 與 ccc.ddd.com 的訪問與資料傳輸請求。Access-Control-Allow-Origin: http://aaa.bbb.com http://ccc.ddd.com如果去設定 Access-Control-Allow-Origin 呢？可以透過Web伺服器的環境變數設定方式，
PHP 中加入
<?php header("Access-Control-Allow-Origin: *"); ?>ASP.NET 中加入
Response.AppendHeader("Access-Control-Allow-Origin", "*");
JSONP
JSONP 全名為 JSON with Padding ，為 JSON 的一種使用模式，可以讓網頁從別的網域取得資料。callback = ?
JSONP 的方法所傳送的 URL 結尾都會帶一個問號 (?)，這個問號會在取得 server 回傳值的時候，自動轉換成 call function 的 function name。以下述的 test.html code 為例，要從 http://test.abc.org/json.php 取資得料，且無輸入值
Url 為 http://test.abc.org/json.php?iamback=? ( callback function 的名稱不是重點 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP Example</title>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script> google.load('jquery','1.4.2');</script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$.get('http://test.abc.org/json.php?iamback=?', function(data){
$("#content").html('');
$("#content").append('Your name is' + data.name+'.<br />');
$("#content").append('You live in' + data.addr+'.');
}) ;
});
});
</script>
</head>
<body>
<button id="button1">JSONP Eaxmple</button> <br/>
<div id="content">content</div>
</body>
</html>而 json.php 的內容為
<?php echo $_GET['iamback'] . '(' . "{'name' : 'Tom','addr':'Taipei'}" . ')';?>透過動態 callback function 載入的方式，Javascript 就具有取得跨域的 JSON 資料的能力。
留言
張貼留言
,,