Wednesday, December 22, 2010

Learn About XAJAX

About XJAX:
  • XAJAX is an open source PHP class library implementation of AJAX that allows developers to create web-based Ajax applications using HTML, CSS, JavaScript, and PHP. 
  • Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page. 
  • Unlike some other Ajax frameworks, Xajax is designed to allow the programmer to have no prior knowledge of JavaScript.
  • The xajax PHP object generates JavaScript wrapper functions for the PHP functions you want to be able to call asynchronously from our application. 
  • When called, these wrapper functions use JavaScript’s XMLHttpRequest object to asynchronously communicate with the xajax object on the server which calls the corresponding PHP functions. 
  • Upon completion, an xajax XML response is returned from the PHP functions, which xajax passes back to the application. 
  • The XML response contains instructions and data that are parsed by xajax’s JavaScript message pump and used to update the content of our application.
System Requirements:
  • Server-side xajax runs on any PHP 4.3.x and PHP 5.x Apache or IIS server.
  • Client-side xajax runs on (but is not limited to) Internet Explorer 6+, Firefox, Opera 8.0+, Safari 3.0.
Limitations of xajax:
  • Currently, xajax has no way to transfer data from client to server other than using XML. 
  • There are plans to change xajax to allow programmers to use JSON or any other means of communication.
  • Workaround is to use serialize function of PHP and unserialize function from php.js namespaced Javascript PHP port.
  • It is possible to send JSON using:
               <?php  $response->script('example ='.json_encode($example)); ?>
Using XAJAX in a PHP Script:
xajax is designed to be extremely easy to implement in both existing web applications as well as new projects. We can add the power of xajax to nearly any PHP script in seven easy steps: 

Step 1: Include the xajax class library, We always have to include this xajax class library.
Step 2: Instantiate the xajax object. This objects handles all xajax processing.
             $xajax = new xajax();
Step 3: Register the names of the PHP functions, that we want to be able to call through xajax objects.
 Step 4: Write the PHP functions we have already registered, and use the xajaxResponse object to return XML commands from them
function makeBold($p_sArg)
    // Just apply bold font for $p_SArg value and
    // put it into a variable like $sOut
    $sOut = '<b>'.$p_sArg.'</b>';
    // Instantiate the xajaxResponse object
    $objResponse = new xajaxResponse();
    // add a command to the response to assign the innerHTML attribute of
    // the element with id="my_element" to whatever the new content is
    $objResponse->addAssign("my_element","innerHTML", $sOut);
    //return the  xajaxResponse object
    return $objResponse->getXML();
  • The above function takes a string argument $p_sArg and returns it within a html <b> tag. 
  • First we instantiate an xajaxResponse object which will handle the response to the client. 
  • Secondly, we assign a HTML element to update to the xajaxResponse object. 
  • The xajaxResponse->addAssign() method takes three arguments:
                         1.  The name of an HTML element in our page
                         2.  The property of the element we want to change client-side
                         3.  The stuff we want to send to the client
  • Finally, we return the response by using the xajaxResponse->getXML() method.
  • These actions ALWAYS occur in our server-side Ajax functions. 
  • But there's a bit more to tell about the xajaxResponse class. 
  • Besides the xajaxResponse->addAssign() method there are some more. 
I have listed the some more functions below:
  • addAssign($sTargetId, $sAttribute, $sData)
    Assigns the $sAttribute of the element identified by $sTargetId to $sData. With this we can replace the data of a specific element with new server-generated data. 

$objResponse->addAssign("contentDiv","innerHTML", "Some Text");
  • addAppend($sTargetId, $sAttribute, $sData)
    Appends $sData to the $sAttribute of the element identified by $sTargetId. This means the original content inside the attribute is preserved but new content is appended right after it. 

$objResponse->addAppend("contentDiv","innerHTML", "Some Text");
  • addPrepend($sTargetId, $sAttribute, $sData)
    Prepends $sData to the $sAttribute of the element identified by $sTargetId. This means the original content inside the attribute is preserved but new content is added right before it. 

$objResponse->addPrepend("contentDiv","innerHTML", "Some Text");
  • addReplace($sTargetId, $sAttribute, $sSearch, $sData)
    Replaces all instances of $sSearch with $sData in the $sAttribute of the element identified by $sTargetId.

$objResponse->addReplace("contentDiv","innerHTML", "text","<strong>text</strong>");
  • addClear($sTargetId, $sAttribute)
     Clears the $sAttribute of the element identified by $sTargetId.

  • addCreate($sParentId, $sTagname, $sId, $sType)
    Adds a new $sTagName child element to an existing element identified by $sParentId, and assigns it the id $sId and the optional type $sType. 

