Scripting Web Service Consumption

We have explained in Column 106 how to consume foreign Web services through Microsoft Internet Explorer. In this column, we show you how to consume your own Web services. Put your Web services (asmx files) in c:\inetpub\wwwroot\Webreference. Then, when you access the services in your scripts, you refer to their directory as http://localhost/Webreference.

You need to have three JavaScript functions for each Web service you consume:

• The init() function assigns a short name to the Web service URL
• A function to call the Web service with the appropriate parameters
• A function to display the results

The init() function can be shared among Web services. It is invoked upon loading of the page, onload=init(). We call the webservice behavior's useService() method to assign short identifiers to the Web service's rather-long URL. We call the Add Web service by "simpleCalcWebService" and the IsPrime Web service by "isPrimeNumberWebService":

function init() {
  myWebService.useService("
    http://localhost/Webreference/checkIsPrime.asmx?WSDL",
    "isPrimeNumberWebService");
  myWebService.useService("http://localhost/Webreference/
    simpleCalc.asmx?WSDL",
    "simpleCalcWebService");
}

The function addNumbers() is invoked when the Add button is clicked. It calls the webservice behavior's callService() method. The parameters are: (i) the function that handles the result display, (ii) the Web service command, "add", (iii) the first number, and (iv) the second number:

function addNumbers(a, b) {
  myWebService.simpleCalcWebService.callService
    (addResult, "add", first.value, second.value);
}

Similarly, isPrimeNumber() is called when the Click here to check if prime button is clicked. It calls the Web service with three parameters: (i) the function to handle the result, isPrimeNumberResult, (ii) the Web service request, IsPrime, and (iii) the parameter expected by the Web service, testValue.value:

function isPrimeNumber() {
  myWebService.isPrimeNumberWebService.
    callService(isPrimeNumberResult, "IsPrime",
    testValue.value);
}

We use DIV elements to display results of both Web services. Once a result is ready, we update the innerHTML property of the appropriate element. Here is how we update the result of the Add Web service:

function addResult(result) {
  theResult1.innerHTML = result.value;
}

We embed the result of the IsPrime Web service within a descriptive message:

function isPrimeNumberResult(result) {
  theResult2.innerHTML = "The number " + testValue.value +
    (result.value ? " is" : " is not") + " a prime number";
}