iT邦幫忙

0

利用JAVASCRIPT剖析遠程XML

  • 分享至 

  • xImage

您好,最近我有需要將XML資料呈現在HTML網頁上的需求,在網上也找過很多的程式碼,但結果似乎也是不行,我找到一段以下的JAVASCRIPT程式碼,很奇怪,我用DREAMWEAVER內置預覧可以呈現到資料,但將它存為網頁後,無論在CHROME或IE看都是空白,各位大大我想知道為什麼會這樣啊...?謝謝~

XML

<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
  <items>
    <item>
      <title>Lorem</title>
      <description>Lorem Ipsum</description>
      <link>http://lorempixel.com/100/100/people/</link>
      <image>http://lorempixel.com/100/100/people/</image>
    </item>
    <item>
      <title>dolor sit amet</title>
      <description>consectetur adipisicing elit, sed do eiusmod</description>
      <link>http://lorempixel.com/100/100/food/</link>
      <image>http://lorempixel.com/100/100/food/</image>
    </item>
    <item>
      <title>tempor incididunt</title>
      <description>ut labore et dolore magna aliqua.</description>
      <link>http://lorempixel.com/100/100/city/</link>
      <image>http://lorempixel.com/100/100/city/</image>
    </item>    
  </items>
</rss>

JAVASCRIPT

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","http://alokation.com/temp/ParseXML/sample.xml",false);
xmlhttp.send(null);
xmlDoc=xmlhttp.responseXML; 
document.write("<ul id='content' data-role='listview' data-inset='true'>");
var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
  {   	
  	document.write("<li><a href='"+x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"'><img src='"+x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue+"'/><h2>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</h2><p>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</p></a></li>");
  }
document.write("</ul>");

我在這邊看到的:https://stackoverflow.com/questions/22543511/how-to-read-and-display-xml-content-in-html-page

看更多先前的討論...收起先前的討論...
小魚 iT邦大師 1 級 ‧ 2017-06-18 11:58:47 檢舉
JavaScript是瀏覽器端語言,不能直接存取xml檔案,範例中的第一種方式是ajax,要配合後端語言輸出,第二種方式我沒看過,不過看HttpRequest這個字眼,應該是類似ajax的方式吧,總之還是要有後端語言配合才能輸出。
@小魚 照你這樣說,node.js會想哭喔!
小魚 iT邦大師 1 級 ‧ 2017-06-19 07:40:36 檢舉
node.js我是沒接觸過,不過聽說他也是用某種方式去達到目的,跟傳統的JavaScript不一樣,這部份等我研究到那邊再去深入吧。
@小魚 有些話,有些事,都最好有個程度上的瞭解,再開口。不然很容易講出一堆不合時宜的東西(不合時宜?就是以前講是對的,但現在講就不見得是對的。)
fillano iT邦超人 1 級 ‧ 2017-06-19 16:36:43 檢舉
話說ajax的x,就是xml的說...這個技術最早是微軟提出的,透過他的XML元件在IE瀏覽器上實現。因為好用(讓網站操作可以app化),各家瀏覽器紛紛仿效,結果是網頁技術起死回生,Javascript有機會出下一個版本...
費公對js可真所謂如數家珍了。
小魚 iT邦大師 1 級 ‧ 2017-06-28 08:46:03 檢舉
互相交流吧,不講出來也不知道自己哪邊不懂啊,
講錯了就麻煩各位大大包容一下跟補充一下了...
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
海綿寶寶
iT邦大神 1 級 ‧ 2017-06-18 15:02:46

我用以下這段 HTML 可以達到你要的結果
但是是有前提的
如果你的 HTML 是本機的檔案而非放在 Web Server 上的話
那用瀏覽器開啟 HTML 會有安全性的警示(或限制)
如果你知道如何忽略/確認安全性限制的話
就可以得到你要的結果
否則
就會是一片空白
和瀏覽器的警告訊息(和被你忽略的驚嘆號提示)

<html>
<style>
  img{
    float: left;
    padding-right: 20px;
  }
  ul li{
    height: 100px;
    list-style: none;
  }
  ul li:hover{
    background-color: #ccc;
  }
  ul li a{
  	color: #555;
    text-decoration: none;
  }
  ul li:hover a{
    color: white;
  }
</style>
<body>
  <div id="main" >
  </div>
</body>
<script type="text/javascript">

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","http://alokation.com/temp/ParseXML/sample.xml",false);
xmlhttp.send(null);
xmlDoc=xmlhttp.responseXML; 
document.write("<ul id='content' data-role='listview' data-inset='true'>");
var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
  {   	
  	document.write("<li><a href='"+x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"'><img src='"+x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue+"'/><h2>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</h2><p>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</p></a></li>");
  }
document.write("</ul>");

</script>
</html>
1
mike8864aabb
iT邦新手 4 級 ‧ 2017-06-19 09:12:31

你這個xml是放在其他網站的吧

javascript在瀏覽器有個限制叫同源政策

ajax對於不同網站的資源是不能調用的

小魚 iT邦大師 1 級 ‧ 2017-06-28 07:54:25 檢舉

話說我用Chrome執行的時候出現了以下內容,
不知道這是什麼意思呢?
(p.s. Google翻譯真是好東西)

主線程上的XMLHttpRequest由於對最終用戶體驗的不利影響而被淘汰。 有關更多幫助,請訪問https://xhr.spec.whatwg.org/。

參考看看吧
關於chrome控制台警告:Synchronous XMLHttpRequest on the main thread終極解決辦法
(p.s.我也用Goole查出原文了)

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

我要發表回答

立即登入回答