柠檬铺

在线购物已经变得很平常了，而在使用购物车的时候，用户期望在其身上能够获得（足够的）灵活性。看看你能够如何把ASP和XML结合起来提供所用户需要的功能。

创建虚拟购物车的方法从来都不是单一的。最近，我碰到一个机会重新编写了一个经典的ASP购物车，让它成为一个拥有与原来类似的外观和感觉，但是更加灵活和更加快速的购物车。我决定利用XML，并开发一个跨浏览器的解决方案。现在让我来告诉你我自己碰到的一些问题，以及我是如何改进原有设计的。

原来的购物车
由于原来的购物车是针对特定的一组客户的，所以它更多地依赖于对用户的培训而非易用性。除了完全清空购物车，没有其他的机制用来对（所购的）内容进行更改。如果你往购物车里放入了错误的东西或者错误的数量，你不得不从头开始才能够更正这一错误。

而不为人知的是，原来的购物车再也无法变得更好。有限数量的行被显示出来，而客户会一页一页地翻阅购物车里的内容。这种方法的问题是，所有的东西都被保存在一个以ASP会话ID为基础的表格里。当客户浏览购物车内容的时候，就会进行一次查询。此外，如果会话超时，购物车的内容将会一直保留在表格里，直到有人手动删除它。

新的方法
我不想重复以前的错误，所以新的购物车将会基于XML会话而不会基于表格。这种方法有多个好处。首先，整个购物车以XML数据岛（Data Island）的形式保存在客户端上，如下面列表A所示。在进行简单浏览的时候，这就不再需要对表格进行查询了。但是用到了MozillaDSO()和xmlPage()函数。

列表A

<root><br /> <row><br /> <selected></selected><br /> <line>1</line><br /> <quantity>1</quantity><br /> <item>W01</item><br /> <description>Swept hilt rapier</description><br /> <weight>3.6</weight><br /> <unitprice>195.95</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>2</line><br /> <quantity>2</quantity><br /> <item>W02</item><br /> <description>Hand-and-a-half sword</description><br /> <weight>5.8</weight><br /> <unitprice>250.95</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>3</line><br /> <quantity>1</quantity><br /> <item>W03</item><br /> <description>Wood long bow</description><br /> <weight>2.7</weight><br /> <unitprice>190.00</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>4</line><br /> <quantity>1</quantity><br /> <item>W04</item><br /> <description>Wizard staff</description><br /> <weight>3.1</weight><br /> <unitprice>89.25</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>5</line><br /> <quantity>1</quantity><br /> <item>C01</item><br /> <description>Gauntlets</description><br /> <weight>0.7</weight><br /> <unitprice>25.00</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>6</line><br /> <quantity>5</quantity><br /> <item>C02</item><br /> <description>Knee-high boots</description><br /> <weight>1.9</weight><br /> <unitprice>95.00</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>7</line><br /> <quantity>9</quantity><br /> <item>C04</item><br /> <description>Cloak</description><br /> <weight>1.0</weight><br /> <unitprice>125.00</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>8</line><br /> <quantity>22</quantity><br /> <item>C05</item><br /> <description>Orc repellent</description><br /> <weight>1.0</weight><br /> <unitprice>8.95</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>9</line><br /> <quantity>1</quantity><br /> <item>W05</item><br /> <description>Dwarf axe</description><br /> <weight>8.0</weight><br /> <unitprice>358.95</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>10</line><br /> <quantity>1</quantity><br /> <item>A01</item><br /> <description>Steel cap</description><br /> <weight>2.8</weight><br /> <unitprice>219.95</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>11</line><br /> <quantity>1</quantity><br /> <item>A02</item><br /> <description>Chainmail shirt</description><br /> <weight>15.3</weight><br /> <unitprice>487.22</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>12</line><br /> <quantity>1</quantity><br /> <item>A03</item><br /> <description>Mithril shirt</description><br /> <weight>0.4</weight><br /> <unitprice>87236.03</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>13</line><br /> <quantity>1</quantity><br /> <item>W07</item><br /> <description>Elvish long sword</description><br /> <weight>1.9</weight><br /> <unitprice>794.99</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>14</line><br /> <quantity>1</quantity><br /> <item>W08</item><br /> <description>Elvish short sword</description><br /> <weight>0.8</weight><br /> <unitprice>435.99</unitprice><br /> </row></p> <p><row><br /> <selected></selected><br /> <line>15</line><br /> <quantity>3</quantity><br /> <item>W09</item><br /> <description>Short sword</description><br /> <weight>1.5</weight><br /> <unitprice>89.95</unitprice><br /> </row><br /> </root></p> <p>

