Calling a Web Service | .NET Web Services Solutions

The Webservice behavior has two primary methods that you will use to access a remote web service. The first, useService, specifies the location of the web service’s WSDL file that provides the behavior with specifics about the methods the remote web service provides and each method’s parameters. In addition, the useService method lets you specify the “friendly” name your scripts can use to refer to the service. For example, the following JavaScript statement specifies the WSDL contents for the Hello web service you created in Chapter 2. The statement assigns the friendly name HelloService to the service that the JavaScript code can use to refer to the service:

service.useService("http://localhost//Hello/Service1.asmx?wsdl", Ä        "HelloService");

Second, the Webservice behavior’s callService method lets your script call a specific service method. For example, the following statement calls the Hello web service’s HelloWorld method:

service.HelloService.callService("HelloWorld");

The callService method returns an identifier value that the JavaScript code can later use within the function that handles the OnResult event to determine which web service method is returning a result. Normally, the JavaScript code will assign the identifier to a global variable that the script can easily access within each function.

The following sections show you how to call the web services introduced in Chapter 2.

Calling the Hello Web Service

In Chapter 2, you examined the Hello web service that provides the HelloWorld method that returns a string that contains the message “Hello, Web Service World”:

string HelloWorld();

The HTML file in Listing 3.1, SayHello.html, uses the Hello web service to display an alert dialog box similar to that shown in Figure 3.2, which displays the HelloWorld method’s string result.

Listing 3.1 SayHello.html

<html > <head>   <title>Say Hello</title>   <script language="JavaScript">     var iCallID;     function InitializeService()     {       service.useService("http://localhost//Hello/Service1.asmx?wsdl", Ä        "HelloService");       service.HelloService.callService("HelloWorld");     }    function ShowResult()    {       alert(event.result.value);    }   </script> </head> <body  onload="InitializeService()"         style="behavior:url(webservice.htc)"        onresult="ShowResult()"> </body>

Figure 3.2: Displaying the result of the Hello web service within an alert dialog box

Remember, to use the Webservice behavior, you must place the Webservice.htc file within the same folder that contains the SayHello.html file.

Within the HTML file’s <body> tag, the file attaches the Webservice’s behavior. In addition, the tag directs the browser to call the ShowResult function in response to the OnResult event that the Webservice behavior creates after a service’s method completes its processing and returns a result. Finally, the <body> tag directs the browser to call the Initialize function to handle the OnLoad event that occurs when the browser loads the element’s contents.

Within the Initialize function, the script uses the useService method to specify the URL of the web service’s WSDL file and a friendly name the script can use to refer to a remote web service:

service.useService("http://localhost//Hello/Service1.asmx?wsdl", Ä   "HelloService");

Then, the function calls the behavior’s callService method to call the Hello web service’s HelloWorld method:

service.HelloService.callService("HelloWorld");

For simplicity, the code does not store the value returned by the callService method. In this case, because the script calls only one method, there is no reason to test for a specific method within the OnResult event handler.

Finally, within the ShowResult function, the script uses the event object’s result property within an alert dialog box to display the value the HelloWorld method returns:

function ShowResult() {       alert(event.result.value); }

In this case, the ShowResult function’s processing is quite simple. As discussed, because the HTML file only calls one web service method, there is no reason for the function code to determine which method is returning the value. Further, for simplicity the code assumes that the method will be successful and thus, the script does not test for errors. Later in this chapter, you will learn how to determine for which method the OnResult handler has been called and how to use the error object to determine whether or not the method was successful.

Calling the GreetSpecific Web Service

In Chapter 2, you created the GreetSpecific web service that provides four methods that display the Hello World message using a variety of languages:

string English(); string French(); string German(); string Spanish();

The HTML file in Listing 3.2, GreetUser.html, uses each of the GreetSpecific web service methods:

Listing 3.2 GreetUser.html

<html > <head>   <title>Greet User</title>   <script language="JavaScript">   function InitializeService()   { Äservice.useService("http://localhost//GreetSpecific/Service1.asmx?wsdl", Ä   "GreetService");     service.GreetService.callService("English");     service.GreetService.callService("Spanish");     service.GreetService.callService("German");     service.GreetService.callService("French");   }   function ShowResult()   {     alert(event.result.value);   }   </script> </head> <body    onload="InitializeService()"           style="behavior:url(webservice.htc)"          onresult="ShowResult()"> </body> </html>

When the user displays the web page, the Webservice behavior will call each of the GreetSpecific service’s methods, displaying each method’s result within an alert dialog box as shown in Figure 3.3.

