|
动态创建 HTML
在说明如何创建幻灯片放映之前，首先扩展现在的例子，让 processReqChange 函数用服务器返回的 XML 请求结果创建一个 HTML 表格。这样做可以验证两件事：能够读取 XML 并能够根据 XML 动态创建 HTML。
清单 3 显示了修改后的代码，它将从返回的 XML 创建表格。
清单 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 所示的结果。
图 5. 修改后的测试页
修改后的 processReqChange 代码现在查看 responseXML 对象而不是 responseText 文本。此外，它还使用 getElementsByTagName 访问所有的 <slide> 标记。然后解析 src、width 和 height 属性，并使用 document 对象的 createElement 方法创建行和单元格来存放数据。该方法使用的 createElement 远比过去的老方法健壮，原来要建立一个包含表格内容的 HTML 字符串，然后用 innerHTML 将数据添加到已有的元素中。
出处：IBM developerWorks
责任编辑：moby
上一页 用DHTML与XML制作Ajax幻灯片 [2] 下一页 用DHTML与XML制作Ajax幻灯片 [4]
◎进入论坛网络编程版块参加讨论
|
第 1 页 
第 3 页 用DHTML与XML制作Ajax幻灯片 [3]
