Web Services in Internet Explorer - Java Script

The folks over at Microsoft were kind enough to create an HTML component (also called a behavior) that hides a lot of the ugly details from developers who wish to consume Web services. An HTML component is essentially a COM component defined using XML and JavaScript.HTML components can have properties, methods, and support custom events, making them ideal for creating functionality that doesn’t exist in the browser by default.The downside is that only Internet Explorer supports HTML components, and thus Microsoft’s WebService component does not work in other browsers.

Using the WebService component

After the webservice.htc file is downloaded, place it in the directory with your JavaScript files.You can then access the functionality by applying it to an HTML element.To do this, use the style attribute and the custom behavior CSS attribute:

<div style=”behavior(webservice.htc)”></div>

After doing this,the HTML element takes on all the properties, methods, and events of the WebService component.To use the component as a JavaScript object, just assign an ID to the element:

<div id=”service”style=”behavior(webservice.htc)”></div>

Then use the document.getElementById() method to retrieve a reference:

var oService = document.getElementById(“service”);

Next,you need to specify a Web service to use by calling useService().The useService() method accepts two parameters: the WSDL file describing the service and a friendly name for the service. A typical call looks like this:

oService.useService(sUrl,“FriendlyName”);

When this method is called,the component downloads the WSDL file and uses it to create JavaScript objects and methods to access the Web service. This functionality is available through an object identified by the friendly name specified in the useService() method:

var oSpecificService = oService.FriendlyName;

This object has a method,callService(), that makes the actual request to the server.The method accepts a function name to call and any number of parameters to pass to that function.When executed, callService() returns a call ID that is necessary when you want to retrieve a value from the result. The format for this method call is as follows:

iCallID = oService.FriendlyName.callService(sFuncName, sParam0, sParam1..sParamN);

The Web service call is then made asynchronously,so JavaScript execution won’t stop and wait for the response from the server.Instead, you must use the onresult event handler to handle the response.You can either assign the event handler right in the HTML or by using JavaScript.Using HTML, just treat onresult as if it were any other event handler:

<div id=”service”style=” behavior(webservice.htc)” onresult=”alert(‘Done’) “></div>

To assign the event handler using JavaScript, assign the function directly to the onresult property:

When the result event is fired,it creates an event object with a special property called result. This property contains an object with all the details about the response.The properties of result are listed in the following table:

Using the WebService component

So how do you use this object?Here’s a simple example:

In this code, the onresult event handler first checks whether the result it’s handling is the response for the appropriate request (in this way,a single WebService object can handle multiple requests).If the ID of the result matches the call ID, the result is processed.The function ensures that there are no errors; if an error occurs,the detailed error message is returned; otherwise the returned value is displayed.

Of course,it is up to you if you want to use the value property directly or use the raw property to parse the returned SOAP code on your own.

WebService component example

This example uses the Temperature Service described in the sample WSDL earlier. Because the Microsoft WebService component requires you to know only the WSDL location and the name of the operation you want to call, you don’t need the WSDL to get this working.

The Web page for this example consists of a text box (with the ID “txtZip”) and a button (labeled “Get Temperature”).The user enters a zip code into the text box and then clicks the button to get the temperature in that zip code (he calls the Web service). Of course, you also need an element to which you can assign the WebService component. Here is the HTML:

The JavaScript to run this page is fairly simple:

The first function,callWebService(), gets the zip code from the text box and calls the Web service. It first loads the WSDL file with the friendly name Temperature. The next line uses the callService() method, passing in the operation name and the zip code.

The other function,onWebServiceResult(), displays the result of the call. This function uses the same basic algorithm as the example earlier to check whether the result ID is equal to the call ID.It then reports either an error or the returned value.


All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Java Script Topics