click to expand
Figure 3.3: Displaying the result of the GreetSpecific methods within alert dialog boxes

The HTML file is very similar to the UseHello.html file discussed in the previous section. To start, the code first attaches the Webservice behavior to the HTML file within the <body> tag:

<body onload="InitializeService()"        style="behavior:url(webservice.htc)"       onresult="ShowResult()">

As you can see, the <body> tag also specifies the functions the browser will call to handle the OnLoad and OnResult events.

Next, the Initialize function first uses the behavior’s useService method to specify the URL of the service’s WSDL file and the friendly name the scripts can use to interact with the service. Then, the function calls each of the web service’s methods. Although the function calls the methods in a specific order, the asynchronous nature of remote procedure calls and network traffic may cause the methods to return their results in a different order:

service.useService("http://localhost//GreetSpecific/Service1.asmx?wsdl", Ä "GreetService"); service.GreetService.callService("English"); service.GreetService.callService("Spanish"); service.GreetService.callService("German"); service.GreetService.callService("French");

As before, the OnResult method simply displays a method’s result within an alert dialog box:

  function ShowResult()   {     alert(event.result.value);   }

As you can see, the function does not test to determine for which method it is being called. Further, the function assumes the web service methods will be successful and therefore does not test for errors.

Calling the Swap Web Service

As you may recall, the Swap web service that you created in Chapter 2 provides methods that can exchange two variables’ values:

string SwapString(byref string A, byref string B) integer SwapInteger(byref integer A, byRef integer B) double SwapDouble(byRef double A, byRef double B)

The following HTML file, UseSwap.html, assigns to the JavaScript variables FirstString and SecondString the strings “Hello” and “World.” The code then uses an alert dialog box to display the strings’ values, as shown in Figure 3.4. Next, the code calls the Swap service SwapStrings method to try to exchange the values. However, as shown in Figure 3.4, the operation fails to exchange the values. That’s because, in order to use the method to exchange the values, the program must pass the variables to the method by reference (by address). JavaScript passes parameters to functions by value only, which in this case prevents the SwapStrings method from swapping the variables’ values. Listing 3.3 implements the UseSwap.html file.

click to expand
Figure 3.4: Because JavaScript functions pass parameters by value, a web service cannot change a parameter’s value.

