As already known, JavaScript library FullAjax the ability to easily implement Ajax technology for your site without additional knowledge JavaScrip. You need only basic knowledge of HTML and in some cases change the logic in the server-side of the site. So here are some basic points will describe the implementation of this library.

Download latest version of the library (can here) and connect it to the site.

1
2
3
4
<script type="text/javascript" src="/fullajax.js"></script>
<script type="text/javascript">
  //here configuration for fullajax
</script>

Next you must add ID to the block in the template where the content will be updated with Ajax.In most cases this already done when creating a template.

<div id="forFullAjax">
	<!-- Here content to will be updated. -->
</div>

All that the server respond to Ajax requests will be placed in this block. Therefore the server must to return only the desired content, not the entire site.

Now, you need to add basic filtering options of links that are converting to Ajax, and add other advanced options for FullAjax.
Example configuration:

1
2
3
SRAX.Filter.add({url:'/', id:'forFullAjax'});
SRAX.linkEqual[':ax:forFullAjax:'] = ':';
SRAX.directLink();

The first line it a filter, and indicates that all internal site links that which starts at a ‘/’ will be converted into Ajax-links. Parameter “id:” – a block identifier, where will be updated content.
Additional options can be found here or at the site of this library.

Second row converts “: ax: forFullAjax:” in “:” . It attached to a site as a result of FullAjax works.

The third line need for normal work of the Ajax links.

That’s it all, after simple manipulation, we got a website with Ajax technology.

To identify on the server-side whether this Ajax request or whether this normal request FullAjax sets additional header HTTP_AJAX_ENGINE with a value fullajax. If your server has removes additional headers, you can specify additional option in FullAjax settings. This option will be transferred to the server and will allow to identify type of request.
Add additional parameter:

1
SRAX.Filter.add({url:'/', params:'ax=ok', id:'forFullAjax'});

Next example of determination a request type on the server side:

1
2
3
4
5
6
if(isset($_SERVER['HTTP_AJAX_ENGINE']) and $_SERVER['HTTP_AJAX_ENGINE'] == 'Fullajax' or $_REQUEST['ax']=='ok' ){
	//This Ajax request. In response need send only part of the site.
}
else{
	//This normal request. In response need send  the full site.
}

Now something about FullAjax filtering.

There are times when you want to prevent convert of some links in Ajax. For it you can use additional filters
For one link:

1
SRAX.Filter.add({url:'/administrator.html', type:'nowrap'});

or:

1
SRAX.Filter.add({query:'format=pdf', type:'nowrap'});

For a few links:

1
SRAX.Filter.add({url:['/administrator', '/web-links'], query:['format=pdf','task=edit'],  type:'nowrap'});

In the parameter “url:” list of links, and in the parameter “query:” list of URL queries. Parameter type: ‘nowrap’ indicates that these links are not must be converted into Ajax. Certainly not necessary to use “url:” and “query:” a together, you can use only what is best for the particular case.
Also, you can block convert link adding to it the option ax:wrap=”0″:

1
<a href="mulink.html" title="My Link" ax:wrap="0">My Link</a>

Example, ignore the form:

1
<form ax:nowrap="1" id="myform">

or:

1
2
3
SRAX.Filter.on('beforewrap', function(ops) { 
	return ops.el.id != 'myform'; 
});

Ignoring all forms:

1
2
3
SRAX.Filter.on('beforewrap', function(ops) { 
	return ops.el.nodeName != 'FORM'; 
});

When performing Ajax request is useful somehow inform the user about it. For it you can show the image with animation. for this in the FullAjax library is available option “loader:”.
Use that:

1
SRAX.Filter.add({url:'/', loader:'myloader', id:'forFullAjax'});

Add animated images to site.
CSS:

1
2
3
4
5
6
#myloader {
	position: absolute; 
	top: 60%; 
	left: 40%; 
	display: none; 
}

HTML:

1
<img id="myloader" src="/ajax-loader.gif" alt="Loading..."></img>

For more complex sites, need knowledge of JavaScript..
If you know JavaScript you can create loading effect of content .

1
2
3
4
5
6
7
8
9
SRAX.Effect.add({id: 'You-Content-ID',
	start:function(id, request){
	// Do here animation after click before request
	request(); // execute this when animation ends
	},
	end:function(){
	// Do here animation after request
	}
});

That’s all about the basics FullAjax.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Єдина Країна! Единая Страна! United Country