65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 JavaScript 从 HTML 页面调用 Web 服务

Gökmen BULUT
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.10/5 (29投票s)

2006 年 6 月 29 日

CPOL

1分钟阅读

viewsIcon

661935

downloadIcon

22780

本文将帮助您直接从 HTML 页面调用 Web 服务。

Sample Image - CallWebServiceFromHtml.jpg

引言

大家好。 在本文中，我想向您展示“如何从 HTML 页面调用 Web 服务并将参数传递给其方法”。 希望对您有所帮助。

对于本文，我们需要创建一个 Web 服务和一个网站。 假设我们的 Web 服务包含以下方法…

[WebMethod]
public string HelloWorld() {
    return "Hello World";
}

//This method takes your birth year, month and day, 
//calculates your age and return the year. 
[WebMethod]
public string GetAge(int year, int month, int day) {
    DateTime birthDate = new DateTime(year, month, day);
    long age = new DateTime(DateTime.Now.Ticks - birthDate.Ticks).Year - 1;
    return "You are " + age.ToString() + " years old.";
}

//This method caches the datetime for 4 seconds. 
//also a simple cache implementation. 
private const int CacheTime = 4; // seconds
[WebMethod(CacheDuration = CacheTime,
Description = "As simple as it gets - the ubiquitous Get Date Time.")]
public string GetDateTime() {
    return DateTime.Now.ToString();
}

调用此 Web 服务的 HTML 页面

您的网页目录应包含“webservice.htc”文件。 该文件为 HTML 文件添加了一种行为，用于调用 Web 服务。 您可以在您将要下载的 *.zip 文件中找到此文件。 我为这个解决方案创建了 3 个网页。

注意：请不要忘记在您的 HTML 页面中更改 Web 服务访问的端口号。

  1. HelloWorld.htm（调用 Hello World 方法）
     <html>
  <head>
   <title>Hello World</title>
    <script language="JavaScript">
     var iCallID;
     function InitializeService(){
      service.useService(https://:1394/MyWebService.asmx?wsdl, 
	"HelloWorldService");
      service.HelloWorldService.callService("HelloWorld");
     }
     function ShowResult(){
      alert(event.result.value);
     }
    </script>
   </head>
  <body onload="InitializeService()" id="service" 
	style="behavior:url(webservice.htc)" onresult="ShowResult()"> </body>
 </html>
  2. GetAge.htm（调用 GetAge 方法，接受 3 个参数）
     <html>
  <head>
   <title>UseSwap</title>
    <script language="JavaScript">
     function InitializeService(){
      service.useService(https://:1394/MyWebService.asmx?wsdl, 
	"GetAgeService");
     }
     var StrYear, StrMonth, StrDay;
     function GetAge(){
      StrYear = document.DemoForm.StringYear.value;
      StrMonth = document.DemoForm.StringMonth.value;
      StrDay = document.DemoForm.StringDay.value;
      service.GetAgeService.callService("GetAge", StrYear, StrMonth, StrDay);
     }
     function ShowResult(){
    alert(event.result.value);
      }
     </script>
    </head>
     <body onload="InitializeService()" id="service" 
	style="behavior:url(webservice.htc)" onresult="ShowResult()">
      <form name="DemoForm">
       Year : <input type="text" name="StringYear"/>
       Month : <input type="text" name="StringMonth"/>
       Day : <input type="text" name="StringDay"/>
       <button onclick="GetAge()">Get Age</button>
      </form>
     </body>
 </html>
  3. GetDateTime.htm（返回缓存值）
     <html>
  <head>
   <meta http-equiv="refresh" content="2" />
   <title>Get Date Time</title>
   <script language="JavaScript">
    var iCallID;
    function InitializeService(){
     service.useService(https://:1394/MyWebService.asmx?wsdl, 
	"GetDateTimeService");
     service.GetDateTimeService.callService("GetDateTime");
    }
    function ShowResult(){
     alert(event.result.value);
    }
   </script>
  </head>
  <body onload="InitializeService()" id="service" 
	style="behavior:url(webservice.htc)" onresult="ShowResult()">
  </body>
 </html>

如上所述，编写了一些 JavaScript 代码。 但它很容易理解。 首先，我们添加 HTML 页面行为以访问 Web 服务，然后进行初始化并调用 Web 服务方法。 很快，我们通过 event.result.value 获取结果。 就这样了。

您可以直接将此代码复制并粘贴到您的 HTML 页面中，它应该可以工作。 如果您想，请尝试源代码。 希望对您有所帮助。 暂时告别。

历史

  • 2006 年 6 月 29 日：初始发布
© . All rights reserved.