Hello World!

AJAXIK is a smart lightweight jQuery plugin that allows you perform AJAX requests without any efforts. You only have to initialize it once and since that whole your site will work without page reloading.

$('body').ajaxik();

There are five basic aims which the plugin helps to reach:

  • AJAX navigation. I.e. links initiate AJAX requests instead of usual page loading when they are clicked (external links are not taken into consideration).
  • Partial page loading. Which is useful when you want to load data into some page block (sidebar widgets, userbar or something else).
  • Sending forms data via AJAX requests.
  • Communication between client and server. Server can send events to client as reply to request. In its turn, client can listen these events and react somehow.
  • Plugni initialization. Sometimes it's pretty troublesome to initialize plugins after each AJAX request. AJAXIK can make this easier. All you need is define plugin factory and mark requred blocks with a special attribute.

Let's look at this plugin closely and consider some examples. First of all, whole this site demonstrates how AJAXIK works. Click any link to make sure.

Page loading

Saying "page" we can mean not only everything that you can see in the browser window, but also specific part of the page which contains content only. Let's call it "content block". In this case header, footer and sidebars stay apart from the content and can be treated as additional elements which don't have to be refreshed each time the content is updated. You can use option mainContainer in order to define content block.

$('body').ajaxik({
	mainContainer: '#container'
});

When you need update specific page block you can use attribute data-target on the link (or on any other element that initiates request).

<div>Let me tell you a <a href="poem.php" data-target="@parent">poem</a>.</div>

There is a small but important difference between updating content block and some another block on the page. When content block is beign updated, new state is beign added to the history, so document location is beign updated. This won't happen when page updates partially. Now, try it:

Let me tell you a poem.

Events

When you perform some operation on the server and want to inform client about its result, you can use events. That means that you have to return JSON in the response that contains key event:

{
	event: {
		name: 'eventname',
		params: {...}
	},
	// other elements of the response can follow here
}

Events are not callback for some particular request. You can start to listen event on application startup, and listeners will be called each time when corresponding event appears in the response.

$.ajaxik.addEventListener('dice.rolled', function(params) {
	var msg = 'Dice rolled: ' + params.dice1 + ' - ' + params.dice1 + '.';
	if (params.dice1 == params.dice2) {
		$('#roll-message').html(msg + ' You are lucky today!');
	} else {
		$('#roll-message').html(msg + ' Maybe another time.');
	}
});
Roll Dice    Try your luck, get equal numbers!

See also how AJAXIK can deal with forms, javascript templates and other plugins.