用JavaScript與WebService實現網頁部分資料XML傳送

來源:互聯網
上載者:User
javascript|web|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 呂震宇 閱讀(8394) 評論(26)  編輯 收藏 引用 網摘 所屬分類: Web Form 編程


評論

# 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();
   &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;
  }
}

</script>
  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-07-21 13:57 一點一滴 這個web服務怎麼進行驗證呢?  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-07-21 14:32 呂震宇 我沒有考慮使用現有驗證(Form驗證、Windows驗證等),而是將驗證放在了智慧卡中,在用戶端與伺服器間傳送的關鍵資料是經過簽名並加密的,系統通過對這個加密資訊的驗證進而實現對使用者身份的驗證。智慧卡中的密鑰是永遠也讀不出來的,而且智慧卡從制卡到密鑰分發到傳送等都有一套規範的體系。  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-08-25 17:21 beloved 在MSDN上可以看出,微軟在很早以前就已經放棄對webservices.htc的支援了。
最要命的是現在裝了IE SP2的機器對調用ActiveX進行了限制,每次你在客戶建立一個Object的時候都會提示你。這樣很是不爽。不知道有沒有更好的辦法來解決這個問題。  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-08-25 22:18 呂震宇 @beloved

誰也限制不了微軟改變策略。我想微軟大概將程式員趕向.net平台以及智能用戶端吧。我想Flex、智能用戶端以及未來微軟基於XML的代碼開發恐怕會佔主導地位。雖然這可以解決上述問題,但我們不得不學習、學習再學習了...  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-09-10 09:10 賞梅齋 看到你的文章受益頗多,覺得這種方式被微軟所放棄有點可惜.  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-09-14 10:17 aspsir 關於驗證,最基本的可以使用Session來驗證,同時通過WEB SERVICE的EnableSession=true來使WebMethod支援Session  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-09-19 08:25 luoluo 這個方面flash是更好的選擇,比ms jscript有更好的跨平台性,flash對xml和webservice都有很好的支援。  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-09-19 12:55 呂震宇 我想Macromedia 的flex以及微軟提倡的智能用戶端在這方面都有很好的前景  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2004-09-27 08:40 賞梅齋 不過,感覺微軟提倡的智能用戶端過於重量級,對於輕型應用似於過於複雜.  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-02-23 02:52 PuzzledJavascriptMan 如果伺服器端Webservice是Java寫的,Javascript代碼怎麼寫呀?  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-02-23 12:20 呂震宇 這個我就不清楚了。因為不能使用webservice.htc。不過你可以下載webservice.htc,然後研究一下裡面的JavaScript代碼,應當有所協助。  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-03-18 14:32 cxuqiang 留下手印。。。。  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-04-09 03:21 一滴水 好搞深!!  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-06-10 18:23 li 我用的是Windows XP SP2上面的IE 6.0,有許多網頁無法瀏覽,且無法觀看視頻,必須更換版本嗎?  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-07-11 15:40 拙劣的程式員 研究研究  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-09-01 13:10 tonyzhang 如果這種方式只能用微軟的東東開發的webservices那也太有局限性了。我用java+axis開發的webservice按照微軟官方網站提供的方式進行了實驗,沒有成功。  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-11-03 09:37 bobox 本來是抱著很幸運的心情來看這篇文章的,因為看道htc感覺發現了我需要的鑰匙。但是看完以上評述後,心又冷了。
ms webservice既然又慢。而且對真正異構系統的支援又這麼爛。似乎只有用ms自己的產品系列的用戶端才對它有很好的支援,微軟提供了一個不錯的代理。失望之情不言而喻啊。。。
  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-11-28 15:04 白菜 有人說XP的SP2限制了這個東西?

我怎麼沒感覺到...  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-12-02 15:39 Oxygen 可以垮域,不過就是有提示,現在所有的方法,都是有提示的.  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2005-12-02 15:39 Oxygen 可以垮域,不過就是有提示,現在所有的方法,都是有提示的.  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2006-04-24 10:48 sac 那麼在sp2下面能不能使用呢?
我使用的時候總是提示useService不是方法
  回複  更多評論
  
# re: 用JavaScript與WebService實現網頁部分資料XML傳送 2006-05-29 11:17 e旋風 我也是使用這種

怎麼代碼執行完 // 裝載從 Web Service 返回的結果
objXMLData.loadXML(strResult);

就不再執行function dataLoaded() 了呢  回複  更多評論
  

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。