Feather Ajax .: Celtic Kane

Feather Ajax

Introduction

There are already plenty of Ajax libraries available to the public; however, many of them are quite bloated and will slow down your website's performance. I've created an Ajax library, dubbed Feather Ajax, that is designed to be light-weight, customizable, and easy to use. If you're looking for an Ajax library that is feature-filled and difficult to learn, I suggest you look elsewhere.

Feather Ajax is more or less an Ajax framework that is designed to be built upon. It's meant to be as simple as possible so that you can understand how it works to learn Ajax, and continue its development for your own purposes.

Server-Side Syntax

An Example of Feather Ajax

Below is a basic example of how easy Feather Ajax is to use. Although the example is written in PHP, you can use any language you'd like. For the following example to work, you must name the file myajax.php and have featherajax.js in the same directory as the file. Additionally, you must be running the page through a webserver (like Apache) or a PHP parser of some type -- you can't run it locally without being parsed.

If you're impressed with the example below, be sure to check out the rest of this page. I've included a series of examples to show the capabilities of Feather Ajax

<?php
   if($_GET[action] == "gettext") {
   header("Cache-Control: no-cache");
   header("Pragma: nocache");
   echo "myElement=>The Ajax worked at <b>".date("h:i:s A")."</b>!|";
   die();
}
?>
<html>
<head>
<script type="text/javascript" src="featherajax.js"></script>
</head>
<body>
<div id="myElement"> This Text Will Be Dynamic </div>
<input type="button" value="Click Me" onClick="var ao = new AjaxObject101(); ao.sndReq('get','myajax.php','action=gettext');" />
</body>
</html>

The code above will give you a page that looks similar to this:

This Text Will Be Dynamic

Download

If you're intrigued enough to try it, you're more than welcome to download the library for free, and make any changes you'd like to it. I only ask that you retain the comments at the top of the code that contains the original author information. There are two versions of the code:

Feather Ajax v1.0.1
This file contains NO comments related to the code -- use this if you don't have any interest in editing the code.
Feather Ajax v1.0.1 - Commented
This file contains extensive comments to help you understand how the code works, so ideally, you'll be able to alter it for your own purposes.

Version 1.0.1 Changelog

The changes in version 1.0.1 include: full support for the POST method, more efficient browser detection, support for a 'waiting' function, support for selecting .value or .innerHTML from the server side (via %V%)

Advantages of Feather Ajax

Extremely customizable - The code is so small and compact, it's easy to figure out how it works, and change it to the way that you like it

Cross-Browser Support - It works on most, if not all, mainstream browsers that support Javascript. It has a built-in redundancy system to ensure that it will work

Extremely light weight - The code isn't bloated, so your webpage will load fast. The entire purpose of Feather Ajax is to get the job done and get out of your way

Object Oriented - Because it's object oriented, it gets around an Ajax bug that is really annoying. If you try to have two Ajax connections going at the same time in Firefox, the second one will fail and an error complaining about NS_ERROR_NOT_INITIALIZED. As long as you create two objects with different names, this error won't present itself

Javascript Syntax Examples

The Javascript syntax for Feather Ajax is quite simple. To start off, you need to declare a variable (ao) as the Feather Ajax's ajax object (AjaxObject101). You can obviously name ao as anything you'd like -- if you have multiple Ajax objects, you'll obviously have to use different names. The 101 corresponds the version number (1.0.1). This is done quite simply by the following code:

var ao = new AjaxObject101();

Once you've declared the AjaxObject101 object, you have the option of setting a function that is triggered when you're waiting for a response from the server. The following is completely optional:

function Waiting() {
document.getElementById('imgAwait').style.visibility = 'visible';
}
function DoneWaiting() {
document.getElementById('imgAwait').style.visibility = 'hidden';
}
ao.funcWait = Waiting;
ao.funcDone = DoneWaiting;

In the above code, the function Waiting() will be called once you've sent an Ajax request, but before you receive a response. When you receive a response, DoneWaiting() will be called. In the example I've given, an image with the ID of 'imgAwait' will be visible and hidden based on the status of the Ajax request.

Once you're ready to actually send the Ajax request, you simply have to send one single line. Below is the syntax of the request, along with two examples:

ao.sndReq(['post' or 'get'],[url],[data]);
Example using POST: ao.sndReq('post','myajax.php','action=gettext');
Example using GET: ao.sndReq('get','myajax.php','action=gettext');
Example with multiple variables: ao.sndReq('post','myajax.php','action=gettext&secondvar=sometext');

