Joomla: Ajax Interface without using jQuery

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.


How AJAX Works

AJAX


AJAX is Based on Internet Standards

AJAX is based on internet standards, and uses a combination of:

  • XMLHttpRequest object (to exchange data asynchronously with a server)
  • JavaScript/DOM (to display/interact with the information)
  • CSS (to style the data)
  • XML (often used as the format for transferring data)

 

Source:http://www.w3schools.com/ajax/ajax_intro.asp

 

Now we can see how to pass values without using jQuery

Joomla currently introduce a new functionality Ajax Interface from Joomla 3.2.x you can see a component which was come with default package such as com_ajax it contain ajax by default so you need not include your ajax files.

 

You can find how to include this function with your component, module and plugin by see this tutorial

Link: http://docs.joomla.org/Using_Joomla_Ajax_Interface

Git Hub: https://github.com/Joomla-Ajax-Interface

Demo Component: https://github.com/Joomla-Ajax-Interface/component

Demo Module: https://github.com/Joomla-Ajax-Interface/Hello-Ajax-World-Module

Demo Plugin : https://github.com/Joomla-Ajax-Interface/Ajax-Session-Plugin

 

You may get a little knowledge from the above demo extension.

 

Now I will explain in detail

Now I will explain how to use the ajax funtion in detail. First we will start with component

Component

In you custom component you need not include any jQuery Library because joomla inbuilt with jQuery ajax library you just need to create a jQuery script to pass variable asynchronous.

 

var url='index.php?option=com_yourcomponentname&format=raw&task=testFunction';
var data = 'value=1';
var request = new Request({
url: url,
method:'get',
data: data,
onSuccess: function(responseText){
some text...
}
else{
some text...
}
}).send();

Above code is usual method of passing ajax value here com_yourcomponentname is your component name and the magic will happen now

Now go to your component main controller contoller.php create the function testFunction



public function checkUservalue(){
$value=JRequest::getVar( 'value' );
if($value)
echo 'The value is : '.$value;
else
echo 'No value';
}

Module

This is same like component

 

Related Posts:

Leave a Reply

* Name:
* E-mail: (Not Published)
   Website: (Site url withhttp://)
* Comment:
Type Code