Consuming a Web Service from an HTML Page: ASP Alliance


Consuming a Web Service from an HTML Page

page

by Rajesh Toleti
Feedback

Average Rating:

Views (Total / Last 10 Days): 52593/ 44

Introduction

[ Download Code Sample ]

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.

This procedure is only valid for simple data types such as strings, integer etc.
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.
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.

Product Spotlight