What is Ajax

Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is meant to increase the web page's interactivity, speed, and usability.

To use Ajax technique one need knowledge or support for (X)HTML, CSS, DOM, JavaScript. But you will not need that using XAJAX. All those technologies already implemented in to this library. You only need knowledge of PHP. And if you know JS you will probably be able to create more attractive interfaces.

Good and Bad

Read carefully this advantages and disadvantages  on AJAX. You need to know it before you plan to implement this technique on your site.

Good

1. Bandwidth utilization. By generating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data, Ajax web pages can appear to load relatively quickly since the payload coming down is much smaller in size. In addition to "load on demand" of contents, some web based applications load stubs of event handlers and then load the functions on the fly. This technique significantly cuts down the bandwidth consumption for web applications that have complex logic and functionality.
2. User interface. The most obvious reason for using Ajax is an improvement to the user experience. Pages using Ajax behave more like a standalone application than a typical web page.
3. Separation of Data, Format, Style, and Function. A less specific benefit of the AJAX approach is that it tends to encourage programmers to clearly separate the methods and formats used for the different aspects of information delivery via the web.

Bad

1. Browser integration The dynamically created page does not register itself with the browser history engine, so triggering the "Back" function of the users' browser might not bring the desired result.
2. Another issue is that dynamic web page updates make it difficult for a user to bookmark a particular state of the application
3. Response-time concerns. Network latency - or the interval between user request and server response - needs to be considered carefully during Ajax development. Without clear feedback to the user, smart preloading of data and proper handling of the XMLHttpRequest object, users might experience delay in the interface of the web application, something which users might not expect or understand.
4. Search Engine Optimization. Websites that use Ajax to load data which should be indexed by search engines must be careful to provide equivalent data at a public, linked URL and in a format that the search engine can read, as search engines do not generally execute the JavaScript code required for Ajax functionality. This problem is not specific to Ajax, as the same issue occurs with sites that provide dynamic data as a full-page refresh in response to, eg, a form submit (the general problem is sometimes called the hidden web).
5. Javascript reliability. Ajax relies on Javascript, which may be implemented differently by different browsers or versions of a particular browser. Because of this, sites that use Javascript may need to be tested in multiple browsers to check for compatibility issues
6. Accessibility. Using Ajax technologies in web applications provides many challenges for developers interested in adhering to WAI accessibility guidelines

Because of this, you need to be very carefully to use AJAX. After you learn how to use that I am sure you will be exited and planning to implement it everywhere. That is good but remember that you can implement it everywhere but only everywhere it is  compatible. I'll try to list where I plan to implement it in JCommerce component.

1. Everywhere it is possible in admin area
2. Rating system for Products,  Seller , Category
3. Add Category, Product, Seller to favorite
4. Add Comment to Product
5. Add product to Cart
6. Redeem Coupon
7. Delete product, change quantity,  Recalculate functions in the cart

Because in all those action no need to keep browser history, bookmark special page or be indexed by SE. The only issue is still requirement of desktop graphical browser with JavaScript Support.

I think now you know well what is AJAX and where you should and where you shouldn't to use it.

Let's start and create our first component with XAJAX.

First create folder com_helloworld in /administrator/components directory. Then create admin.helloworld.php file with following code

<?php
defined('_VALID_MOS') or die('Direct Access Restricted!');
include_once 'components/com_helloworld/admin.helloworld.xajax.php';
?>
<a xhref="javascript:void(0);" 
   id="test_a" 
   onclick="xajax_test('Tested OK!')">Test Me!</a>  
   

Download XAJAX Library, and extract xajax folder in archive to com_helloworld folder.

Create admin.helloworld.xajax.php and insert following code there.

<?php
defined('_VALID_MOS') or die( 'Restricted access' );
require_once($mosConfig_absolute_path.
    "/administrator/components/com_helloworld/".
    "xajax/xajax_core/xajax.inc.php");
 
function test($in)
{
    $objResponse = new xajaxResponse();
    $objResponse->alert($in);
    $objResponse->assign("test_a", "innerHTML", $in);
    return $objResponse;
}
 
