模式 5. 替换多个 HTML 片段
最后要演示的这个模式是第一个模式的高级版本：包含来自服务器内容的 <div> 标记的替代物。Web 应用程序中的一个常见问题是在响应用户输入时，必须更新显示页面中的一些区域。举例来说，在一个股票报价应用程序中，显示页面的一部分可能会展示最近的报价，而另一部分则显示最近报价的列表。
为更新显示页面中的多个区域，我使用了服务器的 XML 响应，它包含每个部分的数据。然后，使用一个正则表达式将响应分解为单个部分。清单 13 显示了这种技巧。
清单 13. Pat5_multi_segment.html
<html>
<head>
<script>
var req = null;
function processReqChange() {
if (req.readyState == 4 && req.status == 200 ) {
var one = req.responseText.match( /\<one\>(.*?)\<\/one\>/ );
document.getElementById( 'divOne' ).innerHTML = one[1];
var two = req.responseText.match( /\<two\>(.*?)\<\/two\>/ );
document.getElementById( 'divTwo' ).innerHTML = two[1];
} }
function loadXMLDoc( url ) { ... }
var url = window.location.toString();
url = url.replace( /pat5_multi_segment.html/, 'pat5_data.xml' );
loadXMLDoc( url );
</script>
</head>
<body>
This is the content for segment one:<br/>
<div id="divOne" style="border:1px solid black;padding:10px;">
</div>
And segment two:<br/>
<div id="divTwo" style="border:1px solid black;padding:10px;">
</div>
</body>
</html>
|
清单 14 展示了来自服务器的数据。
清单 14. Pat5_data.xml
<segments> <one>Content for segment one</one> <two>Content for segment <b>two</b></two> </segments> |
 |
在浏览器中加载这段代码时，将看到 图 7 所示的结果。
图 7. 使用服务器的数据更新显示页面中的两部分
在页面代码中，我还可以使用 XML 响应，因为服务器返回的是有效的 XML。但是使用正则表达式比从 XML 代码中分解单独部分更加简单。