XML學習筆記（三）--- 通過JavaScript解析XML

以下內容多為筆者在菜鳥教程中的摘抄，主要用于個人學習，如侵權請聯系我刪除

XML解析器

XML 解析器把 XML 文檔轉換為 XML DOM 對象 - 可通過 JavaScript 操作的對象。

解析XML文檔：

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
	//創建一個XMLHttpRequest用于網絡通信
	xmlhttp=new XMLHttpRequest();
}
else
{	// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

解析XML字符串
通過一個String進行拼接：

txt="<bookstore><book>";
txt=txt+"<title>Everyday Italian</title>";
txt=txt+"<author>Giada De Laurentiis</author>";
txt=txt+"<year>2005</year>";
txt=txt+"</book></bookstore>";

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 DOM(Document Object Model)

定義了訪問和操作文檔的標準方法
一個解析的實例：

<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>

<script>
txt="<note>";
txt=txt+"<to>Tove</to>";
txt=txt+"<from>Jani</from>";
txt=txt+"<heading>Reminder</heading>";
txt=txt+"<body>Don't forget me this weekend!</body>";
txt=txt+"</note>";

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);
}

//通過DOM獲取解析后的XML的值
document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

通過XML解析的數據實現一個HTML界面：

<html>
<body>

<script>
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","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>

</body>
</html>

運行結果如下：
在這里插入圖片描述
通過XML和JavaScript構成一個基本的網頁應用
源代碼如下：

<!DOCTYPE html>
<html>
<head>

<script>
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","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

x=xmlDoc.getElementsByTagName("CD");
i=0;

//用于在前端Server中獲取所有CD的內容
function displayCD()
{
	artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
	title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
	year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
	txt="Artist: " + artist + "<br>Title: " + title + "<br>Year: "+ year;
	document.getElementById("showCD").innerHTML=txt;
}

function next()
{
if (i<x.length-1)
  {
  i++;
  displayCD();
  }
}

function previous()
{
if (i>0)
  {
  i--;
  displayCD();
  }
}
</script>
</head>
//在加載的時候就獲取所有CD的內容
<body onload="displayCD()">

<div id='showCD'></div><br>
// 用于獲取兩個按鈕，并且得到相應的函數功能
<input type="button" onclick="previous()" value="<<" />
<input type="button" onclick="next()" value=">>" />

</body>
</html>

實現效果如下：
在這里插入圖片描述
通過點擊左右按鈕可以切換CD

本文鏈接：https://blog.csdn.net/qq_41989109/article/details/103887776

智能推薦

xml--通過jdom解析及生產XML

JDOM是一種使用 XML 的獨特 Java 工具包，用于快速開發 XML 應用程序。它的設計包含 Java 語言的語法乃至語義。 JAXP （用于 XML 語法分析的 Java API）包含了三個軟件包 –org.w3c.dom ，W3C 推薦的用于 XML 標準規劃文檔對象模型的 Java 工具 –org.xml.sax ，用于對 XML 進行語法分析的事件驅動的簡單 ...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...