 |
 |
 |
 |
 |
 |
Using WebService Behavior to consume online WebServices
Most of time, calling online WebServices are done by using back-end programming languages such as Visual Basic, C# and JSP, etc. However, using WebService Behavior HTML Component object (.htc file), you can still do the same thing so that it can be used in Microsoft IE5+.
Definition of some key terms:
Sample codes used in demonstration:
<html> <head> <title>Recognize country name from IP address</title>
<script language="JavaScript">
var callID = 0;
function init()
{
myWebService.useService(
"http://abc.com/ws/IP2countryws.asmx?WSDL", "IP2Country");
}
function getResult()
{
country.innerText = event.result.value;
}
function callWebService()
{
callID = myWebService.IP2Country.callService("getCountry", txtIP.value);
}
</script>
</head> <body onload="init()"> <h1>Using WebService Behavior to consume online WebServices</h1>
// Attached / associate the WebService Behavior object with an HTML element. <div id="myWebService" style="behavior:url(webservice.htc)" onresult="getResult()" /> IP address: <input id="txtIP"> // Click the button to call the javascript function, callWebService(). <input Type="Button" Value="getCountry!" OnClick="callWebService()"> Country:<span id="country"> </span>
</body> </html>
Explanation:
In the above codes, the codes highlighted in purple is the javascript functions and the codes highlighted in red the html codes, both of them will be explaned one by one below.
In order to make the WebService Behavior HTML Component works, we firstly need to declare a WebService Behavior object by using the following codes:
<div id="myWebService" style="behavior:url(webservice.htc)" onresult="getResult()" />
In the above code, we are attaching the WebService Behavior object to a html element, which can be any elements, but we use "div" in our case.
style="behavior:url(webservice.htc)" is the code to associate the "div" element with the WebService Behavior object.
"webservice.htc" is the WebService behavior HTML Component file, you can treat it as blackbox. What you need to know is that it has two common methods to call Web Services, i.e. "useService" and "callService".
Just put onresult="getResult()" aside and we will go back to it later.
After associating the WebService Behavior object with the div element, "myWebService", we need to identify which online Web Service we are going to call.
<body onload="init()"> is used to identify the Web Service that is going to be consumed by calling the javascript function "init();".
In the javascript function, init(),
myWebService.useService("http://abc.com/ws/IP2countryws.asmx?WSDL", "IP2Country");
The WebService Behavior calls the method "useService" to identify the Web Service that is to be consumed and rename the Web Service with friendly name, "IP2Country".
IP address: <input id="txtIP"> is just the code to allow the user to input the IP address for recognization.
<input Type="Button" Value="getCountry!" OnClick="callWebService()">
After the user has input the IP address, clicking the button will call the javascript function "callWebService()". In callWebService(),
callID = myWebService.IP2Country.callService("getCountry", txtIP.value);
the associated WebService Behavior object (myWebService.IP2Country) calls the method "callService" to invoke the Web Service's method "getCountry" and pass "txtIP.value" as the argument for "getCountry".
Invoking the Web Service's method "getCountry", actually you would expect the server to return the name of the country. However, why it is returning the callID rather than the result?
This is the tricky thing. The method call really returns the callID which is a unique identifier that can be used for positive identification of a particular result.
However, it doesn't mean that the method call will not return the country name, it returns the country name just nearly at the same time, but not passing to the variable.
It is passed to the onresult event handler.
The onresult event will be triggered once the callService method is completed and suppose there should be something get from the Web Service(even failure should has return some error messages).
We handle the onresult event by specifying the onresult=getResult() in the declaration of the WebService Behavior object at the very beginning.
That means once the "callService" method is completed, the javascript function, "getResult()" will be run to assign the result (event.result.value) to the "country" html element.
country.innerText = event.result.value;
Conclusion:
There are totally four essential steps in using WebService Behavior to consume Web Services:
- Attaching the WebService Behavior object to a html element.
- Identifying the Web Service you are going to consume with "useService" method.
- Calling the Web Service with "callService" method.
- Finally, handle the "onresult" event.
For the last step, handling the "onresult" event, actually, there is another way of doing it by specifying a Callback Function. If you are interested, keep an eye on my space.
Copyright 2005 Coolman's Home. All rights Reserved
Contact meDrop me a message
