網頁讀取跨網域json方法3:使用ajax讀取跨網域資料xml，關鍵在$.ajax({指定jsonpCallback: "callBackdata"函數，回傳必須是純文字或xml物件)，
本題特點是使用button來啟動讀取跨網域json
http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain03-xml.js
(方法3需用chrome瀏覽器才能讀取)
1.注意：
(1).ajaxCall的 資料傳遞方式要選擇get，type: "get"(若選擇post則無法顯示)
function ajaxCall(target){
//發出 ajax call
var data = $.ajax({
type: "get",
//type: "POST", //注意: 設定為post則無法抓到資料
async: true,//async設定false會變成同步請求 要完成ajax後才會繼續執行
url: target,
dataType: "jsonp",
jsonpCallback:"callBackdata",
//callback函式(jsonp的callback函式，預設是callback)
});
目前javascript與jQuery網頁，若要讀取跨網域資料，市場上所使用的方法，幾乎都是借助伺服器端程式php, asp.net, node.js等等來執行call back函數才能達成讀取跨網域端的資料。
2.在此提出一個另類且簡單的快速方法，且不需要php, asp.net等伺服器技術:使用<script src="http://..../example.js">即可讀取任何網址的*.js資料原理，把json,xml放置該example.js 裡面，即可讀到
3.本題實作:
在server遠端伺服器有個18-CrossDomain02-json.js,裡面程式碼的內容是
callBackdata(JSON.stringify([{"id":"1","name":"張瑾雯","englishname":"Mary","address":"北市仁愛路二段56號","tel":"(02) 2555-9857"},{"id":"2",..........1"}])); |
在client本地端網頁18-CrossDomain02-json.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function callBackdata(txt) {
//將字串轉成jsonDoc
var jsonDoc = JSON.parse(txt);
//將jsonDoc輸出成表格資料
str ="<table border=1><tr><td>編號</td><td>姓名</td><td>英文名</td><td>住址</td><td>電話</td></tr>";
for (i=0;i<jsonDoc.length;i++)
{
str +="<tr><td>" + jsonDoc[i].id;
str +="</td><td>" + jsonDoc[i].name;
str +="</td><td>" + jsonDoc[i].englishname;
str +="</td><td>" + jsonDoc[i].address;
str +="</td><td>" + jsonDoc[i].tel;
str +="</td></tr>";
}
str +="</table>";
document.getElementById("id01").innerHTML = str;
}
</script>
</head>
<body>
<p>
<div class="purple1" id="id01"></div>
</p>
<script type="text/javascript" src="http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain02-json.js"> </script>
</body>
</html>
|
注意：
(1).
<script type="text/javascript" src="*.js....>要放在</body>的最下面，
舉例：<div class="purple1" id="id01"></div>若放在<script type="text/javascript" src="*.js....>的下面，則無法在id01處顯示文字
結論：程式控制所顯示的元件，若在<script type="text/javascript" src="*.js....>的下面，都無法顯示
4.將字串讀進到jsonDoc，本身就是一個物件變數陣列，操作法就更傳統javascript的物件變數陣列一樣
5.將字串轉成jsonDoc物件變數的作法,有兩種方法皆可
//方法1: jsonDoc = JSON.parse(txt)
//方法2: jsonDoc =$.parseJSON(txt)
5.json字串與json物件變數彼此轉換的公式
//將json字串轉成json物件: jsonDoc = JSON.parse(jsonString)
//將json物件轉成json字串: jsonString =JSON.stringify(jsonDoc)
6.在遠端伺服器的call.js，callBackdata("...")裡面的字串為什麼要用JSON.stringify([{"id":"1","name":"張瑾雯","englishname":"Mary","address":"北市仁愛路二段56號","tel":"(02) 2555-9857"},{"id":"2",..........1"}])
//原因:
(1).[{"id":"1","name":"張瑾雯","englishname":"Mary","address":"北市仁愛路二段56號","tel":"(02) 2555-9857"},{"id":"2",..........1"}]，這個是json物件陣列，本身是陣列，不是字串
(2).但是callBackdata("...")裡面要的是字串
(3).所以必須使用轉換函數
//將json物件轉成json字串: jsonString =JSON.stringify([{....},{.....},{....}])
(4).然後到了client端18-CrossDomain02-json.html網頁,所接收到是字串，還要將字串轉換成json物件陣列
//將json字串轉成json物件: jsonDoc = JSON.parse(txt)
7.：注意:
(1).在server遠端伺服器有個18-CrossDomain02-json.js,裡面的xml內容，不可以有換行符號
(2).這種讀進跨網域*.js技術，缺點是：必須在clinet網頁，網頁一打開onload時，就讀進跨網域*.js裡面的全部資料（因為<script type="text/javascript" src="http://.....js">），必須放在<body>...</body>的最後面，也就是網頁一打開，<body>一顯示，就會執行跨網頁的所有*.js