Basics usage

#Basics usage

Here are some basic steps for start using this library.

Download latest version of the library and connect to the site:

<script type="text/javascript" src="patch/to/library/fullajax.js"></script>
<script type="text/javascript">
  //here will be configuration for fullajax
</script>

Then need add ID for the block in the template where the content will be updated via AJAX. In most cases this already done when creating a template.

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

All response to AJAX requests will be placed in this block. Therefore the server must to return only the desired content, not the entire site (About it bottom).

Now, need add the basic links filtering options, and add some other advanced options for FullAJAX. Example configuration:

FLAX.Filter.add({url:'/', id:'forFullAjax'});
FLAX.linkEqual[':ax:forFullAjax:'] = '!';
FLAX.linkEqual['[~q~]'] = '?';
FLAX.directLink();

The first line it a filter definition, and indicates that all internal 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 in About HAX HtmlAjaX article.

Second row converts “: ax: forFullAjax:” in “!” in address line - build AJAX link.

The third line need for normal work of the AJAX links, when someone will try open AJAX link on other tab/browser.

Also if you use some other script on site (gallery, light-box etc.) you may want let them know that page updated. Reason for this that almost scripts uses doomready event that fires only once, when page loaded and not fires when page updated via AJAX, so the scripts simple not know that the page is ready. For this can use load (fires after block update) / unload (fires before block update) event of FLAX.Html and initialize this script independently:

FLAX.Html.onall('load', function(options){
  //here some code for notify other scripts 
});

Or by request ID

FLAX.Html.on('forFullAjax', 'load', function(options){
  //here some code for notify other scripts 
});

On the server-side need identify whether it AJAX request or whether it normal request. For this FullAJAX sets additional header HTTP_AJAX_ENGINE with a value Fullajax. Example determination a request type on the server side (PHP):

<?php
if(isset($_SERVER['HTTP_AJAX_ENGINE']) && $_SERVER['HTTP_AJAX_ENGINE'] == 'Fullajax'){
  //This Ajax request so need send only part of the site.
}
else{
  //This normal request so need send  the full site.
}

That's all, after simple manipulation, we got a website with AJAX technology ;)