Server-Side Syntax

Once you've parsed out a request, you obviously need to send a response. Your response should be the following format:

echo "htmlID=>InnerHTMLValue|htmlID2=>InnerHTMLValue2|";

In your response, htmlID corresponds to an HTML tag with an ID of htmlID. InnerHTMLValue corresponds to the innerHTML of the htmlID that you want to set. Each HTML tag and value is separated by the pipe character (|). If you want to set the DOM .value rather than the .innerHTML property, then use %V%:

echo "htmlID=>%V%HTMLValue|htmlID2=>InnerHTMLValue2|";

In the above example, the following code will occur: document.getElementById('htmlID').value = HTMLValue; and document.getElementById('htmlID2').innerHTML = InnerHTMLValue2;. Most of your Ajax responses won't require %V%, but if you're setting the value of certain form elements, like a textbox, you'll need to use %V% to prefix your string.

Example Using POST

Handling a POST request is not that much different than a GET request. All you need is to have 'post' in the first argument of your sndReq function, and check for a $_POST PHP variable instead of $_GET.

<?php
   if($_POST[action] == "gettext") {
   header("Cache-Control: no-cache");
   header("Pragma: nocache");
   echo "myElement=>The Ajax worked via POST at <b>".date("h:i:s A")."</b>!|";
   die();
}
?>
<html>
<head>
<script type="text/javascript" src="featherajax.js"></script>
</head>
<body>
<div id="myElement"> This Text Will Be Dynamic </div>
<input type="button" value="Click Me" onClick="var ao = new AjaxObject101(); ao.sndReq('post','myajax.php','action=gettext');" />
</body>
</html>

Example Using a Waiting Function

A waiting function is useful for displaying a spinner icon or a "Please Wait..." label. To set a waiting function, you need to set the funcWait and funcDone properties within the Ajax object. funcWait will be called as soon as you execute sndReq, and funcDone will be called once a full response from the server is complete. Keep in mind that funcWait and funcDone must be set BEFORE you call sndReq.

<?php
   if($_POST[action] == "gettext") {
   header("Cache-Control: no-cache");
   header("Pragma: nocache");
   echo "myElement=>The Ajax worked at <b>".date("h:i:s A")."</b>!|";
   die();
}
?>
<html>
<head>
<script type="text/javascript" src="featherajax.js"></script>
<script language="Javascript">
function Waiting() {
    document.getElementById('imgAwait').style.visibility = 'visible';
}
function DoneWaiting() {
    document.getElementById('imgAwait').style.visibility = 'hidden';
}
</script>
</head>
<body>
<div id="myElement"> This Text Will Be Dynamic </div>
<input type="button" value="Click Me" onClick="var ao = new AjaxObject101(); ao.funcWait = Waiting; ao.funcDone = DoneWaiting; ao.sndReq('post','myajax.php','action=gettext');" />
<img src="wait.gif" id="imgAwait" style="visibility: hidden;" /> </body>
</html>

Example Using Multiple Variables

Within the third argument of the sndReq function (the data argument), you can include multiple variables. Within the server's response, all you have to do is separate each variable with a pipe character (|).

<?php
   if($_GET[action] == "gettext") {
   header("Cache-Control: no-cache");
   header("Pragma: nocache");
   echo "myElement=>The Ajax worked at <b>".date("h:i:s A")."</b>!|myvar=>Your variable: $_GET[setmyvar]|";
   die();
}
?>
<html>
<head>
<script type="text/javascript" src="featherajax.js"></script>
</head>
<body>
<div id="myElement"> This Text Will Be Dynamic </div>
<div id="myvar"> Your variable: (none) </div>
<input type="button" value="Click Me" onClick="var ao = new AjaxObject101(); ao.sndReq('get','myajax.php','action=gettext&setmyvar=Foobar');" />
</body>
</html>

Troubleshooting

Here are a few tips if you can't seem to get your Feather Ajax to work:

Is your sndReq URL connected to the correct page, that contains the server-side code?
Did you remember the die() function at the end of the server-side code? That's very important.
Do you have an HTML element with the id you're trying to alter?
Is featherajax.js correctly linked to the page?
If you're getting a NS_ERROR_NOT_INITIALIZED error in Mozilla/Firefox, make sure you use unique Javascript variable names for each new AjaxObject().
Does your Ajax response contain a pipe character or => character? Keep in mind those are delimiters for the Javascript parser.