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

posted on 2004-07-17 23:57 吕震宇 评论(3) 编辑 收藏

评论

# re: 用JavaScript与WebService实现网页部分数据XML传送 2004-07-18 13:52 Rover

不错,建议别用document.all来引用，最好用documeng.getElementById('控件ID')来引用，遵循w3c,还有相关的资料吗？给个链接或者资料什么的？一篇看着不过瘾

# re: 用JavaScript与WebService实现网页部分数据XML传送 2004-07-18 13:59 香辣教师

用WebService Behavior有一些局限性，只有IE 5.0，IE 5.5，IE 6.0，IE 6.0 SP1支持，其他的浏览器都不支持，最近的Windows XP SP2上面的IE 6.0好像也禁用Behavior了。而且它不能垮域调用的Web Service。所以不能把WebForm和Web Service来分开部署。

# re: 用JavaScript与WebService实现网页部分数据XML传送 2004-07-18 15:24 吕震宇

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

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

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

<%@ Page Language="C#" EnableSessionState="False"%>

<%
String strClientType  = Request.QueryString["client"];
%>

<html>
<head>
<meta http-equiv="refresh" content="1;url=no-client-script.aspx?client=<% = strClientType %>" />
<title>检测客户端是否支持 Script 脚本</title>

<script language="JavaScript">
<!--
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>

</head>
<body onload="jumpScripting()">
<font size="2" face="宋体">检测客户端是否支持 Script 脚本 </font>
</body>
</html>

检测客户端类型的代码：

public int ClientType() {
  // 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;
}

首页Default.aspx代码：

<%@ Page Language="C#"%>

<!-- register the user control that contains the detection code -->
<%@Register TagPrefix="GARK" TagName="GetClientType" Src="global/client-detect.ascx" %>

<!-- insert user control into the page -->
<GARK:GetClientType id="ClientDetect" runat="server" />

<script language="C#" runat="server">

void Page_Load() {
  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();
      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;
  }
}

</script>