The AJAX Engine

 

Overview

The basic elements for an application using the AJAX technologies JavaScript
and XMLHttpRequest are not difficult to realize. However, the selection from
the available technologies as well as a suitable abstraction in using these
elements is important for the success of the realization of an application. One
main goal behind the architecture of this AJAX engine was to build 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.
When targeting applications with some hundred sides and WebServices and
with in sum about a thousand methods the developer must have a clear and
simple kind and pattern for coding 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.
So the main idea of this 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
XMLHttpRequest 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 that start the AJAX functionality must only call a
simple JavaScript function. This can be used for example using inline code in
an onclick attribute. This starts then the processing of the steps that should be
executed.
AJAX actions
For the call of the 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.
The individual methods to call a WebService is generated by a WSDL to
JavaScript Compiler and the core functionality for building SOAP messages is
available in ajax.js.
The AJAX engine
The execution of the individual steps of an AJAX functionality using timer
and XMLHttpRequest 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.
WebServices
The communication between the client and the server is realized by using the
standard WebServices infrastructure with SOAP messages and WSDL
services descriptions instead of building a new server-side mechanism for
good reasons.
• Writing a server side framework must not be done. There are already a lot
of them but the WebService based on SOAP and WSDL is widely
accepted as a standard.
• Before implementing a new proprietary core feature with a high
complexity I think it makes sense to search for existing technology in the
common frameworks that I can rely on.
• I use ASP.NET in my engine to build the server side part. Because I
expose only WebServices to the client-side AJAX engine it should be
possible to port this part of the overall application architecture to another
server platform if needed.
• Writing server-side ports can be a nightmare regarding security. Many
security risks of the past years came through open ports that do not work
as expected and could be used for different purpose.
• By just NOT implementing a server side communication framework I
leave this task to Microsoft. – Of course it is still necessary to write good
and secure code inside the methods.
• I haven’t found a situation until now where WebServices do not fit into
the architecture.
You cannot avoid using some global
variables when implementing
JavaScript in the browser but using as
few as possible and structuring the
storage by using more complex objects
helps getting compatible.
• The technologies around SOAP and WSDL are at a solid usable level but
also still evolving. I expect to see a native universal service client in
browser type applications and I hope we will not have to use the basic
XMLHttpRequest Object in the future and will participate in this
evolving when building web applications.
(Mozilla/Firefox has already a built-in but very buggy object to do this
and Microsoft has as COM object part of the Office suite).
The pages and include files
The initial load of a web application using AJAX is a regular HTML GET
operation. In the samples you see plain *.htm or *.aspx files that have a
constant html output.
ASP.NET Web Forms and ASP.NET Web Controls are not used to reflect any
POSTed information or the state of the client. Also no session variables are
use.
The common JavaScript functions, the JavaScript proxy code we see next and
the control specific functions we use later are downloaded by fetching static
JavaScript include files or dynamically generated static JavaScript code.
Because the initial content is static the server and the browser can be enabled
to cache these files and give the user a fast response.