Dienstag, Juni 28, 2005

Proxies for WebServices in JavaScript

If you want to implement a communication from Javascript to WebServices using SOAP it is very important to use an approach with a small amount of code. Complex and long scripts tend to be buggy.

From the languages and programming environments like C, the .NET CLR and Java we are know proxy generation mechanisms based on IDL and RPC for a long time. These generated classes and files enable the programmer to call a server-side method by calling a local method with the same name. The implementation of the network transfer is taken off your application code.

For WebServices there is also a description standard called WSDL http://www.w3.org/TR/wsdl that fully describes a Webservice communication and a WSDL Compiler can generate those proxy classes in Sourcecode or binary format using this information only.

JavaScript objects on the client

Creating proxy objects is also possible using JavaScript so that a local call of a method results in a call of the corresponding method in the WebService on the server using the same parameters and brining the result back to the client.

To create such Proxy Objects we only need one line of code as we will see below.

The implementation of the real communication is implemented in the ajax include file in the webservice region. In this script include the variable proxies is created as an empty Objects. All local service objects and all local methods will be attached to this object. Calling a server-side Methods looks like this:

proxies.CalcService.func = displayFactors; // async result
proxies.CalcService.CalcPrimeFactors(12); // call

Also a synchronous version can be used. The func attribute must be null and the result of the server-side method is directly returned from the client method.

var factors = proxies.CalcService.CalcPrimeFactors(12);

Using this approach proxies ist the only one global variable that we need. Conflicts with other variables are minimized.

All the information that is needed to make the SOAP call is attached to every method object and another object is used to hold the information about the webservice.

Verwendung der Eigenschaften der WebService Objekte
proxies.service.urlURL of the WebService
proxies.service.nsNamespace of the WebServices
proxies.service.function()Calling a server-side method
proxies.service.function.fnameName of the method
proxies.service.function.actionsoapaction of the method
proxies.service.function.paramsArray with the names of the parameters
proxies.service.function.funcFunction receiving the result
proxies.service.function.onExceptionFunction to handle an exception
proxies.service.function.corefuncDebugging helper function
proxies.service.function.serviceLink back to the service object

In JavaScript this code looks like this:

[in ajax.js:]
var proxies = new Object();

[per WebService]
// JavaScript proxy for webservices
// A WebService for the calculation of prime factors.
proxies.CalcService = {
  url: "http://localhost:1049/CalcFactors/CalcService.asmx",
  ns: "http://www.mathertel.de/CalcFactorsService/"
} // proxies.CalcService

[per WebServiceMethode]
// Add 2 numbers.
proxies.CalcService.AddInteger = function () { return(callSoap(arguments)); }
proxies.CalcService.AddInteger.fname = "AddInteger";
proxies.CalcService.AddInteger.service = proxies.CalcService;
proxies.CalcService.AddInteger.action = "http://www.mathertel.de/CalcFactorsService/AddInteger";
proxies.CalcService.AddInteger.params = new Array("number1", "number2");

If you only have to realize a small application you can easily create this code manually by reading all the information you need from the webservice description. Retrieving such a description is very easy when implementing in ASP.NET. You navigate to the URL of the webservice and use the Link that is available on this page. You can also attach a WSDL Parameter:

See: http://localhost/CalcFactors/CalcService.asmx?WSDL

A Proxy generator for JavaScript

The simplest form for a WSDL to Javascript Compiler to generate tese proxy objects uses a single XSLT transformation that generates Javascript.

The Page GetJavaScriptProxy.aspx implements this by retrieving the WSDL from the WebService and using wsdl.xslt for the transformation.

To get a proxy for a WebService yopu only need to ust one <script> Element with the URL to the GetJavaScriptProxy Page:

<script type="text/javascript" src="GetJavaScriptProxy.aspx?CalcService.asmx"></script>

You do not have to write the script fort he proxy yourself as you can see and you only need one html tag.

The files for the implementation are available on the sample webside (see sidebar).

Keine Kommentare: