InlineXHR(php)

You know that YUI 3 is one of the best frameworks for JavaScript applications but you need a PHP backend for your AJAX transactions. Here is one lightweight and powerful, written for YUI 3, and that is designed to let you focus on your application by taking care of the XHR details for you.

 

InlineXHR(php) is open source and free. It is one PHP file and one YUI 3 module that work together to straighten out  the AJAX pattern for you, and all you have to worry about is:

In JavaScript

 

  • register into one group the PHP function(s) you want to execute

      var funcsGroup;

     funcsGroup = xhr.register(funcsGroup, 'myPhpFunction', someArgs);

  • and send the request

      funcsGroup.request()

In PHP

 

  • Start the engine

    $ajaxProcessor = new ajaxProcessor();
    $ajaxProcessor->process();

  • Pass the response object to your function

    function myPhpFunction($params, &$response){

       //do your work, then direct data to a JavaScript handler

       $response->callMethod('myJavaScriptFunction', $args);

       //send the response

       $response->reply()

   }

That's it! Forget about success and  failure callbacks, and about messing around  with the cursor's css during the transaction progress, this is done for you.

From JavaScript you can target a specific PHP function, class or Smarty plugin. Let the server step in in any phase of your JavaScript application, at no effort whatsoever.

On the opposite side: even If you have a full blown JavaScript widget, invoke the widget methods directly from your server logic!

InlineXHR(php) does not force a new javascript framework on you but leverages the power of one of the best out there.

Download

You can download both of the PHP and YUI module InlineXHR from SourceForge .

Usage instructions

The setup comprises a PHP part and a Javascript part. We'll see them from top to bottom on the same file.

Click to this page for a working example using a function library.

Click to this page for a working example using a Smarty plugin.

The PHP part

 


<?php

//include/require the PHP file for inlineXHR (php) that  
//you have saved inside 'path/to/your/classes/', 
//that is on your website's include path
require 'path/to/your/classes/inlineXHR.php';

//start processing requests
$ajaxProcessor = new ajaxProcessor(false, true);//$className, $debug
$ajaxProcessor->configure('method','POST');//POST is the default, GET is available
$ajaxProcessor->process();//you're done


//now you can write your ajax enabled YUI/PHP application and 
//you're able to interact with the javascript functions 
//used in the HTML part.

//just pass to your functions a &$response object as the last param 
//and you can pass around the $response as you wish. When you're finished 
//adding data and JS function names to be called, send the response

	function myPhpFunction($params,&$response){

		//do whatever


		//add something to the response 
		$myArray = array(first=>"One", second=>"two"); 
		$params = array_merge($myArray,$params);


		//decide which JavaScript functions will be executed and passed the response data to
		$response->callMethod('showResult', $params);

		$response->callMethod('alertResult', $params);

		$response->respond();
	}

//write the html code
?>
<html>
<head>
    ...
    
	<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js">
    ...
</head>
<body>

   ...



The JavaScript Part

Inside the html page create your YUI 3 JavaScript application.

It starts by including the YUI 3 seed file, it will load all the required components.

 




    ...






    ...
    



Before the closing body tag of your page flesh out your YUI 3 application.



YUI({
		filter: 'min',
		combine: false,
		modules : {					
			'inlinexhr' : {
			requires: ['io-base', 'io-form', 'json-parse','base', 'node'],
			fullpath : '/path/to/inlinexhr.js'
		}										
	}					
}).use('inlinexhr', function(Y){

//do lots of cool JS stuff


//when  you need the server to do something for you, 
//you can call it by doing:

// instantiate the inlineXHR
var xhr = new Y.Base.InlineXhr();//default is POST, GET also available

//xhr.setConfig({mode: 'alert', method: 'GET'});//configure if needed (alert is kind of 'debug' setting), 

//define some params to pass to the PHP function
var someArgs ="username=myname&password=secret&appID=2";

// define which PHP function(s) you need to call, group them into groups
//in this case we also pass values from a form present on the page. 
//id is "form1"

var funcsGroup;

funcsGroup = xhr.register(funcsGroup,'myPhpFunction',someArgs,'#form1');

/*
you could add more function calls to "funcsGroup" like this:

funcsGroup = xhr.register(funcsGroup,'mySecondPhpFunction',someArgs,'#form1');

*/

// Now, let's say you have a couple of JS funcs ready to receive and 
// process the data from the server. One, as an example, made to show a result window:

Y.showResult = function (result) {

					var r = Y.Node.create("
" + result + "
"); var resultWindow = Y.one("#result"); if(resultWindow.getStyle("backgroundColor") !== "ivory"){ resultWindow.setStyle("width","300px"); resultWindow.setStyle("height","200px"); resultWindow.setStyle("overflowX","hidden"); resultWindow.setStyle("overflowY","auto"); resultWindow.setStyle("border","2px solid silver"); resultWindow.setStyle("padding","7px"); resultWindow.setStyle("backgroundColor","ivory"); } resultWindow.append(r); }; //and one to "alert" the same result Y.alertResult = function(r){ alert(r); } //Let's place a button on the page to activate the process //The object returned by the inlinexhr::register method (the funcsGroup from above) //has a "request" method. Register the request as the handle for the click event on //the button. NB! Pass the functionGroup object to the event handler as the //context (4th arg) Y.on("click", funcsGroup.request, "#requestButton", funcsGroup); //click on the botton and see the result. });

Issues and discussion

For any issues and comments you have about the inlineXHR you're welcome to write on the forum dedicated to it.

Download

Download both of the PHP  and YUI 3 inlineXHR modules from SourceForge

or find it on the YUI Gallery

 

License

Copyright Eaktion.com 2011, BSD License