Calling Web Services From Html Pages using Javascript

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;)

You must Sign In to use this message board.


Per page

My vote of 2
Norm .net

22:53 27 Oct '09

You if you formatted this properly it would make good reference article.
Sign In·View Thread·PermaLink

Undefined
PiyushHanda

22:17 30 Sep '09

alert(event.result.value); is alerting the msgbox as undefined please help me to resolve the same
Sign In·View Thread·PermaLink	1.00/5

My vote of 2
rajuxxx

22:53 16 Apr '09

because it not working in firefox
Sign In·View Thread·PermaLink

Hi everyone.I think my next article will solve your problems.
Gökmen BULUT

1:21 12 Feb '09

Here is the link; http://www.codeproject.com/KB/webservices/Using_SOAP_Client.aspx[^] Gökmen BULUT SENIOR SOFTWARE DEVELOPER
Sign In·View Thread·PermaLink

Re: Hi everyone.I think my next article will solve your problems.
Velmurugan Arjunan

21:36 6 Apr '09

Very nice dude!! Velmurugan.A
Sign In·View Thread·PermaLink

How can i run this in Firefox?
justindhas

0:21 12 Oct '07

I have done this eg,this one worked in IE not in firefox..What can I do????
Sign In·View Thread·PermaLink

Re: How can i run this in Firefox?
sebas.naveen

2:20 15 Nov '07

hi, can u say how to run this file.
Sign In·View Thread·PermaLink	1.00/5

Re: How can i run this in Firefox?
sandy_sam

20:59 28 Nov '07

Hey Dear can u guide us how to run this application on Firefox and other gecko browsers
Sign In·View Thread·PermaLink	4.00/5

Re: How can i run this in Firefox?
danYYac

22:52 28 Jan '09

hi i searched, htc does not work in firefox, you have to use ajax (when i know how i'll post it :P)
Sign In·View Thread·PermaLink

Re: How can i run this in Firefox?
Talal Sultan

3:48 11 Feb '09

Hi,

I am having the same problem. Doesn't work with Firefox nor with Safari. Any luck with a solution so far?

Thanks,
Talal

-- If this is a post that has been helpful to you, please vote for it. Thank you!

"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." --Rich Cook

'event.result.value' is null ot not an object
pargath ranan

2:23 8 Feb '07

Hi when i try to access webservice at cleint side there it is showing an error while iam trying to get web service result here is my code for that.
var iCallID;
function GetUserDetails()
{
alert(document.forms(0).ProductID.value);
var productID=document.all.ProductID.value;
//service.useService("../Services/ProductService.asmx?WSDL","svcUser");
service.useService("http://localhost:2618/PCGListings(08-02-07)/Services/ProductService.asmx?wsdl","svcUser");

iCallID = service.svcUser.callService("GetRowDetails",productID);
}

function DisplayResults()
{
//if (iCallID==event.result.id)
{
alert(document.all.ProductID.value);
alert(event.result.id);
}

}

How to pass user name & password ??
nssidhu

6:46 6 Nov '06

How to call protected web service that requires soap header for user name & password Sid
Sign In·View Thread·PermaLink	3.00/5

service?
codePimp

11:12 12 Sep '06

Your code as is gives a run time error because "service" is undefined. Where are you defining "service" in your javascript?
Sign In·View Thread·PermaLink	1.00/5

Re: service?
jayarao

5:57 28 Oct '06

Did you get the answer to your question? We are also getting same error(undefined). Please can you let me know where we have to change the "service"?
Sign In·View Thread·PermaLink	3.00/5

Re: service?
tim.s.bell

10:44 14 Jun '07

the function (InitializeService) is being called before the body id (service) has been registered. you can fix it simply by placing the function at the bottom of your page.
Sign In·View Thread·PermaLink	1.50/5

Re: service?
Patrik Lindström

7:18 30 Jul '08

no it did not work by just moving the code
Sign In·View Thread·PermaLink

Re: service?
danYYac

22:53 28 Jan '09

i think u are trying to do this in firefox, in firefox htc doesn't work.
Sign In·View Thread·PermaLink

use Atlas
Herre Kuijpers

5:32 6 Jul '06

your example seems simple enough to use, too bad however that your .htc behaviour is less readable. Have you taken a look at what microsoft is doing currently with Atlas[^]? Atlas enables you to do exactly the same thing as you are doing here, and is pretty painless to integrate into an existing solution. Herre
Sign In·View Thread·PermaLink	2.00/5

Zip file is empty
Alan Lemming

4:20 29 Jun '06

Please upload a valid zip file.
Sign In·View Thread·PermaLink	1.50/5

Re: Zip file is empty
Gökmen BULUT

7:49 29 Jun '06

Hi I checked the zip folder. it is not empty my friend. But if you give my your email address i can mail it to you. my email is gokmenbulut@gmail.com Don't worry. i will help u. Gökmen BULUT SENIOR SOFTWARE DEVELOPER
Sign In·View Thread·PermaLink	2.00/5