Calling Web Services from HTML Pages using JavaScript

Posted: December 1, 2012 in Random Posts
Tags: , , , , , , , , , , , , ,

Download source files – 96.72 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…

Collapse | Copy Code
[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):
    Collapse | Copy Code
    Hello World// 
         var iCallID;
         function InitializeService(){
          service.useService(http://localhost:1394/MyWebService.asmx?wsdl, 
    	"HelloWorldService");
          service.HelloWorldService.callService("HelloWorld");
         }
         function ShowResult(){
          alert(event.result.value);
         }
    
    // ]]>
  2. GetAge.htm (calls GetAge method, takes 3 parameters):
    Collapse | Copy Code
    UseSwap// <![CDATA[
         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);
          }
    
    // ]]>

    Year : Month : Day : Get Age

  3. GetDateTime.htm (returns cached value):
    Collapse | Copy Code
    Get Date Time// <![CDATA[
        var iCallID;
        function InitializeService(){
         service.useService(http://localhost:1394/MyWebService.asmx?wsdl, 
    	"GetDateTimeService");
         service.GetDateTimeService.callService("GetDateTime");
        }
        function ShowResult(){
         alert(event.result.value);
        }
    
    // ]]>

As listed above, there is some JavaScript code written. But it is so easy to understand. First, we add HTML page behavior to access web service, then we make initialization and call the web service method. 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 should work. Try the source code if you want. I hope it will be useful. Bye for now.

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s