在现有页面中创建动态的xml/xslt子页面

分享于 

5分钟阅读

Web开发

  繁體

介绍

使用 <DIV> 元素为网页创建逻辑分区。 借助 JavaScript,Div 也可以用于改变页面的视觉外观。 关于 Div的大问题是 innerHTML 属性。 通过操作 innerHTML,可以将页面转换为一组外观。数据和样式独立的子页。

示例屏幕截图

显示的上面 是产品订购菜单和篮子。 篮子使用我定制的" smartDiv"javascript对象。 这个对象的使用有助于在页面中创建一个持久的保存状态购物 MODULE。 smartDiv"是位于外部JavaScript文件中的对象。 它有两个参数:

  • XML root 名称
  • 转换器的URL ( XSLT )

smartDiv 具有描述div外观可视化的"集合集"属性。

  • SetClassName
  • SetPosition
  • SetSize
  • SetBorder

另外,它还有另一个重要属性 xml_dom,将在后面详细解释。 smartDiv 唯一的方法是 TransformXML 方法。 这个函数通过使用XMLHTTP和参数 URL 来检索 XSLT。 下一步使用XSLT将 xml_dom 转换为 HTML,并将结果写入到 DivinnerHTML 中。

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"工作

  • ordering page创建一个 smartDiv 实例。

如果你注意到了,我将这个实例称为 Basket。 下一步设置大小。位置和样式。 另外,root 标记的NAME 和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); 
}
  • 每次订购货物的数量改变时,相应地调整 XML。

这是使用 smartDivxml_dom 属性的地方。

通过"文本"元素列表,我们将它们收集到 xml_dom 中。

它看起来像这样:

<Basket><Productqty="1"name="fish"price="1.99"/></Basket>

现在我们唯一要做的就是调用 smartDivTransformXML的方法,并且它对我们来说是工作。 结果显示在 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 本身就是。 它清理所有"文本"元素和 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();
}

动态  exi  
相关文章