Consuming a Web Service from an HTML Page
 
Published: 05 Sep 2005
Unedited - Community Contributed
Abstract
Web services are commonly consumed from server-side web applications using sophisticated languages such as VB.NET, C#, and Java. Rajesh Toleti demonstrates that Web services may also be consumed from client-side HTML pages with the help of JavaScript.
by Rajesh Toleti
Feedback
Average Rating: 
Views (Total / Last 10 Days): 62900/ 117

Introduction

Web service consumption is not only achieved by using sophisticated languages like VB.NET, C#, and Java. Contrary to popular belief, we can consume a Web service from a good old HTML page. This HTML page needs its age-old friend, JavaScript, to achieve this. We will make use of a special file called webservice.htc to impart Web service capabilities to the HTML page. Download this file and save it to the same folder where you saved your HTML page. You may also save this file in a different folder location, but you then need to include the appropriate path when linking to this file.

The webservice.htc file is readily available from the Microsoft MSDN library, located here at the time this article was published. The sample code that accompanies this article includes a copy of the webservice.htc file, but you may wish to visit the Microsoft web page to be sure that you are using the latest version.

The Web service that we will consume returns the country of origin when supplied with a valid IP address. The service is located at http://www.taryatechnologies.com/ws/IP2countryws.asmx

Now, we will look at our HTML page.

The HTML Page

Listing 1: Consumeip2country.html

<html>
<head>
    <title>Ip2country</title>
    <SCRIPT language="JavaScript">
        var callID = 0;
        function getWSDL()
        {
            myWebService.useService(
                "http://www.taryatechnologies.com/ws/IP2countryws.asmx?WSDL",
                "IP2Country");
        }
        function getResult()
        {
            country.innerText = event.result.value;
        }
        function Lookup()
        {
            callID = myWebService.IP2Country.callService("getCountry", txtIP.value);
        }
    </SCRIPT>
</head>
<body onload="getWSDL()">
    <h1>Consuming a webservice by HTML Page</h1>
    <div id="myWebService" style="behavior:url(webservice.htc)"
        onresult="getResult()"></div>
    IPnumber: <input id="txtIP">
    <input Type="Button" Value="getCountry!" OnClick="Lookup()">
    Country:<span id="country"> </span>
</body>
</html>

Explanation

We call the getWSDL JavaScript function on the body load event, as shown below.

Listing 2: getWSDL Function

<body onload="getWSDL()">

This function gets the WSDL document from the Web service. In this function we call the useService method of the myWebService service. We pass two parameters to this method.  The first parameter is the URL of the Web service appended by "?WSDL."  The second parameter is the friendly name of the Web service; you can use whatever name you like.

Listing 3: myWebService Example

myWebService.useService(
    "http://www.taryatechnologies.com/ws/IP2countryws.asmx?WSDL",
    "IP2Country");

When you view the style attribute of the div tag, you can see a bit of weird code. This is the heart of the HTML page from which we are deriving Web service consumption capabilities. I will explain the getResult function later.

Listing 4: Div Tag Style Attribute

<div id="myWebService" 
style="behavior:url(webservice.htc)"
onresult="getResult()"></div>

In the HTML page, we are collecting an IP address as input. If you provide an invalid IP address you will get an error message. An IP address may not be your machine’s IP address if you are on a LAN; in that case, it will be the WAN IP of your internet gateway (e.g., a wireless router).

When you press the "getCountry" button, it calls the Lookup function via an onclick handler.

Listing 5: getCountry() Button Event

myWebService.IP2Country.callService("getCountry", txtIP.value);

We now pass the method name of the Web service as the first parameter and the value of the IP address provided as second parameter. Once the result is sent back to the HTML page, it raises the result event, and then the getResult function is called. The getResult function was specified as the result event handler by the onresult parameter of the div tag shown in Listing 4.

Listing 6: getResult() Function

country.innerText = event.result.value;

This function assigns the result to the "country" span element.

Caution

There are a few limitations to consuming a Web service using the technique described in this article.

  1. This procedure is only valid for simple data types such as strings, integer etc.
  2. Due to browser security, the Web service and the HTML page should be in the same domain or the HTML page can be on your local system.
  3. If you want to consume a Web service from a server and serve that from your server, you should create a proxy Web service on your server. Then use this proxy Web service to consume the Web Service in your HTML page.
Conclusion

This same technique can be used to consume Web services in ASP or ASP.NET pages without the need of creating proxy classes.  We can even incorporate “callback functions” in a similar way.



User Comments

