B/S结构的程序每执行一个操作往往都需要刷新页面,在刷新过程中,服务器不但要将数据发送到客户端,还需要将一些格式信息,比如说表格、图片、标题等重新发送,占用了大量带宽。尽管IE提供了页面缓存的功能,但对于时刻发生变化的动态网页,本地缓存基本上不起什么作用。如果能够让Web服务器只传送关键数据,不传送格式就可以减少带宽占用。当然,在我的系统开发过程中,使用了智能卡进行关键数据加、解密,出于速度考虑,尽可能减少被加密的数据就可以提高信息的显示速度。
我们可以使用微软提供的webservice.htc实现通过JavaScript调用WebService,同时利用XML和XSL实现数据与格式相分离。主要技术要点如下:
一、WebService的调用:
首先从微软网站上下载webservice.htc,使用方法就不说了,网上有详细的调用说明。在网页BODY中添加一个DIV,实现对webservice.htc的引用,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
同时添加两个DIV,用来显示错误信息以及结果信息:
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
编写JavaScript,实现对WebService的引用:
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
WebService返回经过编码的XML(在这里我们对信息进行了智能卡加密),在客户端解码后,我们可以借助MSXML实现对XML解析以备并进行格式处理。
二、异步调用WebService,解析XML
声明两个变量,用来存储ActiveX对象:
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
通过JavaScript调用WebService的代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/14941be54ae11e40340191138b3350cd.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/14941be54ae11e40340191138b3350cd.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
因为是异步调用,所以当远程服务调用完成后会触发dataArrived方法。”DoSearch”后的内容是调用WebService所跟的参数。下面我们看看dataArrived代码:
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/14941be54ae11e40340191138b3350cd.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/14941be54ae11e40340191138b3350cd.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
下面将传递过来的XML应用XSL样式并显示在IE浏览器中,这是通过调用ApplyXslStyle()方法实现的。该方法使用“MSXML2.XSLTemplate”组件实现解析操作。因为XSL样式通常不会发生变化,所以本地缓存有助于提高XSL访问效率。代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b6a5ce2b3fc7ee8cdaa4406c519214d0.gif)
这样,通过WebService传递过来的XML数据就经过XSL格式处理后显示在IE里面。下面给出几个截图:
图片(1)检索数据前
![](https://i-blog.csdnimg.cn/blog_migrate/abddd34441ecb40382fcdec82b917ae3.jpeg)
..............................................................................................
图片(2)检索数据后
![](https://i-blog.csdnimg.cn/blog_migrate/7417a733ebcfab531f468b7bb1263d90.jpeg)
..............................................................................................
图片(3)自定义检索条件
![](https://i-blog.csdnimg.cn/blog_migrate/77f5ea64e6d24cac2fc227755ceecd98.jpeg)