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

一、WebService的调用：

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

<div id="htcWService" 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）自定义检索条件

评论

相关资料的话，可以参考《ASP.NET分布式数据库应用程序高级编程》，Alex Homer  DaveSussman著，清华大学出版社出版。

实际上，我这里仅仅是将项目中的一小部分摘录出来而已。当一个访问请求到达网站时，我先通过代码测试客户端IE浏览器版本以及是否支持JavaScript（代码见下），如果发现客户端不支持的话，那没将导向另外一个页面，这个页面将在服务器端将XML与XSL生成HTML（如何用C#代码实现对XML的XSL格式处理就不用多说了吧），然后将结果返回给用户，不过性能肯定收到影响。因为出于系统安全等方面的考虑，在我的系统中，使用这种方式检索的信息是受到限制的。

客户端是否支持JavaScript的检测代码：

String strClientType  = Request.QueryString["client"];

<!--
function jumpScripting() {
// jump to page using client-side JavaScript - if jump not executed
// then client does not have scripting available or it is disabled
window.location.href='SearchForm/<% = strClientType %>/default.htm';
}
//-->

检测客户端是否支持 Script 脚本 

{
  // return an integer indicating the type of device
  //  0 = Not Supported by Application
  //  1 = HTML 3.2. client
  //  2 = Internet Explorer 4
  //  3 = Internet Explorer 5 or above
  //  4 = Small Screen HTML ( < 50 chars per line or < 400px wide)
  //  5 = WML Supporting Device (i.e. cellphone)
  //  9 = Error While Detecting Type

  // create integer variable to hold client type
  int intType;

  try {
    // get reference to Browser Capabilities
    System.Web.Mobile.MobileCapabilities objBCaps
      = (System.Web.Mobile.MobileCapabilities) Request.Browser;

    // check the preferred rendering type of the device
    String strRenderType = objBCaps.PreferredRenderingType.ToLower();

    if (strRenderType.IndexOf("wml") != -1)
      intType = 5;     // type is WML device
    else if (strRenderType.IndexOf("html") != -1) {
      intType = 1;     // assume it's an HTML 3.2 device

      // next check the screen size
      if (objBCaps.ScreenPixelsWidth < 400 || objBCaps.ScreenCharactersWidth < 50)
        intType = 4;     // it's a small screen HTML device
      else {
        // assume it's a normal browser - check if its IE
        if (objBCaps.Browser == "IE") {
          // check the version number
          if (objBCaps.MajorVersion >= 5)
            intType = 3;    // IE 5.x or above
          else if (objBCaps.MajorVersion == 4)
            intType = 2;    // IE 4.x
        }
      }
    }
    else  // not WML or HTML
      intType = 0;    // not recognized or supported

  }
  catch(Exception objErr) {
    intType = 9;    // error during detection
  }
  return intType;
}

{
  switch (ClientDetect.ClientType()) {
    case 0:  // not supported
      Response.Clear();
      Response.ContentType = "text/text";
      Response.Write("Sorry, this application does not support your client type: " + Request.UserAgent);
      Response.End();
      break;
    case 2:  // IE 4.x
      Response.Clear();
      Response.Redirect("client-script-check.aspx?client=ie4");
      Response.End();
      break;
    case 3:  // IE 5.x and above
      Response.Clear();
      Response.Redirect("client-script-check.aspx?client=ie5");
      Response.End();
   &nb, sp;  break;
    case 4:  // small-screen HTML device or WML client
    case 5:
      Response.Clear();
      Server.Transfer("SearchForm/mobile/default.aspx");
      break;
    default:  // assume HTML 3.2 client
      Response.Clear();
      Response.Redirect("client-script-check.aspx?client=html32");
      Response.End();
      break;
  }
}