XAJAX

Xajax: It is a class made with PHP that allows us to use Ajax, combined with PHP, to create interactive applications, in a very simplified way.

Summary

[ hide ]

1 Introduction
- 1 Download and install Xajax
2 Simple page with xajax and PHP
3 Sources

Introduction

With xajax we can easily execute PHP functions, which are executed on the server, when the user performs actions on the page. The results of those PHP functions are then produced on the same page, without reloading. Xajax is a free Open Source product and compatible with the most common browsers, such as Firefox , or other browsers based on Mozilla , Internet Explorer , Opera , etc.

Download and install Xajax

To test xajax we must download the latest version of the class, which we can download directly from its web page: xajaxproject. We will obtain a compressed file that we must decompress anywhere in our publication space. For example, we can create a directory called xajax where we can place all the downloaded .zip files.

There are no special actions to install xajax, just unzip it on any Apache or IIS server that has compatibility with PHP 4.3.x or PHP 5.x, or higher.

Once downloaded, we can test the examples that come in the examples directory, always through our PHP compatible web server, either locally or on a remote web server.

Attention to the directory where we finally put the xajax files, because then we will have to include files that are in said directory, for which we must remember the relative path from the page where we are to the directory where xajax is

Simple page with xajax and PHP

Let’s now see how to make a page that uses xajax, to execute a simple PHP function in response to a user action. The example is relatively simple, we can even do it in a few steps, like a recipe. Then everything necessary to perform more complex actions can be complicated.

Include with PHP the file where the xajax class is

// we include the ajax class
require (‘xajax / xajax.inc.php’);

We create an instance of an object of class xajax

// we instantiate the object of class xajax
$ xajax = new xajax ();

We write a function in PHP, which we will then call with via ajax

This function is as complicated as it takes. It will perform actions on the server side and therefore it can access databases, open files or whatever comes to mind. Then in the function itself we will make an instance of an AjaxResponse object, which we will use to display results on the page.

function yes_no ($ input) {

if ($ input == “true”) {

$ output = “Marked”;

} else {

$ exit = “Not marked”;

}

// we instantiate the object to generate the response with ajax

$ response = new xajaxResponse ();

// we write in the layer with id = “answer” the text that appears in $ output

$ response-> addAssign (“response”, “innerHTML”, $ output);

// we have to return the instantiation of the xajaxResponse object

return $ answer;

}

The xajaxResponse () object is used to perform actions on the page without having to reload the document. It has several methods or functions, such as addAssign () which is used to assign a value to a property of an element on the page. In this case, the value contained in the $ output variable is assigned to the innerHTML of the “response” layer, thereby altering the text contained in that layer.

We associate the PHP function to the xajax object

// we associate the previously created function to the xajax object
$ xajax-> registerFunction (“yes_no”);

This association will allow to execute the PHP function from a call to a Javascript function.

Before sending any content to the page, we have to execute a method of the xajax object to process the requests that can reach the page.

// The xajax object has to process any request
$ xajax-> processRequests ();

We insist, this method call must be done before writing any content within the page code, that is, before any HTML code character reaches the client.

Write the javascript code necessary to process ajax calls.

// In the <head> we indicate to the xajax object to be in charge of generating the necessary javascript.
$ xajax-> printJavascript (“xajax /”);
Ideally, make this call to the printJavascript () method within the <head> of the page.
If we look closely, the method receives a parameter, which is the relative path to access the directory where the unzipped xajax files are.

We can make calls to PHP functions anywhere in the code, in response to user actions with javascript.

As we can see, from an element of the page, as in this case a checkbox, when its state changes, a javascript function is called to execute the PHP function written previously. In other words, when the checkbox is pressed, the onchange event is triggered and with it the xajax_si_no () function is called, sending the status (checked or not) of the checkbox as a parameter.
We can see the code for the complete example below, but keep in mind that for it to work you must have the code of the xajax class, which in this case must be in a subdirectory that hangs from the directory where the example file is.
<? // we include the ajax class require (‘xajax / xajax.inc.php’);

// we instantiate the object of class xajax $ xajax = new xajax ();

function yes_no ($ input) {

if ($ input == “true”) {

$ output = “Marked”;

} else {

$ exit = “Not marked”;

}

// we instantiate the object to generate the response with ajax

$ response = new xajaxResponse ();

// we write in the layer with id = “answer” the text that appears in $ output

$ response-> addAssign (“response”, “innerHTML”, $ output);

// we have to return the instantiation of the xajaxResponse object

return $ answer;

}

// we associate the previously created function to the xajax object $ xajax-> registerFunction (“yes_no”);

// The xajax object has to process any request $ xajax-> processRequests (); ?>

// In the <head> we tell the xajax object to be in charge of generating the necessary javascript

$ xajax-> printJavascript (“xajax /”);

</head>

<body>

xajax_si_no (document.form.si.checked);

// Initially calling the function xajax_si_no we initialize the value of the layer with the response

</script>

</body> </html>

by Abdullah Sam

Leave a Comment Cancel reply