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

1.重要觀念：

(A).client端讀取文字檔，要等待這個函數讀完，xmlstring 才會完整正確
(B).所以，解析xmlstring的工作必須在另外一個函數來做 show03()
(C).必須分兩階段來處理，也就是cilient端讀取xml，一定要有兩個按鈕，第1個是opfile對話方塊(show01()函數)，第2個是將xmlstring轉成xmlDoc物件的函數initialxmlDoc()(在上一頁previous()，下一頁next()，在這兩個函數裡面呼叫initialxmlDoc())
(D).但在上一頁裡面的有個問題：因為要判別是否下一個已經超過極限，if(i>pro.length){i=0;}，第一次執行next()，pro產品xmlDoc物件還沒有值undefined，
所以要先判斷if(pro == undefined){initialxmlDoc();}若是pro產品xmlDoc物件還沒有值undefined，就去執行initialxmlDoc()，將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：initialxmlDoc()將字串轉成xml物件

function initialxmlDoc()
{
//將xmlstring轉成xml物件 xmlDoc
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);
}
pro=xmlDoc.getElementsByTagName("product");
}
}

(4).步驟3：以上一筆，下一筆顯示資料

步驟1:建立next()函數來控制到下一筆
function next() {
if(pro == undefined){initialxmlDoc();}
i++;
if(i>pro.length){i=0;}
changedata(i);
}

步驟2:建立previous()函數來控制到下一筆

function previous() {
if(pro == undefined){initialxmlDoc();}
i--;
if(i<0){i=pro.length-1;}
changedata(i);
}

步驟3:建立顯示單筆資料的changedata(i)

var i=0;
var pro;
function changedata(i)
{
str ="名稱:";
str += pro[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
str +="<br/>價錢:";
str +=pro[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
str +="<br/>庫存：";
str +=pro[i].getElementsByTagName("qty")[0].childNodes[0].nodeValue;

document.getElementById("id01").innerHTML = str;
}

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>