除了浏览，xmlPage()方法还提供了原来的购物车不具备的功能——更改数量和删除物品的能力。由于它使用了两个XML数据岛——一个是绑定，另一个是非绑定——所以对绑定数据岛的更改不会影响到非绑定数据岛，直到点击更新键。一旦更新按钮被点击，就会有一种机制，比如XMLHTTP，把变化传送给服务器。如果由于某种原因你无法完全信任微软Internet Explorer和Mozilla里的XMLHTTP，那么一个带有隐藏式框架（例如iframe）和输入框的表单可以被用来实现同样的目的。下面的列表B显示了更新函数背后的JavaScript。

列表B

function update() {<br />   /* Function:      update<br />      Creation Date: May 5, 2003<br />      Programmer:    Edmond Woychowsky<br />      Purpose:       The purpose of this function is to apply bound Data</p> <p> Island  changes to the full Data Island.  This is</p> <p> accomplished by matching line numbers in both Data</p> <p> Islands.  Once this has been completed the full Data</p> <p> Island is sent to the server via XMLHTTP.</p> <p>     Update Date:       Programmer:              Description:<br />   */</p> <p> var objXMLHTTP;</p> <p> //     XMLHTTP request object</p> <p> var reWork = new RegExp('internet explorer','gi');</p> <p> document.body.style.cursor = 'wait';     //     Set cursor</p> <p> for(var i=0;i < objPage.bound.getElementsByTagName('row').length;i++)</p> <p> for(var j=0;j < objPage.full.getElementsByTagName('row').length;j++)</p> <p> if(objPage.bound.getElementsByTagName('line').item(i).firstChild.nodeValue == objPage.full.getElementsByTagName('line').item(j).firstChild.nodeValue) {</p> <p> for(var k=0;k < objPage.bound.getElementsByTagName('row').item(i).childNodes.length;k++)</p> <p> if(objPage.bound.getElementsByTagName('row').item(i).childNodes.item(k).nodeName != '#text')</p> <p> switch(objPage.bound.getElementsByTagName('row').item(i).childNodes.item(k).nodeName.toLowerCase()) {</p> <p> case('quantity'):</p> <p> case('selected'):</p> <p> try {</p> <p> objPage.full.getElementsByTagName('row').item(j).childNodes.item(k).firstChild.nodeValue = objPage.bound.getElementsByTagName('row').item(i).childNodes.item(k).firstChild.nodeValue;</p> <p> }</p> <p> catch(e) {</p> <p> try {</p> <p> objPage.full.getElementsByTagName('row').item(j).childNodes.item(k).appendChild(objPage.bound.getElementsByTagName('row').item(i).childNodes.item(k).firstChild.cloneNode(true));</p> <p> }</p> <p> catch(e) { }</p> <p> }</p> <p> break;</p> <p> }</p> <p> break;</p> <p> }</p> <p> //     Send updates</p> <p> if(reWork.test(navigator.appName))</p> <p> objXMLHTTP = new ActiveXObject('Microsoft.XMLHTTP');</p> <p> else</p> <p> objXMLHTTP = new XMLHttpRequest();</p> <p> objXMLHTTP.open('GET','xmlServer.asp',true);</p> <p> objXMLHTTP.setRequestHeader('content-type','text/xml');</p> <p> objXMLHTTP.onreadystatechange = function() {</p> <p> var reWork = new RegExp('internet explorer','gi');</p> <p> if(objXMLHTTP.readyState == 4) {</p> <p> if(reWork.test(navigator.appName))</p> <p> objPage.full.XMLDocument.loadXML(unescape(objXMLHTTP.responseText));</p> <p> else</p> <p> objPage.full.innerHTML = unescape(objXMLHTTP.responseText);</p> <p> //Handle empty page</p> <p> if(objPage.page() > objPage.pagecount())</p> <p> objPage.showPrevious();</p> <p> else</p> <p> objPage.showPage();</p> <p> // Display page info</p> <p> document.getElementById('currentpage').lastChild.nodeValue = objPage.page();</p> <p> document.getElementById('totalpages').lastChild.nodeValue = objPage.pagecount();</p> <p> document.body.style.cursor = 'auto';</p> <p> } }</p> <p> // IE work around</p> <p> try {</p> <p> objPage.full.innerHTML = objPage.full.XMLDocument.xml;</p> <p> }</p> <p> catch(e) { }</p> <p> if(reWork.test(navigator.appName))</p> <p> objXMLHTTP.setRequestHeader('request',escape(objPage.full.XMLDocument.xml));</p> <p> else</p> <p> objXMLHTTP.setRequestHeader('request',escape(objPage.full.innerHTML));</p> <p> objXMLHTTP.send(null);</p> <p> }<br />

在做进一步讲解之前，我会在同一个句子里使用Mozilla和XMLHTTP。有书面的证据表明Mozilla支持XMLHTTP。尽管其句法与Internet Explorer所用的句法稍有不同，但这并不是JavaScript无法处理的东西。完整的客户端解决方案见图A，而ASP见下面的列表C。