動態(tài)創(chuàng)建 HTML
在說明如何創(chuàng)建幻燈片放映之前,首先擴展現(xiàn)在的例子,讓 processReqChange 函數(shù)用服務(wù)器返回的 XML 請求結(jié)果創(chuàng)建一個 HTML 表格。這樣做可以驗證兩件事:能夠讀取 XML 并能夠根據(jù) XML 動態(tài)創(chuàng)建 HTML。
清單 3 顯示了修改后的代碼,它將從返回的 XML 創(chuàng)建表格。
清單 3. 改進的測試頁面
<html> <body> <table> <tbody id="dataTable"> </tbody> </table>
<script> function processReqChange() { if (req.readyState == 4 && req.status == 200 && req.responseXML != null) { var dto = document.getElementById( 'dataTable' );
var items = []; var nl = req.responseXML.getElementsByTagName( 'slide' ); for( var i = 0; i < nl.length; i++ ) { var nli = nl.item( i ); var src = nli.getAttribute( 'src' ).toString(); var width = parseInt( nli.getAttribute( 'width' ).toString() ); var height = parseInt( nli.getAttribute( 'height' ).toString() );
var trNode = document.createElement( 'tr' );
var srcNode = document.createElement( 'td' ); srcNode.innerHTML = src; trNode.appendChild( srcNode );
var widthNode = document.createElement( 'td' ); widthNode.innerHTML = width.toString(); trNode.appendChild( widthNode );
var heightNode = document.createElement( 'td' ); heightNode.innerHTML = height.toString(); trNode.appendChild( heightNode );
dto.appendChild( trNode ); } load_slides( items ); start_slides(); } }
function loadXMLDoc( url ) { req = false; if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; } } else if(window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req = false; } } } if(req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(""); } }
loadXMLDoc( "http://localhost/kenburns/slides.php" ); </script>
</body> </html>
在瀏覽器中打開該頁面將顯示 圖 5 所示的結(jié)果。
圖 5. 修改后的測試頁
修改后的 processReqChange 代碼現(xiàn)在查看 responseXML 對象而不是 responseText 文本。此外,它還使用 getElementsByTagName 訪問所有的 <slide> 標記。然后解析 src、width 和 height 屬性,并使用 document 對象的 createElement 方法創(chuàng)建行和單元格來存放數(shù)據(jù)。該方法使用的 createElement 遠比過去的老方法健壯,原來要建立一個包含表格內(nèi)容的 HTML 字符串,然后用 innerHTML 將數(shù)據(jù)添加到已有的元素中。
出處:IBM developerWorks
責任編輯:moby
上一頁 用DHTML與XML制作Ajax幻燈片 [2] 下一頁 用DHTML與XML制作Ajax幻燈片 [4]
◎進入論壇網(wǎng)絡(luò)編程版塊參加討論
|