<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=big5"/> <meta name="author" content="Chui-Wen Chiu"> <script type="text/javascript" src="../prototype.js"></script> <script type="text/javascript" src="../../yui-utilities.js"></script> <script type="text/javascript" src="../../ext-yui-adapter.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="../../ext-all-debug.js"></script> <script type = 'text/javascript'> <!--// Ext.onReady(function(){ // 1. 產生 XmlReader // 下面的參數主要的意思是將 XML 中的 <Item> 標籤轉換成陣列 // 陣列中的每一筆資料代表一筆紀錄,每一筆紀錄使用 <ASIN>xxx</ASIN> 為識別碼 // 將 <Item> 標籤的數量放置在 totalRecords // 每一筆紀錄的欄位分別抓取 <Item> 標籤下的 <Author>, <Title>, <Manufacturer>, <ProductGroup> 等標籤 var xr = new Ext.data.XmlReader({ record: 'Item', // XML 標籤 id: 'ASIN', // 紀錄識別碼對應 XML 的標籤 totalRecords: '@total' // 取得 record 欄位指定標籤(<Item>)的數量,如果未指定該欄位,則 Record 物件的 totalRecords 屬性將直接取用 <item> 標籤數量,一般情況兩個值應該都一樣 }, // 要讀取的欄位定義 [ { name: 'Author', mapping: 'ItemAttributes > Author' }, 'Title', 'Manufacturer', 'ProductGroup' ] ); // 2. 產生一個 XML Document var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); var xmlStr = '/ <?xml version="1.0" encoding="big5"?>/ <Items>/ <Item>/ <ASIN>0446354732</ASIN>/ <DetailPageURL>http://www.amazon.com/gp/</DetailPageURL>/ <ItemAttributes>/ <Author>中文作者</Author>/ <Manufacturer>Warner Books</Manufacturer>/ <ProductGroup>Book</ProductGroup>/ <Title>Nothing Lasts Forever</Title>/ </ItemAttributes>/ </Item>/ </Items>/ '; xmlDoc.loadXML(xmlStr); // 3. 將 XML Document 轉換成 Array var rs = xr.readRecords(xmlDoc); // 4. 取得資料筆數 var count = rs.totalRecords; $('lblCount').innerText = count; var out = ''; for(var i = 0; i< count; ++i){ // 5. 取得每一筆紀錄,型態為 Record 物件 var r = rs.records[i]; // Record 有兩個重要屬性 // id: Item 的識別碼 // data: 欄位陣列 // 上述兩個屬性都依據 XmlReader 建構子的兩個參數所決定 out += r.id + '=>' + [r.data['Author'], r.data['Title'] , r.data['Manufacturer'] , r.data['ProductGroup'] ].join(',') + '<br/>'; } $('divRecord').innerHTML = out; }); //--> </script> </head> <body> <div> <label>Total:</label><label id = 'lblCount' style = 'color: red'></label> <div id ='divRecord'> </div> </div> </body> </html> |