用JavaScript与WebService实现网页部分数据XML传送

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）自定义检索条件

分类: Web Form 编程