Sonntag, Juni 12, 2005

Native AJAX Programming

With the Ajax model the execution of a web page is processed in 2 phases:

Phase 1: Loading the page

During this synchronously implemented phase the client loads the "static" part of the application. That corresponds to displaying a form or a list without any concrete data.

The code for the page is assembled and delivered to the browser. It makes no big difference if plain HTML, generic Javascript or Javascript includes are used.

The http answer of this first call can be delivered in many with a hint for the client that the local browser cache can be used and therefore the server will not be asked again for this code. The displaying of a page in this situation is very fast and efficiently because the bytes are retrieved from the local cache and no network delays occur.

See http://msdn.microsoft.com/library/en-us/dnwebgen/html/ie_introfiddler2.asp

Phase 2: Loading data from the server

This phase is used for retrieving more information from the web server and then combining it into the already delivered html. This can be repeated several times while the initial page is still loaded.

That can be the current list of the emails, (Outlook Web ACCESS, GMail) or the data changed since the last call (GMail) or additional information to a search word (Google Suggest).

There are also non HTML/javascript solutions possible. Google Maps uses variable URLs with parameters on image objects to retrieve the bitmaps that are part of the current shown map.

The AJAX model must be considered in both phases. In the first phase the necessary (Javascript) code must be delivered. In the second phase this code must be used to get the information from the server.

The core algorithm of the example, the computation of the prime factors of a number, can also be implemented quite simply on the server. A url with the number in a parameter is requested from the server and the http answer will return the list of factors. The Javascript method from CalcFactorsAsync1.htm can be converted quite easily in C # and over URL is then called:

http://www.mathertel.de/AjaxEngine/S01_AsyncSamples/CalcFactorsRequest.aspx?number=266712

The source code of this sample is available on the sample WebSite.

That is the simple version of the function for the computation of the prime factors. The clearly more complex variant of the code from CalcFactorsAsync2.htm is not needed. Thus programming is simplified for the server-side execution again.

To start such a request from the client a quite simple code is sufficient:

var xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
xmlObj.Open("GET", "Request.aspx?number=" + inputText, false);
xmlObj.send();
outputText = xmlObj.responseText;

A complete implementation sample (CalcFactorsServer1.htm) is available on the sample WebSite.

So we can call the server. The answer of such an inquiry can, as we know, take up some long (cpu) time and the send() method waits for the answer of the server. During this time and with the above implementation the client does freeze and user input events do not execute. Again we have a locking synchronous situation.

Sending the parameters and receiving of the answer therefore must be implemented in 2 different methods so that in the meantime the events of the keyboard and the mouse in the browser can execute.

The XMLHTTP object must be defined global for it is still available at the time of the transmission of the result. A new method RetrievePrimeFactors is called when the result is present and the field for the result is updated.

A complete implementation sample (CalcFactorsServer2.htm) is available on the sample WebSite

With this implementation we reach the kind of the Browser application, that one is called an AJAX application. No real XML is used until know but in the end final same result is achieved.

The files for the implementation are available on the sample WebSite (see sidebar)