Freitag, Juli 01, 2005

Overview of the AJAX engine

As one can see from the last posts, the basic elements for a application using the AJAX technologies JavaScript and XMLHHTP are not difficult to realize. However, the selection from the available technologies as well as a suitable abstraction in using these elements is crucial for the success of the realization of an application.

Building an AJAX engine or an AJAX framework that you can reuse every time you want some asynchronous processing or when you need a smart way to refresh information on the current web page will help a lot.

If you realize a web application with only containing one or a only a few Web services you can stay with the kind of realization that is shown in the preceding examples.

The experiences in my job in contrast are within the range of applications with some hundred sides and Web services with in sum about a thousand methods. With more than few Web methods the developer must have a clear and simple kind of the realization of the Javascript code on the client to avoid errors and to not think about the implementation details. Only by using a simple approach a good quality and maintenance can be achieved.

The main idea of an AJAX engine on the client is the simplification of the implementation of the code, which is needed for a specific function on the Client. Like with the webservice framework of ASP.NET on the server the details of communication over SOAP on the client are completely hidden from the developer and also the recurring code portion is only realized once in a central place. Also all details about the different implementations of the XMLHTTP object in Internet Explorer or the Firefox browsers are hidden from your code.

The blue print of the AJAX engine has the following connected components:

HTML form and elements

The static or dynamically provided HTML of objects e.g. < input > elements become for the interaction with the user used.

Buttons & Events

The buttons and events, which start a AJAX functionality must only call a simple Javascript function. This can be used for example using inline code in a onclick attribute. This starts then the processing of the steps that should be executed.

AJAX actions

For the call of a server-side functionality parameters must be retrieved and the result must be processed on the Client. These elements together form a AJAX action.

AJAX functions

AJAX functions are the basic steps that together form a AJAX functionality which is supported by a slim and efficient JavaScript framework that hides the browser specific details from the implementation.

Web methods and proxies

The proxy framework is used on the client to call the server-side methods.

Ajax engine

The execution of the individual steps of an AJAX functionality using a timer and XMLHTTP objects is coordinated and supervised by the AJAX engine. The methods for the implementation of the AJAX engines are available in ajax.js.

Also the AJAX engine needs only one variable with the name Ajax to be declared in the global namespace to minimize name conflicts.

In many cases it is importantly for the implementation of actions that they occur one after the other by using a queue mechanism. This is also necessary from a network perspective because with HTTP connections only 2 simultaneous requests per server should be made at a time.

Therefore the AJAX engine implements a queue. Using some attributes on the AJAX actions it is possible to control the way how the existing entries are treated when starting of a new action.

There are several examples of AJAX actions are published on my Website at http://www.mathertel.de/AJAXEngine/.

Keine Kommentare: