Ajaxion - Ajax without javascript: WS calls, xml, drag'n drop, controls, binary image retrieval, etc

• Download source files - Net11.zip - 291.4 KB
• Download source files - Net20.zip - 264.2 KB

Ajax without Javascript ... don't believe it ... it's just "marketing" (haha). Another understanding would be "keep Javascript simple"... unless you have no choice. The best productivity and results are based on understanding. Ajax and web applications provide great advantages with understanding.

Background

I started Ajaxion to learn Ajax and I finished by using it to enhance a web page in an old web application, under maintenance. Many thanks to my good colleague, Marius Francu, that supported the first "real world" usage of Ajaxion.

The idea here is simple: there is an Ajaxion Javascript layer between the hosting page in the browser and the web server. The Ajaxion Javascript layer defines Ajaxion events enclosing Ajax calls to the web server. The web server runs some C# code (Java coming soon) to consume the Ajaxion events and their Ajax calls. The Ajaxion Javascript layer uses the object XMLHttpRequest to make HTTP calls to the web server. These calls are nearly the same POST or GET but in asynchrony with the normal host page life-cycle.

The meaning of Ajaxion is to build further Ajax-enabled controls, more than are currently used. Ajaxion is simple so it can be controlled / customized easily based on what someone could need, e.g. changes in the event monitoring, after that it can be used for specific controls.

Using the code

To use the code just download the sample that is appropriate for your version of .NET:

• AjaxionTest_Net.1.1.zip works with VS 2003.
• AjaxionTest_Net.2.0.zip works with VS 2005 (this was only imported, I hope to optimize it soon).

Further register the "AjaxionTest" web application into IIS, e.g. like this:

• Go within the IIS hosting directory (e.g. "c:\Inetpub\wwwroot\").
• Extract the .zip content; you should got the new directory "AjaxionTest" (e.g. "c:\Inetpub\wwwroot\AjaxionTest").
• Register the new directory "AjaxionTest" as "AjaxionTest" web application (e.g. from the properties dialog of the "AjaxionTest" directory, shown by the IIS management console)

Once you have AjaxionTest on your IIS you can take advantage on the great debug power of Visual Studio.

A short guide for the code

Ajaxion relies in:

• Ajaxion.js - that hosts a class like Javascript that initiates the Ajax calls.
• *AjaxionEvents.js to define the Ajaxion events hosting the Ajax calls and their callback Javascript functions - used to update the host page's target HTML elements.
• The C# class AjaxionEventConsummer that consumes the Ajaxion events with their Ajax calls.

How to get an Ajax enabled HTML element by using Ajaxion

Register the Ajaxion Javascripts to be used in the host page, e.g. see head of Default.aspx. Choose a HTML element's event to trigger the Ajaxion events:

onclick="ajaxion.Call('POST','AjaxCallbackWs.asmx/GetImageUrl', 
    'imageUrl', GetImageUrl);"

// or e.g. set the HTML event from the C# class of the host page 

// (be careful, both methods are used):


btnAjaxWsGetImgUrl.Attributes.Add("onClick",
    "ajaxion.Call('POST','AjaxCallbackWs.asmx/GetImageUrl',
    'imageUrl', GetImageUrl);");

Register the Ajaxion event (e.g. "imageUrl") and the callback function (e.g. "GetImageUrl") in the host page specific script (e.g. DefaultAspx_AjaxionEvents.js)

// Register Ajaxion event "imageUrl"

function GetEventParameters(eventId)
{
    ajaxion.ShowStatus('status', 'Processing...', 'coral');
    ajaxion.ShowStatusGif('statusGif', 'images/processing.gif');

    var parameters = '';

    switch (eventId)
    {
        ...    
        case 'imageUrl' :
            ajaxion.SetEventMonior('imageUrl', '');
            parameters = window.document.getElementById('dropDown').value;
            break;
        ...
    }
    return parameters;
}

// Ajaxion event "imageUrl" callback function.

// This updates the host page after the Ajax call for the 

// Ajaxion event was consumed.

function GetImageUrl()
{
    if (ajaxion.request.readyState == 4
        || ajaxion.request.readyState == 'complete')
    {
        window.document.getElementById('image').src = 
            ajaxion.request.responseText;
        window.document.getElementById('image').title = 
            ajaxion.GetParameters();
        EndAjaxionEvent();
    }
}

And, last but not least, the C# code to consume the "imageUrl" Ajaxion event (in this example there is a web service method):

[WebMethod]
public void GetImageUrl()
{
    Thread.Sleep(700); // Only to see status change, ajax effect


    try
    {
        string eventId;
        if (this.Context.Request.QueryString["imageUrl"] == null)
            eventId = "imageUrlIe6";
        else
            eventId = "imageUrl";

        AjaxEventConsummer callback = new AjaxEventConsummer(this.Context,
            eventId, "image/GIF");
        callback.ConsumeEvent("images/" + callback.Parameters);
    }
    catch (System.Threading.ThreadAbortException)
    {}
    catch (Exception ex)
    {
        FileLog.LogLine("\nException: " + ex.Message + 
            "\nTrace: " + ex.StackTrace);
    }
}

Points of Interest

The functionality demonstrated is (in the order it appears):

• The exchange of a simple text between two text boxes, but the Ajaxion calls are targeted to the C# code of the host page or of other pages (be careful with the encapsulation).
• An XML test, using a call to a web service. I like here (unless there is no choice) to handle XML in C# rather than something like Javascript. I value this more to stay as simple as possible - a simple layer to forward XML call parameters and some HTML as a call response.
• An approach to start and monitor a thread running on the server.
• Some image retrieval, also when you get the image binary e.g. from a database.
• Some drag'n drop.
• And, last but not least, a demo with a user control, the most appropriate usage of Ajaxion.

Hope this helps.