« I’m an uncle again! | Main | Javascript Color picker »
Jif, It’s the new Ajax!
By RickMeasham | June 20, 2006
I’ve decided that AJAX is a really, really annoying acronym. Aynchronous Javascript and XML. Firstly it doesn’t have to be asynchronous (though it’s best if it is) but mainly it doesn’t have to have anything to do with XML. In fact you’re better off using some other data serialisation method like JSON .. JavaScript Object Notation. Which, as the name suggests, is fairly native to Javascript. Anyway, I’m getting side-tracked
The point of this post is to introduce you to JIF, or the Javascript Intercommunication Framework. Sure it’s a mouthful, but it’s more meaningful. You use it with Javascript to communicate in both directions with your server without reloading pages.
Oh and yes, I’ll admit it: it’s a reverse acronym — an acronym in search of a meaning.
JIF Library
So now you’re convinced that JIF is a better name than AJAX, you’ll need a library. Of course there’s nothing stopping you from continuing to use your old AJAX libraries, you can use them for JIF too, it’s just a re-branding. However I feel that most AJAX libraries are overly bloated. They do so much more than just communicate with your server. If you want widgets, then either load an extra widget file, or write it yourself. Most widgets are fairly easy.
Download here: JIF.js
Now you have the file, let’s take a look at how to use it. Here’s an example:
jifGetJSON(
'/paste/jif.test.json.txt',
{ random: "parameter" },
function(o){
alert(o.message)
}
);
Line 2 is the URL we’re going to ask for information. JIF uses XMLHttpRequest (another misnamed function) to talk to the server and so it can only talk to the same server that we’re currently on, thus I don’t bother using full URLs.
Line 3 is an anonymous object that contains the parameters we want to send to the URL. In a GET request, like the above, they get translated into the query string, and so we really request jif.json.txt?random=parameter. In a POST request, it gets translated into the request body. Using a javascript object like this make it much easier to pass javascript data back and forth. There’s nothing stopping you passing an array as a parameter: { data: [1, 2, 3, 4] } will get translated into jif.json.txt?data=1&data=2&data=3&data=4
Line 4 starts the handler function. Because jifGetJSON is asynchronous we can’t just pass the value back to the caller. The o parameter is the JSON object returned by the server from our request. As it’s a proper javascript object, we don’t need to do any post-processing.
Line 5 just pops up an alert containing the ‘message’ attribute from the object the server returned.
It’s that easy.
Topics: Javascript, Programming | 2 Comments »
April 23rd, 2010 at 8:23 am
Wierd man, did you know that Ajax and Jif are the exact names of europs two biggest and competing brands in household cleaning chemicals.
April 23rd, 2010 at 12:05 pm
Yeah, I named it Jif because of that. Then I went looking for some words to fit the acronym.
Be aware that Jif is not under any sort of active development anymore. I don’t do much code, and what I do, I try to do using jquery.