GeekZilla

Lightweight Ajax

Ajax doesn't have to be complicated - at its most basic it just means partial updates your pages rather than reloading the whole page.

The attached js library contains just two functions - GetContent and RunJS.

GetContent() takes a URL and a element name: It simply populates the elements innerHTML with whatever the URL returns. Optionally you can also specify to append to the div content rather than repalce.

Run() takes a URL only: It simply runs whatever the URL returns.

The simple example below shows how these can be used to create rich interface such as a node tree.

The source for this is attached as a zip file below, but I'll summarsie here;

The Default.aspx page references the Ajax.js file and contains a function init() that adds a few nodes.

var node=0;

function init()
    {
        //add a few nodes
        node++;GetContent('myDiv','Node.aspx?node='+node)
        node++;GetContent('myDiv1','Node.aspx?node='+node,true)
        node++;GetContent('myDiv1','Node.aspx?node='+node,true)
        node++;GetContent('myDiv2','Node.aspx?node='+node,true)
    }

The variable 'node' is just a unique reference for each div - note that the GetContent() calls reference myDiv, myDiv1 etc.

The Node.aspx file is pretty simple also;

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Node.aspx.cs" Inherits="Node" %>
<table>
    <tr>
        <td class="header" >
            Node<% Response.Write(Request["node"]); %>
            <br><a href="javascript:node++;GetContent('myDiv<% Response.Write(Request["node"]); 
            %>','Node.aspx?node='+node,true)"
            >Insert -></a>
        </td>
        <td>
            <div id='myDiv<% Response.Write(Request["node"]); %>' ></div>
        </td>
    </tr>
</table>

It just contains another <DIV> element and link to populate it, again using the GetContent() function.

Because of the simplicity of the functions, integrating with other tools such as Rico is not complex.

This is not a replacement for a framework such as ATLAS, but it is a lot easier to pick up if you just want to Ajax enable key functions in your existing application.

Author Dave Howard

I have been involved in IT development for the last 10 years - a lot of it around desktop applications and telecoms.

Add Comment

Latest Articles