CodeProject: Calling Web Services From Html Pages using Javascript. Free source code and programming help

Report Article

Discuss

Send to a friend

11 votes for this Article.

Popularity: 3.26 Rating: 3.13 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download source files - 104 Kb

Sample Image - CallWebServiceFromHtml.jpg

Introduction

Hello everyone. In this article i wanted to show you, 'how to call a web service and pass parameters to its methods through html pages'. I hope it will be useful.

For this article we need to create a web service and a web site. Assume that our web service includes these methods...
[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(); }

Html pages that call this web service

Your web page directory should include the 'webservice.htc' file. This file adds a behavior to html files for calling web services. You can find this file in the *.zip file you will download. I create 3 web pages for this solution;
Note : please don't forget to change port number for web service access in your html pages
1. HelloWorld.htm (calls Hello World Method)


 <html>
  <head>
   <title>Hello World</title>
    <script language="JavaScript">
     var iCallID;
     function InitializeService(){
      service.useService("http://localhost: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 (calls GetAge method, takes 3 parameters)


 <html>
  <head>
   <title>UseSwap</title>
    <script language="JavaScript">
     function InitializeService(){
      service.useService("http://localhost: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 (returns cached value)


 <html>
  <head>
   <meta http-equiv="refresh" content="2" />
   <title>Get Date Time</title>
   <script language="JavaScript">
    var iCallID;
    function InitializeService(){
     service.useService("http://localhost: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>

As listed above there are some javascript code written. But so easy to understand. First we add html page a behavior to access web service, then we make initialization and call the web service metod. Soon we get the result by event.result.value. That's all.
You can just copy and paste this code into your html pages and it works. Try the source code if you want. I hope it will be useful. Bye for now;)

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Gökmen BULUT

Borned in İstanbul/TURKEY....
Loves İstanbul...
Senior Software Developer in government projects.

Occupation:	Web Developer
Location:	Turkey

Other popular Web Services articles:

Web Service Dispatcher
A simple web service to manage other web services
Your first C# Web Service
An introduction to writing your first WebService
Webservice sample - example of using SOAP protocol to access Internet Database Server
Use SOAP to communicate with a remote DB Server (Here I use SQL Server) on the Internet and get information or interact with the database
Using Web Services for Remoting over the Internet.
This article describes a design and implementation (C#) of the Remoting over Internet using the Web Service as a gateway into the Remoting infrastructure.
IFS - an Internet File System implementation based on Web services and peer-to-peer technology
Internet File System from scratch - making web services and peer-to-peer technology work together to build a virtual file system