First we try, then we trust

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

B/S结构的程序每执行一个操作往往都需要刷新页面,在刷新过程中,服务器不但要将数据发送到客户端,还需要将一些格式信息,比如说表格、图片、标题等重新发送,占用了大量带宽。尽管IE提供了页面缓存的功能,但对于时刻发生变化的动态网页,本地缓存基本上不起什么作用。如果能够让Web服务器只传送关键数据,不传送格式就可以减少带宽占用。当然,在我的系统开发过程中,使用了智能卡进行关键数据加、解密,出于速度考虑,尽可能减少被加密的数据就可以提高信息的显示速度。


我们可以使用微软提供的webservice.htc实现通过JavaScript调用WebService,同时利用XML和XSL实现数据与格式相分离。主要技术要点如下:

一、WebService的调用:

首先从微软网站上下载webservice.htc,使用方法就不说了,网上有详细的调用说明。在网页BODY中添加一个DIV,实现对webservice.htc的引用,如下:

<div id="htcWService" style="BEHAVIOR: url( ../../global/webservice.htc)"></div>

同时添加两个DIV,用来显示错误信息以及结果信息:

<DIV class="homemed" id="SearchResult"><b>说明:</b>输入户号,用鼠标点击“检索”按钮开始检索。</DIV>
<DIV class="homemed" id="ErrorMessage"></DIV>


编写JavaScript,实现对WebService的引用:

function openWebService()
{
    htcWService.useService(
"../../WebServices/Garkcx.asmx?WSDL","Garkcx");
}

WebService返回经过编码的XML(在这里我们对信息进行了智能卡加密),在客户端解码后,我们可以借助MSXML实现对XML解析以备并进行格式处理。

二、异步调用WebService,解析XML

声明两个变量,用来存储ActiveX对象:

var objXMLData;       //存储要解析的 XML 文档
var objXMLStyle;      //存储 XSLT STYLE

通过JavaScript调用WebService的代码如下:

function doSearch()
{
  
var iCallID;
  
  
  
  iCallID 
= htcWService.Garkcx.callService(dataArrived, "DoSearch", strUserGUID, strSearchMethod, strDataBaseName, strSearchCondition, encodeMethod);
}

因为是异步调用,所以当远程服务调用完成后会触发dataArrived方法。”DoSearch”后的内容是调用WebService所跟的参数。下面我们看看dataArrived代码:

function dataArrived(objResult)
{
  
if(objResult.error)
  {
    
var strErrorCode = objResult.errorDetail.code;
    
var strErrorMsg = objResult.errorDetail.string;
    
var strErrorRaw = objResult.errorDetail.raw;
    
    document.all('ErrorMessage').innerHTML 
= '<b>* 错误 -</b> 无法找到指定身份证号的用户。<br />+ strErrorMsg;
  }
  
else
  {
    
try
    {
      objXMLData 
= new ActiveXObject('MSXML2.FreeThreadedDOMDocument');
    }
    
catch(e){}
    
    
// 判断解析器对象是否可以使用
    if (objXMLData == null)
    {
      document.all('ErrorMessage').innerHTML 
= '* <b>错误: 不正确的 XML 解析器版本.</b><br />';
      
return;
    }
    
    
    
//此处有一些解码的代码,省略
    
    strResult 
= objResult.value;

    
// 事件不断被触发,检测XML数据是否装载完成
    objXMLData.onreadystatechange = dataLoaded;
    
    objXMLData.validateOnParse 
= true;
    objXMLData.async 
= true;
    
    
// 装载从 Web Service 返回的结果
    objXMLData.loadXML(strResult);
  }
}

function dataLoaded()
{
  
// 异步访问,如果 XML 解析器的 readyState 属性为 4, 表示装载结束。
  if (objXMLData.readyState == 4)
  {
    
if (objXMLData.parseError.errorCode != 0)
      
// 装载过程出现错误
      document.all('ErrorMessage').innerHTML = '<b>* 错误</b> - 无法解析 XML 数据结果.';
    
else
    {
      document.all('SearchResult').innerHTML 
= '';
      ApplyXslStyle();  
// 应用 XSLT 样式
    }
  }
}

下面将传递过来的XML应用XSL样式并显示在IE浏览器中,这是通过调用ApplyXslStyle()方法实现的。该方法使用“MSXML2.XSLTemplate”组件实现解析操作。因为XSL样式通常不会发生变化,所以本地缓存有助于提高XSL访问效率。代码如下:

function ApplyXslStyle()
{
  objXMLStyle 
= new ActiveXObject('MSXML2.FreeThreadedDOMDocument');
  objXMLStyle.async 
= false;
  objXMLStyle.resolveExternals 
= false
  
  strXslt 
= '../../XSLT/Czrk.xsl';
  objXMLStyle.load(strXslt);
  
  
if (objXMLStyle.readyState == 4)
  {
    
if (objXMLStyle.parseError.errorCode != 0)
      document.all('ErrorMessage').innerHTML 
= '<b>* 错误</b> - 无法解析 XSLT 格式.';
    
else
    {
      document.all('SearchResult').innerHTML 
= '';
      
// 格式化并输出结果
      DisplayResult();
    }
  }
}

function DisplayResult()
{
  
// 创建一个新的 XSLTemplate 对象并设置样式表
  var objTemplate = new ActiveXObject('MSXML2.XSLTemplate');
  objTemplate.stylesheet 
= objXMLStyle;
  
  
// 创建处理器来处理 XML 数据
  var objProc = objTemplate.createProcessor();
  
  
// 指明使用的 XML 数据对象
  objProc.input = objXMLData;
  
  
// 应用 XSL 样式,并将结果赋值给字符串
  if (objProc.transform() == true)
  {
    
var strResult = objProc.output
    document.all('SearchResult').innerHTML 
= strResult;    
  }
  
else
    document.all('ErrorMessage').innerHTML 
= '<b>* 错误</b> - 无法对查询结果应用 XSLT 格式.'; 
}

这样,通过WebService传递过来的XML数据就经过XSL格式处理后显示在IE里面。下面给出几个截图:

图片(1)检索数据前

..............................................................................................

图片(2)检索数据后


..............................................................................................

图片(3)自定义检索条件

posted on 2004-07-17 23:57  吕震宇  阅读(16978)  评论(26编辑  收藏  举报