$xajax = new xajax($mosConfig_live_site.
    "/administrator/index3.php?option=com_helloworld&no_html=1");
//$xajax->debugOn();
$xajax->registerFunction("test");
$xajax->processRequest();
$xajax->printJavascript("components/com_helloworld/xajax/");
?> 
   

This is will be our ajax file. All ajax requests we will process in this file.

Save all files, login to back-end and call helloworld component. Use http://localhost/administrator/index2.php?option=com_helloworld URL where localhost is your http server address.

Try to click on the link "Test Me!". You should see JavaScript alert with the text "Tested OK!" and link string should change to this text too. If it happened you are successfully created your xajax Joomla component. Now the XAJAX usage in Joomla limited only by your experience and imagination.

I am using XAJAX to publish and unpublish records, delete records, change access, even edit some of the records.

Let me describe how this code is working.

If you look to http://localhost/administrator/index2.php?option=com_helloworld HTML sourse you will find there code.

<script type="text/javascript">
var xajaxConfig = {
  requestURI: "http://.../index3.php?option=com_helloworld&no_html=1",
  debug: false,
  statusMessages: false,
  waitCursor: true,
  version: "xajax 0.5 Beta 1",
  legacy: false
};
 
var xajaxLoaded=false;
function xajax_test(){return xajax.call("test", {parameters: arguments});}
</script>
<script type="text/javascript" 
        xsrc="components/com_helloworld/xajax/xajax_js/xajax.js"></script>
<script type="text/javascript">
window.setTimeout(function () 
{ if (!xajaxLoaded) 
    { alert('Error: the xajax Javascript file could not be included. 
             Perhaps the URL is incorrect?\nURL: 
             components/com_helloworld/xajax/xajax_js/xajax.js'); 
    } 
}, 6000);
</script>  
   

This code is produced by $xajax->printJavascript('components/com_helloworld/xajax/'); line. This function include xajax JS library and define JS functions with the names you registered in line $xajax->registerFunction("test"); and prefix this function with xajax_. Now we can call our PHP test() function anywhere in HTML like this onclick="xajax_test(‘somthing');" what we actually do in admin.helloworld.php file.

When we click on the "Test Me!" Link xajax make request to url defined in line

$xajax = new xajax($mosConfig_live_site.'/administrator/index3.php?option=com_helloworld&no_html=1');

This calls test() function and function produce XML output by $objResponse object.

XML tells to popup alert with ‘Tested OK!' text and change innerHTML of element with id=test_a to this text too. You could change $objResponse->assign('test_a', "innerHTML", $in); to $objResponse->assign('test_a', "innerHTML", date(‘Y-m-d h:i:s')); to insert time as a link text.

The further application of XAJAX in Joomla depends only on your experience and imagination. Learn all XAJAX power to get Ideas on areas of application. Of course taking in account good and bad described above.

Comments (7)

10x ALOT for you example...
written by Aquarius, March 08, 2007

Nice mate, thankz alots for you example, is very usefull for me.

i need any idea for work whit this

Grtz.

Thank??s
written by Marcos Umpi?rrez, July 13, 2007

Thank??s, is very usefull

Effects on optimisation
written by Karen Ajlouni, July 25, 2007

This wouldnt work in web optimization and implentation because of Java Script correct?

Output buffering.
written by Eddy Yanto, July 25, 2007

Things might get complicated when there's a lot of administration forms, tabs and etc within. And this introductory article showed the possibility of integrating xajax in the Joomla! back-end but further output control is needed when a xajax function is getting data from files that separate html and php (content and presentation separation)

Eddy

Nice tutorial
written by Arun varpe, August 03, 2007

nice !! nice logic too work with ajax based joomla

Very Nice Tutorial
written by Arun Varpe, August 10, 2007

good tutorial for strat XAJAX .....

valid_mos
written by gmcgilli, December 12, 2007

Neat stuff. 2 questions though... How does this manage to maintain a _valid_mos without going through the framework? And also how does it manage to handle admin authentication?

Name

Email

Website

Title

Comment

Add Comment