HTML5 表單元件：client端，開啟product.xml文字檔，再以表格形式顯示資料(下載product.xml)
(要用chrome才能查詢到xml資料)

1.重要觀念：
(A).client端讀取文字檔，要等待這個函數讀完，xmlstring 才會完整正確
(B).所以，解析xmlstring的工作必須在另外一個函數來做 show03()
(C).必須分兩階段來處理，也就是cilient端讀取xml，一定要有兩個按鈕，第1個是opfile對話方塊，第2個是將xmlstring轉成xmlDoc物件的函數，

2.重要觀念：
在client端是無法用loadxml的方式讀進整個xml物件的，所以若要在client 端讀進xml的資料，變通的方法是，以『字串』的方式讀入(而非xml物件)，讀入後再將字串轉成xml物件

3.步驟1：第1個函數show01()讀入純文字的步驟

(A) 開啟檔案元件

<input id="file01" type="file" onchange="show01(this)"/>

(B).取得檔案參數
filename = thisfileinfo.files[0].name;
filesize= thisfileinfo.files[0].size;
filetype= thisfileinfo.files[0].type;

(3).讀取純文字檔的內容（取得字串：xmlstring）
function show02(fileinfo) {
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
document.getElementById('txt01').value = event.target.result;
xmlstring = event.target.result;
};
fReader.readAsText(file);
}

(3).步驟2：函數2：show03()將字串轉成xml物件xmlDoc=parser.parseFromString(xmlstring,"text/xml")

if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(xmlstring,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(xmlstring);
}

(4).步驟3：讀取的XML(xmlDoc)如何抓到所有學生student的結構資料

//將xmlDoc輸出成表格資料
str ="<table border=1><tr><td>名稱</td><td>價錢</td><td>庫存</td></tr>";
var pro=xmlDoc.getElementsByTagName("product");

for (i=0;i<pro.length;i++)
{
str +="<tr><td>";
str +=pro[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
str +="</td><td>";
str +=pro[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
str +="</td><td>";
str +=pro[i].getElementsByTagName("qty")[0].childNodes[0].nodeValue;
str +="</td></tr>";
}
str +="</table>";
document.getElementById("id01").innerHTML = str;

(4).表格的標籤語法:<tr列，<td欄

<table border=1>
<tr>
<td>學號</td><td>姓名</td><td>電話</td><td>電子郵件</td>
</tr>

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

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

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

(5).product.xml結構

<?xml version="1.0" standalone="yes"?>
<csie>
<product>
<name>阿Q桶麵</name>
<price>30</price>
<qty>30</qty>
</product>
<product>
<name>可口可樂</name>
<price>15</price>
<qty>15</qty>
</product>
<product>
<name>義美水餃</name>
<price>85</price>
<qty>50</qty>
</product>
<product>
<name>鐵路便當</name>
<price>60</price>
<qty>10</qty>
</product>
</csie>