AJAX Made Easy
It's easy to over-engineer AJAX sites. Many of the AJAX frameworks available look a lot like RPC or even CORBA-type solutions, complete with marshaling of complex data types (almost as if JavaScript were a strongly typed language). While there are lots of reasons someone might want such a sophisticated framework, there are also plenty of problems that could be solved using a more basic solutions.
In many cases, all a developer is looking to do is grab a piece of HTML and drop it into the DOM somewhere. Here I've created a very easy mechanism for doing just that. To prepare a page to use my EasyAjax framework, modify your HTML tag to include the
Download EasyAjax.zip
The simplest EasyAjax page looks like the following:
When first loaded, the
The effect is similar to what you see on a lot of business news sites today that provide continuously updating quotes inline with the text of the articles. To demonstrate, I've used the framework to create a clock. The clock displays current time according to the server hosting my site and uses http://jimroos.com/time.aspx to get the current time:
And here's the result:
There are times when we'd rather update the page based on some user action rather than polling the server. In those cases, we omit the
Of course, we can update the page based on any user action. For example, if we rather update the page when the user clicks on the Earth image, we make the following modifications:
We can also use this framework to create more sophisticated features. Consider Google's search suggestion system which presents you with a continuously updating list of search suggestions with each key you press. In order to implement something like this, we'll need some facility to post data with our request. To accomplish this, the
Note that the framework will only make a POST request if parameters are provided. Otherwise, it will generate a GET request and append a nonce.
In many cases, all a developer is looking to do is grab a piece of HTML and drop it into the DOM somewhere. Here I've created a very easy mechanism for doing just that. To prepare a page to use my EasyAjax framework, modify your HTML tag to include the
easy XML namespace and reference EasyAjax.js. Once you've done that, you can use the <easy:ajax> tag to define AJAX-updateable regions within your page.Download EasyAjax.zipThe simplest EasyAjax page looks like the following:
<html xmlns:easy="http://www.jimroos.com/easy">
<body>
<script type="text/javascript" src="EasyAjax.js"></script>
<easy:ajax interval="5000" url="somepage.aspx">
Initial Content
</easy:ajax>
</body>
</html>
When first loaded, the
<easy:ajax> tag contains the string "Intial Content". Shortly there after, this content is replaced with whatever HTML content is generated by somepage.aspx. The page then automatically polls somepage.aspx every 5000 ms.The effect is similar to what you see on a lot of business news sites today that provide continuously updating quotes inline with the text of the articles. To demonstrate, I've used the framework to create a clock. The clock displays current time according to the server hosting my site and uses http://jimroos.com/time.aspx to get the current time:
<img src="earth.gif">
<div style="float:right;">
<div>
Current Time
</div>
<div>
<easy:ajax interval="1000" url="time.aspx">
00:00:00
</easy:ajax>
</div>
</div>
And here's the result:
There are times when we'd rather update the page based on some user action rather than polling the server. In those cases, we omit the
interval attribute and call reload() on the <easy:ajax> element. For example, we can modify the example above so that instead of polling the server, we only update when the user clicks on the time:
<easy:ajax onclick="this.reload();" url="time.aspx">
00:00:00
</easy:ajax>
Of course, we can update the page based on any user action. For example, if we rather update the page when the user clicks on the Earth image, we make the following modifications:
<img src="earth.gif" onclick="document.getElementById('time').reload();">
<div style="float:right;">
<div>
Current Time
</div>
<div>
<easy:ajax id="time" url="time.aspx">
00:00:00
</easy:ajax>
</div>
</div>
We can also use this framework to create more sophisticated features. Consider Google's search suggestion system which presents you with a continuously updating list of search suggestions with each key you press. In order to implement something like this, we'll need some facility to post data with our request. To accomplish this, the
reload() function accepts, as a parameter, a JavaScript object representing name value pairs for the post data:
var params = {
firstname : document.forms[0].firstname.value,
lastname : document.forms[0].lastname.value
};
document.getElementById("myelement").reload(params);
Note that the framework will only make a POST request if parameters are provided. Otherwise, it will generate a GET request and append a nonce.