Title: eee   
Name: eee
Date: 2012-11-19 4:43:17 AM
Comment:
eeeee
Title: FOR non IE browsers   
Name: RAJESH TOLETI(AUTHOR)
Date: 2011-10-11 10:07:46 AM
Comment:
Hi all, Please use the technique described in the below article if you are using any browser other than IE.

http://aspalliance.com/2052_Consuming_JSON_and_XML_Webservices_from_an_HTML_Page_using_jQuery
Title: Problem   
Name: ashish Mittal
Date: 2011-02-22 2:15:43 AM
Comment:
i m trying to execute it and getting "undefined" result..
Same happening with my webservice too..what could be the problem?
my email is enggcs.ashish@gmail.com
Title: WebService.htc only working IE not in othe browsers   
Name: Hardeep Singh
Date: 2011-01-20 2:02:00 AM
Comment:
WebService.htc only working IE
Title: Webservice is not consuming Not working for Safari   
Name: Narendar Piryani
Date: 2010-07-24 6:39:47 AM
Comment:
Good Article.. but not working for Safari, firefox or Chrome... only working for IE.
Title: with reference to MATTO CASATI   
Name: Zaf Khan
Date: 2008-11-27 7:52:51 PM
Comment:
THanks Matto, :)

I used this link to transalate your page to ENGLISH....
ALso......
Its the Best Translation of PROPER English yet!!!

http://babelfish.yahoo.com/translate_url?doit=done&tt=url&intl=1&fr=bf-home&trurl=http%3A%2F%2Fwww.guru4.net%2Farticoli%2Fasp-soap-client%2F&lp=it_en&btnTrUrl=Translate
Title: undefined error   
Name: Sheikh Abdul Jaweed
Date: 2007-08-31 11:35:26 AM
Comment:
get the error as "undefined"
Title: "undefined" result   
Name: nis mo
Date: 2007-08-19 6:12:40 PM
Comment:
i m trying to execute it and getting "undefined" result..
Same happening with my webservice too..what could be the problem?
my email is nissmor@gmail.com
Title: does this support firefox browser   
Name: kings
Date: 2007-08-18 3:49:58 AM
Comment:
hey its ok in internet explorer but it does not work in fire fox ., how to invoke this operaitons in firefox
Title: Working IP address to get the country name   
Name: Harry
Date: 2007-07-11 9:10:42 AM
Comment:
I tried with manu ipaddresses. can you please tell me with what ip address can i test this service
Title: Good   
Name: Mohammed Husamuddin
Date: 2007-06-18 2:00:31 AM
Comment:
Hava this error, Line 19
Error : 'myWebService.IP2Country' is null or not an object
A Runtime Error has occured
Title: return value wrong   
Name: yogesh
Date: 2007-04-21 7:36:24 AM
Comment:
Hey thanks for posting.
but i m trying to execute it and getting "undefined" result..
Same happening with my webservice too..what could be the problem?
Title: does not work on FireFox   
Name: Jah Hasangjekaj
Date: 2007-03-10 4:21:53 PM
Comment:
How can I make this work in Firefox
Title: oh no...   
Name: fudi
Date: 2007-02-19 9:36:30 AM
Comment:
i don't like such articles. it starts promising, but actually tells just half of the story. people who alreay know about web services and consuming them will understand anyway, all others are lost. why not provide the complete source code (also the web service)? i'm sure you'd know how to explain, so why don't you?
Title: Otto   
Name: Shiney Tracky Dacks
Date: 2006-10-05 1:28:13 AM
Comment:
Anthony Kasses what are you talking about ???
Title: Great Explanation!   
Name: DP
Date: 2006-07-16 5:19:22 PM
Comment:
Well, I have seen a dozen or more articles on how to use web services. This is by far the most basic explanation of how to get a web service to work. From here you can move t o WSDL, SOAP, UDDI etc., but this was great (easier than w3schools). Oh, as for not working in other browsers, I believe the behavior attribute is only recognized by MSIE, so the problem is not your code, but the other browsers.
Title: Consuming Web Service in ASP.NET   
Name: LeProgrammeur
Date: 2006-06-11 9:13:02 PM
Comment:
Hi!

I posted a tutorial showing the basic steps to consume a web service in asp.net at the link www.KYNOU.com.
Go to the link above and search for: Consuming a Web Service
There is also a chat room in this same link where I try to spend as more time as I can to answer questions.
:)
Title: Complex Return Values via HTC   
Name: Dan Fitzgerald
Date: 2006-03-06 5:24:02 PM
Comment:
Great article!

