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.
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 nameajax 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.
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.