Listing 3.3 UseSwap.html

 <html > <head>   <title>UseSwap</title>   <script language="JavaScript">   function InitializeService()   {     service.useService("http://localhost//Swap/Service1.asmx?wsdl", Ä     "SwapService");   }   var StrA, StrB;   function SwapStrings()   {     StrA = document.DemoForm.StringA.value;     StrB = document.DemoForm.StringB.value;        alert("Before: " + StrA + " " + StrB);     // This FAILS because JavaScript passes parameters by value     service.SwapService.callService("SwapStrings", StrA, StrB);   }   function ShowResult()   {            alert("After: " + StrA + " " + StrB);   }   </script> </head> <body onload="InitializeService()"        style="behavior:url(webservice.htc)"       onresult="ShowResult()"> <form name="DemoForm">    <input type="text" name="StringA" value="Hello"><br>    <input type="text" name="StringB" value="World"><br>    <button onclick="SwapStrings()">Exchange Strings</button><br> </form> </body> </html>

Calling the Array Web Service

As you may recall from Chapter 2, the Array web service provides methods you can use to calculate the sum, average, and median of values in an array:

double Sum(double Values()) double Average(double Values()) double Median(double Values())

The following HTML file, UseArray.html, displays a form that prompts the user to enter five values. When the user later clicks the Show Statistics button, the JavaScript code within the HTML file assigns the values the user has entered to an array, which the script then passes to each of the Array web service methods. After the methods return their results, the script updates the form’s contents as shown in Figure 3.5. Listing 3.4 implements the UseArray.html file.

click to expand
Figure 3.5: Using the Array web service to manipulate form-based data

Listing 3.4 UseArray.html

<html > <head>   <title>UseArray</title>   <script language="JavaScript">   function InitializeService()   { service.useService("http://localhost//SimpleStatistics/Service1.asmx?wsdl", Ä "ArrayService");   }   var AverageID, SumID, MedianID;   function CalculateResults()   {     var Values = new Array(1.1, 2.2, 3.3, 4.4, 5.5);     AverageID = service.ArrayService.callService("Average", Values);     SumID = service.ArrayService.callService("Sum", Values);     MedianID = service.ArrayService.callService("Median", Values);   }   function ShowResult()   {     if (event.result.id ==AverageID)       alert("Average: " + event.result.value);     else if (event.result.id == SumID)       alert("Sum: " + event.result.value);     else if (event.result.id == MedianID)       alert("Median: " + event.result.value);   }   </script> </head> <body onload="InitializeService()"        style="behavior:url(webservice.htc)"       onresult="ShowResult()"> <form name="DemoForm">    <input type="text" READONLY name="Value0" value="1.1"><br>    <input type="text" READONLY name="Value1" value="2.2"><br>    <input type="text" READONLY name="Value2" value="3.3"><br>    <input type="text" READONLY name="Value3" value="4.4"><br>    <input type="text" READONLY name="Value4" value="5.5"><br>    <button onclick="CalculateResults()">Show Results</button><br> </form> </body> </html>

In this case, because the HTML file uses the behavior to call multiple methods and because the format for the output for each method varies slightly, the ShowResult handler (which the browser automatically calls when an onResult event occurs) must examine the event.result.id field to determine which method is returning the value. Within the <script> tag, the code declares global variables to store identifiers for each method:

  var AverageID, SumID, MedianID;

Then, each time the code calls a web service method, the code assigns the method identifier that the callService method returns:

  AverageID = service.ArrayService.callService("Average", Values);   SumID = service.ArrayService.callService("Sum", Values);   MedianID = service.ArrayService.callService("Median", Values);

Then, within the ShowResult function, the code compares the event.result.id field to the values the code previously assigned to the variables:

    if (event.result.id ==AverageID)       alert("Average: " + event.result.value);     else if (event.result.id == SumID)       alert("Sum: " + event.result.value);     else if (event.result.id == MedianID)       alert("Median: " + event.result.value);

Calling the ServerInfo Web Service

As you may recall from Chapter 2, the ServerInfo web service GetInfo method returns a structure that contains specifics about a server:

    Structure Server         Dim OS As String         Dim DotNet As Boolean         Dim SSL As Boolean         Dim Administrator As String         Dim WebServer As String     End Structure

The HTML file in Listing 3.5, UseServerInfo.html, calls the GetInfo method to display the structure’s fields, as shown in Figure 3.6:

click to expand
Figure 3.6: Calling a web service that returns a structure

Listing 3.5 UseServerInfo.html

 <html > <head>   <title>UseServerInfo</title>   <script language="JavaScript">   function InitializeService()   {        service.useService("http://localhost//ServerInfo/Service1.asmx?wsdl", Ä "ServerInfoService");   }   function GetServer()   {         service.ServerInfoService.callService("GetInfo");   }   function ShowResult()   {        var SI;        SI = event.result.value;        alert("Operating sytem: " + SI.OS);        alert(".NET support: " + SI.DotNet);        alert("SSL support: " + SI.SSL);        alert("Administrator: " + SI.Administrator);        alert("Web Server: " + SI.WebServer);   }   </script> </head> <body onload="InitializeService()"        style="behavior:url(webservice.htc)"       onresult="ShowResult()"> <form name="DemoForm">    <button onclick="GetServer()">Display Server Data Structure</button><br> </form> </body> </html>

Calling the Presidents Web Service

As you may recall from Chapter 2, the Presidents web service provides the GetUS method that returns an array of character strings that contains the names of each president of the United States:

String[] GetUS()

The following HTML file, ShowPresidents.html, uses the Presidents web service to display the names of each president within a text box, as shown in Figure 3.7. Listing 3.6 implements the ShowPresidents.html file.

Listing 3.6 ShowPresidents.html

<html > <head>   <title>Show Presidents</title>   <script language="JavaScript">   function InitializeService()   {        service.useService("http://localhost//Presidents/Service1.asmx?wsdl", Ä "PresService");   }   function GetPresidents()   {         service.PresService.callService("GetUS");   }   function ShowResult()   {        var Presidents = new Array()        Presidents = event.result.value;        for (i = 0; i < Presidents.length; i++)           document.DemoForm.PresidentList.value = Ä         document.DemoForm.PresidentList.value +             Presidents[i] + "\n";   }   </script> </head> <body onload="InitializeService()"        style="behavior:url(webservice.htc)"       onresult="ShowResult()"> <form name="DemoForm">    <button onclick="GetPresidents()">Display Presidents</button><br>    <textarea name="PresidentList" Rows="25" Columns="60"></textarea> </form> </body> </html>

click to expand
Figure 3.7: Displaying the contents of the character-string array returned by the Presidents web service