Sonntag, Februar 19, 2006

Use web services with multiple parameters in the AJAX Engine

In the past moths I've got mails that all request for more functionality in the javascript webservice proxies and the AJAX engine so I've added more support for datatypes and arrays in december last year and got some more compatibility with other SOAP implementations then ASP.NET.

I've also got some requests that describe to reuse existing web services that have multiple parameters on a AJAX page and I think this is a valid request.

While it is possible to use web methods with multiple parameters when using the web service proxies layer directly, the AJAX engine level is only supporting one parameter - but there is a small trick that help you out of this situation.

The AJAX engine knows about all the asynchronous steps that have to be done to complete the whole functionality through the declaration of an action object. The details about that can be found in the documentation at http://www.mathertel.de/ajax/Aspects%20of%20AJAX_index.htm. See the chapter about the "AJAX Actions".

Now have a look how this mechanism can be used with multiple webservice parameters. You can find a sample that simply adds 2 integers at http://www.mathertel.de/AJAXEngine/S02_AJAXCoreSamples/CalcAJAX.aspx

The prepare function is normally used for retrieveing the client-side parameter from the html objects. Because we need more than one parameter we just do nothing here except returning the context object.

The call function, that is called next is not just pointing to the proxy function of the method of the web service but needs some more code. It retrieves all the parameters itself and then calls the proxy method webservice. The trick is, that the mechanism that handles asynchronous result messages is not hooked up correctly and must be patched by using 2 lines of code for the regular and the exception case:

proxies.CalcService.AddInteger.func = this.call.func;
proxies.CalcService.AddInteger.onException = this.call.onException;

Now the call will be processed asynchronously and the result value will be passed to the finish function as usual.

Here the complete code that declares the AJAX action:

// declare an AJAX action
var action1 = {
  delay: 200, // wait for multiple keystrokes from fast typing people
 
  // the prepare function just returns the context object (if any)
  // and makes it available to the call function.
  prepare: function(obj) { return (obj); },

  // the call is not pointing to the webservice proxy directly but calls it using several parameters.
  call: function (obj) {
    var n1 = document.getElementById("n1").value;
    var n2 = document.getElementById("n2").value;
    proxies.CalcService.AddInteger.func = this.call.func; // patch
    proxies.CalcService.AddInteger.onException = this.call.onException; // patch
    proxies.CalcService.AddInteger(n1, n2); // and call
  },
 
  // the result will now be processed as usual.
  finish: function (p) { document.getElementById("outputField").value = p; },
 
  onException: proxies.alertException
} // action1

Samstag, Februar 04, 2006

Comparisation of AJAX frameworks

Daniel Zeiss, who is the man behind the ComfortASP.NET framework see http://www.comfortasp.de/ has published a very interesting comparison on his web site (http://www.daniel-zeiss.de/AJAXComparison/Results.htm) and his blog (http://www.geekswithblogs.com/danielz).

(Have you noticed that there are many German developers involved in AJAX engines and frameworks?)

I have also implemented the simple sample he uses for the comparison at http://www.mathertel.de/AJAXEngine/S02_AJAXCoreSamples/AJAXComparison.htm.

My annotations on these results

The Aspects of AJAX Engine is consuming less bytes on the network that most of the other machines in this comparison.

The size of the transferred bytes is indeed a very interesting aspect. I have not spent any time in reducing this value and I also have no chance to reduce the bytes of a standard SOAP call without leaving this standard and adding the need to implement server specific code.

The initial transfer of the page is smaller than the original ASP.NET version mainly because I do not need any ASP.NET functionality for deploying a working page.

The biggest part of the Engine is the ajax.js file with 21876 bytes because it contains a lot of comments and additional information. I could reduce this page in a view minutes by stripping off all the comments and blank lines down to 12000 bytes and it can be reduced even more. Thats the size that should be used in the comparison because the other frameworks also only send optimized include files.

The other AJAX implementations are very strong bound to the ASP.NET programming model and therefore have to solve many content-update topics - That's what Daniel Zei calls "indirect AJAX programming". The Aspects of AJAX Engine only transfers data on the network and must right now implement content changes on the client using JavaScript. This is also true for many other "direct AJAX programming" environments. By using AJAX enabled controls, even this work is not necessary because the controls can handle themselves and only the developer of the control itself has to think about it.

Freitag, Februar 03, 2006

Aspects of AJAX: An Engine for Java

This AJAX Engine was originating published in 2005 for the ASP.NET 2.0 Platform and is now partly also available in JAVA. This Engine can be ported very easily because it relies on web standards that are available on many platforms and in many languages:

JavaScript / ajax.js

A huge part of the coding is done using JavaScript on the client. This code needs shared by both projects and is always exchangeable.

WebServices

The asynchronous calls from the page in the browser to the server are implemented using the SOAP standard. On the server we only need Standard WebServices. Both platforms, ASP.NET and Java support the bottom up implementation of WebServices and we just need to write simple methods that get called from the client.

XSLT / WebService Proxies

To enable a communication from the client side, the server uses the WSDL definitions that can be generated from WebServices on both platforms and transforms them to proxy objects using JavaScript.

The retrieval of the WSDL and for the transformation is ported and needs only about 30 lines of code that you can find in ~/ajaxcore/GetJavaScriptProxy.aspx or ~/ajaxcore/GetJavaScriptProxy.jsp.

The definition of the translation itself is coded using an xslt definition in the file ~/ajaxcore/wsdl.xslt that is also identical on both platforms.

The AJAX Engine needs nothing else than these 3 building blocks.

Download

The download is available on my web side: http://www.mathertel.de/AJAXEngine/ in the download section containing a eclipse project. I use right now: Eclispe 3.1.2 with the Webtools plug-in 1.0, Java 1.4.2.x, Tomcat 5.5 incl. the compatibility jar and Axis 1.2.1

Documentation

If you search for more documentation use the following links that are part of the ASP.NET version written in C#. Java programmers should understand the code very easily and there are also many JavaScript hints and tricks documented in there.

http://www.codeproject.com/soap/JavaScriptProxy_01.asp A early available documentation about how the JavaScript proxies are generated and how they work.

http://ajaxaspects.blogspot.com/ The blog where all you can find all the documentation that was written while the project was growing.

http://www.mathertel.de/AJAXEngine/ The ASP.NET based demo WebSide containing all the samples I talked about in my blog.

http://www.mathertel.de/ajax/Aspects of AJAX_index.htm An eBook about the AJAX Engine. Here you can find most of the content of the blog and some more hints.

Please contact me via my blog and let me know how you find this work - and what you miss.