在现有页面内创建动态 XML/XSLT 子页面

• 下载源代码文件 - 51.2 KB

引言

使用 <DIV> 元素可以为您的网页创建逻辑分区。借助 JavaScript 的帮助，Div 还可以用于更改页面的视觉外观。DIV 的关键在于 innerHTML 属性。通过操作 innerHTML，可以将页面转换为一组外观、数据和样式独立的子页面。

上面展示的是产品订购菜单和购物车。购物车使用了我的自定义 “smartDiv” JavaScript 对象。使用此对象有助于在页面内创建一个持久的、保存状态的购物模块。“smartDiv” 是一个位于外部 JavaScript 文件中的对象。它有两个参数

1. XML 根名称
2. 转换器（XSLT）的 URL

smartDiv 具有 “SET” 属性，用于描述 DIV 的视觉外观。

• 设置类名
• 设置位置
• 设置大小
• SetBorder

此外，它还有另一个重要的属性 xml_dom，稍后会详细解释。smartDiv 只有一个方法，即 TransformXML 方法。此函数使用 XMLHTTP 和参数 URL 来检索 XSLT。下一步使用 XSLT 将 xml_dom 转换为 HTML，并将结果写入 DIV 的 innerHTML。

function smartDiv(rootname,URL) {
  this.Display = document.createElement('div'); // create 
  this.Display.id = 'bask';
  document.body.appendChild(this.Display);
  this.Display.style.position = 'absolute'; 
  this.Display.innerHTML ='';
  
  this.SetClassName = function(cname) {
   --------------------
  }
  this.SetSize = function(w,h) {
   --------------------
  }
  this.SetPosition = function(l,t) {
   --------------------
  }
  this.SetBorder = function(bs,bc,bw) { 
   --------------------
  } 
  this.xmlHTTP = null;
  this.xml_dom = new ActiveXObject("MSXML2.DOMDocument");
  this.xml_dom.loadXML('');
  this.root = this.xml_dom.createElement(rootname);
  this.xml_dom.appendChild(this.root);
  this.xslresponse =null;
  
  this.TransformXML = function() {
    try {
      this.xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
      this.xmlHTTP.open("GET",URL,false);
      this.xmlHTTP.send();
      this.xslresponse = this.xmlHTTP.responseText;
      
      this.xml = new ActiveXObject("Msxml2.DOMDocument.4.0");
      this.xsl = new ActiveXObject("Msxml2.DOMDocument.4.0");
      this.xml.async = false;
      this.xsl.async = false;
      this.xml.validateOnParse = false;
      this.xml.loadXML(this.xml_dom.xml);
      this.xsl.loadXML(this.xslresponse);
      this.Display.innerHTML = this.xml.transformNode(this.xsl); 
    } catch (e){
      alert(e.description);
    }
  }
}

如何使 “smartDiv” 工作

1. 订购页面创建一个 smartDiv 的实例。

如您所见，我将此实例称为 Basket。接下来设置大小、位置和样式。同时，分配根标签的名称和 XSLT 的 URL。

function initDiv() {
 Basket = new smartDiv('Basket','basket.xslt');
 Basket.SetClassName('Border');
 Basket.SetSize(180,280);
 Basket.SetPosition(200,20);
 Basket.SetBorder('dashed','#999999',1); 
}

2. 每次订购的商品数量发生变化时，XML 都会相应地进行调整。

这就是 smartDiv 的 xml_dom 属性发挥作用的地方。

遍历 “TEXT” 元素的列表，我们将它们收集到 xml_dom 中。

看起来是这样的：

<Basket>
    <Product qty="1" name="fish" price="1.99"/>
</Basket>

现在我们所要做的就是调用 smartDiv 的 TransformXML 方法，它会为我们完成工作。结果将在 DIV 元素内显示。

smartDiv.prototype.BuildXML = function() {
 var elm = document.forms[0].elements;
 oSelection = this.xml_dom.selectNodes("//Product");
 oSelection.removeAll();
 for (var i=0; i < elm.length ;++i){
    if (elm[i].type == 'text') {
    var Product = this.xml_dom.createElement("Product");
    var attr = this.xml_dom.createAttribute("qty");
    attr.value = elm[i].value;
    Product.setAttributeNode(attr);
    attr = null;
   
    ---------------------------

    this.root.appendChild(Product);
 }} 
 this.TransformXML();
}
var Basket;

其他功能

函数 Clear 不言自明。它会清除所有 “TEXT” 元素以及 xml_dom。

function Clear() {
  var elm = document.forms[0].elements;
  for (var i=0; i < elm.length ;++i){
    if (elm[i].type == 'text') {
       elm[i].value = '';
    }
  } 
  Basket.BuildXML();
}