XML在BS开发中的应用
在这一系列文章,笔者不打算就XML的语法及其文档结构以及BS开发作冗长的解说,希望阅读这一系列文章的读者都是有一定的XML和BS开发基础。而且这一系列的文章均以IE5.0及其以上版本浏览器为基础。服务端技术一般以ASP、JSP为例。
一、与SELECT标签的结合使用
通常我们在作BS的开发,有比较多的地方会用到SELECT标签(浏览器控件)来做类型或者参数选择,通常我们如果要做一个开放性和扩展性比较强的应用程序,都不会把这些类型或者参数选择项写死的。所以往往会定义一个数组或者查询数据库,使用循环来处理这类问题。在这里我要介绍的是应用XML技术,来达到灵活扩展的效果。下面以籍贯选择为例来讲述操作方式:
首先,我们有两种方式来组织XML文档。一种是静态的,比如直接写一个NativePlace.xml文件;另外一种就是在ASP或者JSP通过查询数据库动态生成一个xml页面。下面以第一种方式为例,NativePlace.xml文档内容如下
<?xml version="1.0" encoding="GB2312" ?>
<items>
<item id="0" parentId="">北京</item>
<item id="1" parentId="">天津</item>
<item id="2" parentId="" selected="true">湖南</item>
<item id="3" parentId="">湖北</item>
</items>
这里面的标签,用了items和item是有违xml思想的,XML是一种自表述的数据存档文件,也就是说,看到XML中的标签就可以知道存储的是什么内容。这里面我想做出一套通用的机制,这样在html中就无需过多的修改。
下面我们看看在html中怎么样使用。
...
我们定义一个select控件和一个xml的标签,后者在这里就是个数据岛。
<select id="_NativePlace" size="1">
</select>
<xml id="_XmlEngine" src="NativePlace.xml"></xml>
...
<script language="javascript" type="text/javascript">
function InitControls(){
// 使用XPath查询
var nodes = _XmlEngine.selectNodes("items/item");
for(var idx = 0; idx < nodes.length; idx ++){
_NativePlace.options.length = idx + 1;
_NativePlace.options[idx].value = nodes[idx].getAttribute("id");
_NativePlace.options[idx].text = nodes[idx].text;
if(nodes[idx].getAttribute("selected") == "true"){
_NativePlace.options[idx].selected = true;
}
}
}
// 调用页面初始化方法
window.attachEvent("onload", InitControls);
</script>
...
上面列出了页面的主干内容,在javascript中还可以加入异常处理机制或者使这类应用更加简洁方便。