Create applications with AJAX

[datahell]

AJAX is a combination of javascript and PHP scripts. The AJAX technology characteristic is that makes our scripts looks like they are alive! Several tasks can be performed without the need to refresh the page. How this is done?

Well, as we know PHP is a server-side programming language. Once a php script is executed we see in our screen the output of the script. We can not modify what we see without the need to refresh the page. At the other hand Javascript is a client-side programming language. This meens that it runs in your browser not in server. Using javascript we can change the appearence of a text element and perform various tasks without the need to refresh the page. But how can we execute php scripts, query a database, write to files etc? This is where AJAX comes. Ajax uses javascript to awake PHP scripts to run in the background and output the results in the foreground using javascript again.

There are many ready AJAX classes to download and use but there is one that comes with Elxis and we think it is very simple in use and powerful. This is the Ajax Sack.


First we need to include this class in our AJAX powered web page. Class is located at
/administrator/includes/js/ajax_new.js

Let's say our page is located at the Elxis backend, we include the ajax js class:
<script type="text/javascript" src="includes/js/ajax_new.js"></script>

We include a separate javascript file where we have our special javascript functions (we could also write the functions in the same page but it is better to keep them in seperate js files):
<script type="text/javascript" src="path_to_our_js_folder/myajax.js"></script>

Now we need to create a div element where the output will be displayed after processing the ajax task.
<div id="ajaxMsg" style="display: hidden;"></div>

As you see we set this div element not to be displayed (hidden). It will be visible when it will be awaked from javascript.

We will now create an AJAX powered link, which when clicked, will initialize an AJAX task.
<a href="javascript: void(0);" onclick="javascript: myfunction();">My task</a>

When this link is clicked the javascript function myfunction() is initialize. We will add this function to our myajax.js file. We open myajax.js file to edit it (it is empty till now):

At the beginning of this file we must initialize a new AJAX Sack instant.
var myajax = new sack();

Then we must tell Sack what to display when the task is processed. This is displayed inside the div element we previously build.

function whenLoadingMy(){
   var e = document.getElementById(myajax.element);
   e.innerHTML = "Sending Data...";
}

function whenLoadedMy(){
   var e = document.getElementById(myajax.element);
   e.innerHTML = "Data Sent...";
}

function whenInteractiveMy(){
   var e = document.getElementById(myajax.element);
   e.innerHTML = "Getting data...";
}

You can modify the output, add a loading indication image etc.

We will now build our main javascript function (myfunction):
At first we make our ajax div element visible. In our occasion this is ajaxMsg.

function myfunction(){
var e = document.getElementById('ajaxMsg');
We make this div visible
e.style.display = "";

We can set any variable we wish to pass in the php script. Here are some examples:

myajax.setVar("option", 'com_xxxx');
myajax.setVar("task", 'xxxxxx');

We can also set a variable by reading a form element inside the page or by it's id and many other things
Example:

var myname = document.adminForm.name.value;
myajax.setVar("myname", myname);

Note: We could also pass variables as inputs in this function.

Now we must tell ajax which PHP file to call. We will call index3.php located at Elxis backend.
myajax.requestFile = "index3.php";

We can pass this request via POST or GET method.
myajax.method = 'POST';

We tell AJAX Sack which is the div element in which the results will be displayed.
myajax.element = 'ajaxMsg';

We tell AJAX sack what to do when the task is loading, loaded and interactive. In our occasion we just add the functions names we previously created.

myajax.onLoading = whenLoadingMy;
myajax.onLoaded = whenLoadedMy;
myajax.onInteractive = whenInteractiveMy;

Finally we execute ajax and close the function.
myajax.runAJAX();

}

That's it!

Off course we must also create the php script that will execute our AJAX task. In the example above we called a components task.