I was wondering about the return values. You mentioned that only simple return values can be returned. So, if I am interfacing with an existing web service that returns say a struct such as:

struct Return
{
int ID;
string the_string;
}

Is there a way to parse through this as a return value at all or do I need to ask the web service provider to modify to return a comma-separated string for example?

Thank you,

Dan
Title: Cross Domain Calls   
Name: Ryan Smith
Date: 2005-12-19 10:27:01 AM
Comment:
That was a great article. Is there anyway to make a webservice all across different domains? Or is the only way to accomplish this to handle it on the server site?
Title: Great Article   
Name: Don Logan
Date: 2005-12-06 9:55:30 AM
Comment:
Great clear article on Web services.
Title: which protocol is this webservice uisng in communaication   
Name: Deepak
Date: 2005-11-28 6:16:58 AM
Comment:
Hi,
this is an excellent stuff..but has few drawback..if only run in IE..and i just want to knwo which protocol(GET or POST or SOAP with HTTP) is it using..bcoz GET and POST are not secure ....email me regarding this to deepak@arcadix.com
Title: Software Developer   
Name: Ram
Date: 2005-11-19 12:25:26 AM
Comment:
Really this posting is very informative, but it is not complete.The description abt the getresult function and useservice is not complete..can u give me the complete details.

My mail-ID is : dajji@sify.com
Title: Very well explained   
Name: Anthony Kasses
Date: 2005-11-14 7:37:44 PM
Comment:
Great article, ...however I'm getting
"This page is accessing information that is not under it's control. This poses a security risk. Do you want to continue?" (yes/No).

I'm using Win 2003 and IE 6.

Any thought?
Title: Goood Work   
Name: Steve Rock
Date: 2005-11-14 5:34:00 AM
Comment:
Nice Work
Title: mr   
Name: alok
Date: 2005-10-25 8:53:46 AM
Comment:
good stuff!!!
Title: Test with error   
Name: came
Date: 2005-10-21 3:05:03 AM
Comment:
Hava this error, Line 19
Error : 'myWebService.IP2Country' is null or not an object
A Runtime Error has occured
Do you wish to Debug?
Title: Old technology..   
Name: Carlos
Date: 2005-10-20 11:32:18 AM
Comment:
Try AJAX, XmlHttp or something else.. because your solution has too much limitations for serius web develpment..
Title: Another way (cross browser!)   
Name: Matto Casati
Date: 2005-10-20 6:02:05 AM
Comment:
In my article (http://www.guru4.net/articoli/asp-soap-client/) you can find another way to consuming a Web Service with AJAX. My solution use pure javascript + XMLHttp and it's cross-browser (tested on IE, Moz, FireFox and Safari). The article is only available in italian language, sorry (but... code is code!)
Title: SSE   
Name: Neeraj Badaya
Date: 2005-10-19 10:17:19 PM
Comment:
Hi,

This is now obsolete now you have much better option of XMLHTTP which will work fine from the Javascript and need not to be include webservice.htc also.

Yes, it will work only for IF-5.0 and greater.
Title: Only in IE   
Name: lordm
Date: 2005-10-11 12:05:39 PM
Comment:
Yeah, but this only works in IE. What about FF? Maybe use XMLHTTP, AJAX or something..
Title: create a proxy web service   
Name: Bit Banger
Date: 2005-10-10 2:48:48 PM
Comment:
I _love_ this article. I can use it to excellent effect in many places in my application.

Anyone care to post the code for creating a proxy for "http://www.taryatechnologies.com/ws/IP2countryws.asmx"?
Title: Web services using javascript   
Name: K.Senthil Kumar (Sensoft2000)
Date: 2005-10-07 11:18:07 PM
Comment:
Wow.. Its really new information to me...
Title: programer   
Name: s k yadav
Date: 2005-10-07 4:17:07 PM
Comment:
I find this artical intresting. It is good..........hope you too
Title: Returning Complex Types   
Name: Mark Hildreth
Date: 2005-10-07 3:17:52 PM
Comment:
It is possible to return complex types from the webservice behavior, just make the webservice return type a struct with public properties. You can also return arrays or expose public properties that are arrays within a struct.
Title: Major Limitation   
Name: Ravi K
Date: 2005-09-16 3:47:07 PM
Comment:
Good article, but this only works with Internet Explorer, which I think is a major limitation.
Title: Technical Associate   
Name: Pavan Kumar C
Date: 2005-08-31 6:39:25 AM
Comment:
Great post that gives a clear understanding about the concept.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-12-01 7:41:56 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search