$objResponse->addCreate("form1","input", "pass", "password");
  • addRemove($sElementId)
     Removes the element identified by $sElementId from our application.

  • addAlert($sMsg)
     Display a javascript alert box with $sMsg.

$objResponse->addAlert("The server said: Hi!");
  • addScript($sJS)
    Execute the JavaScript code $sJS. With this powerful method we can actually send javascript back to the client which is instantly executed.

$objResponse->addAlert("var txt = prompt('get some text');");
Step 5: Before our script sends any output, have xajax handle any requests. we can process the requests with this method
Step 6: Between our <head> section tags, tell xajax to generate the necessary JavaScript
 <?php $xajax->printJavascript(); ?>
Step 7: Call the function from a JavaScript event or function in our application.
Now we can finish off our page and use the functions we defined in the first steps directly from within the client-side part of our application. Considering our simple example we'd need to have some HTML element having the ID 'my_element':

<div id="my_element">Hai Xajax</div>

If we had add a link to the page calling our backend-function, the text inside the above element would be made bold instantly without the browser window refreshing. We can call the backend xajax functions like this:

<a href="#" onclick="xajax_makeBold(document.getElementById('my_element'));">Kick This</a>

That's it! We have now created our first Ajax powered link.  As you can see, backend functions can always be called from within client-side javascript by prepending xajax_ to the name we originally gave it. In our example we call xajax_makeBold(). We use document.getElementById('my_element') to target the element to update. We can specify any element and it's content will be enclosed by <b> and </b>.

XAJAX Features:
Xajax offers the following features that, together, make it unique and powerful: 

1.   Xajax's unique XML response / javascript message-pump system does the work for you, automatically handling the data returned from our functions and updating our content or state according to the instructions you return from our PHP functions. Because xajax does the work, you don't have to write javascript callback handler functions.
2.   Xajax is object oriented to maintain tighter relationships between the code and data, and to keep the xajax code separate from other code. Because it is object oriented, you can add our own custom functionality to xajax by extending the xajaxResponse class and using the addScript() method.
3.   Xajax works in Firefox, Mozilla, probably other Mozilla based browsers, Internet Explorer, and Safari.
4.  In addition to updating element values and innerHTML, xajax can be used to update styles, css classes, checkbox and radio button selection, or nearly any other element attribute.
5.  Xajax supports passing single and multidimensional arrays and associative arrays from javascript to PHP as parameters to our xajax functions. Additionally, if you pass a javascript object into an xajax function, the PHP function will receive an associative array representing the properties of the object.
6.  Xajax provides easy asynchronous Form processing. By using the xajax.getFormValues() javascript method, you can easily submit an array representing the values in a form as a parameter to a xajax asynchronous function:
It even works with complex input names like "checkbox [ ] [ ]" and "name[first]" to produce multidimensional and associative arrays, just as if you had submitted the form and used the PHP $_GET array
7.  Using xajax you can dynamically send additional javascript to our application to be run in response to a request as well as dynamically update element attributes.
8.  Xajax automatically compares the data returned from the PHP functions to the data that is already in the attribute of the element you have marked for change. The attribute is only updated with the new data if it will actually change what is already in the attribute. This eliminates the flicker often observed in applications that update content at a regular time interval with data which may or may not differ from extant content.
9.  Each function registered to be accessible through xajax can have a different request type.All functions default to use POST unless GET is explicitly set. This is to encourage careful consideration of when to use GET requests
10. If no request URI is specified, xajax tries to autodetect the URL of the script. The xajax autodetection algorithm is sophisticated enough that, on most servers, it will work under a secure https:// protocol as well as http:// and with nonstandard ports.
11. Xajax encodes all of its requests and responses in UTF-8 so that it can support a wider range of characters and languages. xajax has been successfully tested with various unicode characters including Spanish, Russian, Arabic, and Hebrew
12. Nearly all of the javascript generated by xajax is included into our web application through dynamic external javascript. When you view the source of our application in our browser, the markup will be not cluttered by JavaScript function definitions.
13. Xajax can be used with the Smarty templating system by creating a variable in smarty   that contains the xajax javascript:
$smarty->assign('xajax_javascript', $xajax->getJavascript());
Then you can use {$xajax_javascript} in our header template to use xajax on our site.

No comments:

Post a Comment