Minimal AJAX toolkit
So there is a wide world of tools and methods for "web 2.0", and for developers it is hard to know which one to chose to use and support. I have tinkered with two AJAX toolkits and found things that I liked and disliked with them. But overall I found that they were both too big and too feature rich for simple use.
So it occured to me that for some of my simple projects all I needed was bare-bone functionality, meaning the ability to fetch the contents of a given url. Beyond that I can do what I need in small simple javascript. I didn't need fancy event handling, or animation, or auto-complete drop downs, or such. And if I did, then I could probably do that my self later, as long as I had the ability to easily fetch a URL.
Thus I started putting together a new AJAX toolkit named oddly enough AJAXMinimal. This is comprised of a single .js file that provides an object with one method call, fetch_url(). That's it. Simple, easy to use. Does the job.
Let's dive into an example of how to use AJAXMinimal, as I think that is a good way to explain the hows and whys and such.
I have an HTML page with three buttons, each of which I want to fetch a given URL and then load the contents of that dynamically into a certain DIV within my page. Thus dynamically changing my page without refreshing the whole thing. Here is body of the HTML:
<body>
<h1>Test page index</h1>
<form name="main_form" action="" onsubmit="return false">
<input type="button" name="button1" id="button1" value="Button 1" onclick="load_html(this);"/>
<input type="button" name="button2" id="button2" value="Button 2" onclick="load_html(this);"/>
<input type="button" name="button3" id="button3" value="Button 3" onclick="load_html(this);"/>
</form>
<div id="outer_div">
Outer Div
<div id="inner_div">
Inner Div
</div>
</div>
</body>
Now to jump back, let's look at the javascript at the top of this file:
<script type="text/javascript" src="/js/ajax-minimal.js"></script>
<script type="text/javascript">
function set_inner_html(am) {
var inner_obj = document.getElementById('inner_div');
if (! inner_obj) return;
inner_obj.innerHTML = am.content;
}
function load_html(button) {
var am = new AJAXMinimal();
var button_number = button.id.substr(-1);
var url = '/cgi-bin/blah';
var args = new Array();
args['button_id'] = button_number;
args['blahblah'] = 4444;
args['string'] = 'this is a string argument';
am.fetch_url( 'GET', url, args, set_inner_html );
return;
}
</script>
As you can see, we call load_html() on a click to the buttons which creates an AJAXMinimal object. The fetch_url() method takes 4 arguments:
am.fetch_url( request_method, url, args_assoc_array, function_to_callback );
- request_method is GET, POST, HEAD, or whatever.
- url is the url to fetch. This may already have query string args or not. And can be relative or absolute, but keep in mind the restrictions of using AJAX calls- you can't fetch someting outside of the original domain.
- args_assoc_array is an associative array of arguments to send with the request. With the GET method, these are turned into query string args that are then appended to the url. With POST these are sent as the contents of the POST request. This arrary should be set up as arr['key'] = value.
- function_to_callback is a function that will be called when the URL requested has loaded. This function will be passed one argument only, the AJAXMinimal object itself. It is within this function that you define and pass in that you do your own thing.
In the example above, set_inner_html() is the callback that simply sets the innerHTML of our DIV with the contents of the URL.
That's it! Simple. Easy to use. Easy to understand.
To see this example in action, try it out here:
http://spencerchristensen.com/test_html/index.html
0 TrackBacks
Listed below are links to blogs that reference this entry: Minimal AJAX toolkit.
TrackBack URL for this entry: http://spencerchristensen.com/mt/mt-tb.cgi/6
Leave a comment