www.mathertel.deThe AJAX EngineSamples 2: Core AJAX samples

AJAX Samples Part 2: AJAX using web services

These samples show how to use web services as the client-server transport layer and how to define the actions of the AJAX Engine.

More information is availabe on my blog at http://ajaxaspects.blogspot.com/ or in the Aspects of AJAX Engine documentation.

AJAX example using a web service call through JavaScript proxy methods

This file uses the core interfaces to the generated proxy directly.

CalcFactorsService.htm (view source) The implementation of the page.

CalcService.asmx (view source) (view WSDL) This is the webservice used in this sample.

You can see the actual generated JavaScript proxy by loading the url ../ajaxcore/GetJavaScriptProxy.aspx?service=/AJAXEngine/S02_AJAXCoreSamples/CalcService.asmx&html=true

AJAX Engine Sample: Server-side prime factor calculation

This algorithm was used in the first part of the samples too. Here is final implementation using the server-side webservice and the AJAX engine.

CalcFactorsAJAX.htm (view source) is a sample that uses the AJAX Engine to call the server for calculation prime factors. This scenario can be used for situations where the comutation of anything cannot or should not be done on the client.

CalcService.asmx (view source) (view WSDL) This is the webservice used in this sample.

You can see the actual generated JavaScript proxy by loading the url ../ajaxcore/GetJavaScriptProxy.aspx?service=/AJAXEngine/S02_AJAXCoreSamples/CalcService.asmx&html=true

A detailed description for this sample is a available in German and English.

AJAX Engine Sample: LookUp Service for a dynamic select box / dropdown list

OrteLookup.aspx (view source) is a sample that uses the AJAX Engine to return a small part of a serverside availabe of a huge list of data for validation and easy typing. This is a typical scenario for drop-down lists.

AJAX Engine Sample: Ajax Forms

Using Forms can be supported by using a small JavaScript library to interact with HTML elements. This samples uses the built-in XML datatype to pass the data between the client and the server.

The graphic shown on this page is implemented using a xslt transformation of the returned data into html code.

KreditCalc.aspx (view source) is a sample that comunicates the form data to a WebService and back to calculate some credit related values.

In KreditCalc.asmx (view source) you can see that XmlDocuments are directly exchanged on the WebServer side.

ajaxFormsTest.htm (view source) implements the AJAX Form Services.

ajaxFormsTest.htm (view source) is a test-case to test the ajaxform.js client side functionality: get and set the data of a form using XML data format.

AJAX Engine Sample: Using web service calls with multiple parameters.

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.

CalcAJAX.aspx (view source) is a sample for a AJAX action definition that shows how to use a webservice with multiple parameters.

In KreditCalc.asmx (view source) you can see that XmlDocuments are directly exchanged on the WebServer side.

ajaxFormsTest.htm (view source) implements the AJAX Form Services.

ajaxFormsTest.htm (view source) is a test-case to test the ajaxform.js client side functionality: get and set the data of a form using XML data format.

Behind the scenes:

The proxy generator to WebServices for JavaScript

Talking to WebServices is one of the core functionalities of AJAX engine.

Documentation: http://www.mathertel.de/AJAX/JavaScriptProxy.htm

GetJavaScriptProxy.aspx (view source) implements the generation of JavaScript proxies. There is no real logic or WSDL analysis in here.

wsdl.xslt (view source) is the XSLT transformation from WSDL to Javascript. Everything that we need to know about a webservice in this WSDL description and this transformation extracts all the details and builds javascript source code.

ajax.js (view source) The core communication functions can be found in the "webservice proxy implementation" section.

The AJAX Engine

Compare the Aspects of AJAX Engine with other AJAX frameworks:AJAXComparison.aspx new

These files build the core of the webservice infrastructure and the ajax engine.

ajax.js (view source) The implementation if the AJAX Engine can be found in the "AJAX engine and actions implementation" section.

ajaxForms.js (view source) A collection of methods for handling form data access and integration into the AJAX Engine.


This page is part of the http://www.mathertel.de/ web site.