javascript網頁，讀取跨網域xml資料方法1:

在<body>...</body>之間放入<script type="text/javascript" src="http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain03-xml.js">，裡面有個callBackdata()會傳回值

1.：注意:

(1).在server遠端伺服器有個18-CrossDomain03-xml.js,裡面的xml內容，不可以有換行符號(傳統的xml檔案，每個標籤之後都會換行)

(2).這種讀進跨網域*.js技術，缺點是：必須在clinet網頁，網頁一打開onload時，就讀進跨網域*.js裡面的全部資料（因為<script type="text/javascript" src="http://.....js">），必須放在<body>...</body>的最後面，也就是網頁一打開，<body>一顯示，就會執行跨網頁的所有*.js

(3).可以發現讀取xml的過程比讀取json要麻煩多了：
*json資料：將字串轉成json物件後，直接就是傳統的物件陣列， 即可使用。
*xml資料：
第1步：將字串轉成xml物件後(此時只是節點資料)，
第2步：進一步聚焦在尋找個節點xmlnode, 例如 <personnel>
xmlnode=xmlDoc.getElementsByTagName("personnel");)
第3步：在將這個聚焦節點xmlnode，轉成傳統的物件陣列，才能使用。

1.：目前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-CrossDomain03-xml.js,裡面程式碼的內容是

callBackdata(callBackdata("<?xml version='1.0' standalone='yes'?><mycompany><personnel><id>1</id>.......");

在client本地端網頁18-CrossDomain03-xml.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">

function callBackdata(txt){
//將字串轉成xmlDoc節點變數
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}

//讀進標籤是personnel的所有節點
xmlnod=xmlDoc.getElementsByTagName("personnel");


//將xmlDoc節點變數，轉成xmlObj物件變數件陣列
xmlObj = new Array();
for(i=0;i<xmlnod.length;i++){
xmlObj[i] = new Object();
xmlObj[i].id =xmlnod[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
xmlObj[i].name =xmlnod[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
xmlObj[i].englishname =xmlnod[i].getElementsByTagName("englishname")[0].childNodes[0].nodeValue;
xmlObj[i].address =xmlnod[i].getElementsByTagName("address")[0].childNodes[0].nodeValue;
xmlObj[i].tel =xmlnod[i].getElementsByTagName("tel")[0].childNodes[0].nodeValue;
}
}

var xmlObj;
function show01(){
//將xmlDoc輸出成表格資料
str ="<table border=1><tr><td>編號</td><td>姓名</td><td>英文名</td><td>住址</td><td>電話</td></tr>";

for (i=0;i<xmlObj.length;i++)
{
str +="<tr><td>" + xmlObj[i].id;
str +="</td><td>" + xmlObj[i].name;
str +="</td><td>" + xmlObj[i].englishname;
str +="</td><td>" + xmlObj[i].address;
str +="</td><td>" + xmlObj[i].tel;
str +="</td></tr>";
}
str +="</table>";
document.getElementById("id01").innerHTML = str;
}
</script>

</head>
<body>
<p>
<input id="btn" type="button" onclick="show01()" value="顯示遠端跨網域xml資料，表格顯示" />
<div class="purple1" id="id01"></div></p>

<script type="text/javascript" src="http://acupun.site/lecture/jquery_phoneGap/18-CrossDomain03-xml.js">

</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....>的下面，都無法顯示

5.將字串轉成xmlDoc節點變數(不是物件陣列)的作法,有兩種皆可

//方法1: xmlDoc =parser.parseFromString(txt,"text/xml")

//將字串轉成xmlDoc節點變數
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}

//尋找個節點xmlnode, 例如 <personnel>

xmlnode=xmlDoc.getElementsByTagName("personnel");)

//方法2: xmlDoc = $.parseXML(txt)

//將字串轉成xmlDoc節點變數
var xmlDoc = $.parseXML(txt);
//尋找個節點xmlnode, 例如 <personnel>
var $xml = $(xmlDoc);
var $xmlnode = $xml.find('personnel');

5.把節點xmlnode，轉成傳統的物件陣列xmlObj的作法

//將xmlDoc節點變數，轉成xmlObj物件變數件陣列
xmlObj = new Array();
for(i=0;i<xmlnod.length;i++){
xmlObj[i] = new Object();
xmlObj[i].id =xmlnod[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
xmlObj[i].name =xmlnod[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
xmlObj[i].englishname =xmlnod[i].getElementsByTagName("englishname")[0].childNodes[0].nodeValue;
xmlObj[i].address =xmlnod[i].getElementsByTagName("address")[0].childNodes[0].nodeValue;
xmlObj[i].tel =xmlnod[i].getElementsByTagName("tel")[0].childNodes[0].nodeValue;
}

 

5.xml字串與xmlDoc節點變數彼此轉換的公式

//將xml字串轉成xmlDoc節點變數:
xmlDoc =parser.parseFromString(txt,"text/xml");

//將字串轉成xmlDoc節點變數
if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
} else // Internet Explorer {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}

//將xml物件轉成xml字串:
xmlString =(new XMLSerializer()).serializeToString(xmlDoc)

//將xml物件轉成string文字
if (window.ActiveXObject) { // for IE 瀏覽器
txt01.value = xmlDoc.xml;
} else { //chrome, firefox,Opera各種瀏覽器
txt01.value = (new XMLSerializer()).serializeToString(xmlDoc);
}

5.比較：將字串轉成jsonDoc物件變數的作法,有兩種方法皆可

//方法1: jsonDoc = JSON.parse(txt)
//方法2: jsonDoc =$.parseJSON(txt)

5.json字串與json物件變數彼此轉換的公式

//將json字串轉成json物件: xmlDoc = JSON.parse(jsonString)
//將json物件轉成json字串: jsonString =JSON.stringify(xmlDoc)

6.在遠端伺服器的call.js，callBackdata("...")裡面的字串 ="<?xml version='1.0' standalone='yes'?><mycompany><personnel><id>1</id>......."

注意1："..."，若雙引號裡面還有"，則要改成 ' 單引號

注意2：.然後到了client端18-CrossDomain03-xml.html網頁,所接收到是字串，還要將字串轉換成xml節點變數

//將字串轉成xmlDoc節點變數
if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
} else // Internet Explorer {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}