如何在PHP脚本里使用xajax?一共有7个步骤:
require_once("xajax.inc.php");
$xajax = new xajax();
$xajax->registerFunction("myFunction");
function myFunction($arg) { // do some stuff based on $arg like query data from a database and // put it into a variable like $newContent // Instantiate the xajaxResponse object $objResponse = new xajaxResponse(); // add a command to the response to assign the innerHTML attribute of the element with id="SomeElementId" to whatever the new content is $objResponse->addAssign("SomeElementId","innerHTML", $newContent); //return the XML response generated by the xajaxResponse object return $objResponse->getXML(); }
$xajax->processRequests();
<?php $xajax->printJavascript(); ?>
<div id="SomeElementId"></div> <button onclick="xajax_myFunction(SomeArgument);"> How do I update my content asynchronously?Perhaps the most unique feature of xajax is the xajaxResponse class. Other Ajax libraries require you to write your own callback handlers in JavaScript to process the data returned from an asynchronous request and to update the content. xajax, on the other hand, allows you to easily control your content from PHP. The xajaxResponse class allows you to create XML instructions to return to your application from your PHP functions. The XML is parsed by xajax message pump and the instructions tell xajax how to update the content and state of your application. The xajaxResponse class currently offers the following commands:
· $objResponse->addAssign("contentDiv","innerHTML","Some Text"); $objResponse->addAssign("checkBox1","checked","true");
$objResponse->addAppend("contentDiv","innerHTML","Some Text");
$objResponse->addPrepend("contentDiv","innerHTML","Some Text");
$objResponse->addReplace("contentDiv","innerHTML","text","<strong>text</strong>");
$objResponse->addClear("Input1","value");
$objResponse->addCreate("form1","input", "pass", "password");
$objResponse->addRemove("div1");
$objResponse->addAlert("This is some text");
$objResponse->addAlert("var txt = prompt(‘get some text‘);"); A single XML response may contain multiple commands, which will executed in the order they were added to the response. For example, let‘s say that a user clicks on a button in your application. The onclick event calls the javascript wrapper for a PHP function. That wrapper sends an asynchronous request to the server through XMLHttpRequest where xajax calls the PHP function. The PHP function does a database lookup, some data manipulation, or serialization. You use the xajaxResponse class to generate an xajax XML response containing multiple commands to send back to the xajax message pump to be executed:
$objResponse = new xajaxResponse(); $objResponse.addAssign("myInput1","value",$DataFromDatabase); $objResponse.addAssign("myInput1","style.color","red"); $objResponse.addAppend("myDiv1","innerHTML",$DataFromDatabase2); $objResponse.addPrepend("myDiv2","innerHTML",$DataFromDatabase3); $objResponse.addReplace("myDiv3","innerHTML","xajax","<strong>xajax</strong>"); $objResponse.addScript("var x = prompt(\"Enter Your Name\");"); return $objResponse->getXML(); The xajax message pump would parse the XML message and perform the following:
All of this is implemented on the server side in the PHP function by forming and returning an xajax XML response.
How do I process form data asynchronously?xajax makes processing form data asynchronously extremely easy. The xajax.getFormValues() method can be used to automatically extract the data from a form and pass it as a parameter to a PHP function you have registered with xajax.
xajax.getFormValues() takes one argument, which can be either the id of the form you want to process, or the actual form object. You use xajax.getFormValues as a parameter to your xajax function, like this:
xajax_processFormData(xajax.getFormValues(‘formId‘)); xajax generates a query string representing the form data which is parsed by the xajax server and passed to your PHP function as an array representing the form data, just as if you had submitted the form and used the PHP $_GET array.
xajax will even handle complex input names to generate multidimensional and associative arrays. For instance, if you have a form with three checkboxes and you give them all the name "checkbox[]", but different values like "check1", "check2", and "check3", and you use the xajax.getFormValues function as a parameter to your xajax function, the PHP function will receive and array that looks like this:
array ( ‘checkbox‘ => array ( 0 => ‘check1‘, 1 => ‘check2‘, 2 => ‘check3‘, ), ) The array argument to your function mirrors the structure that the $_GET array would have if you were to submit the form traditionally. You can then access the checkbox data in the array like this:
$aFormData[‘checkbox‘][0] How do I add custom functionality to xajax?xajax can be extended with all kinds of additional custom functionality. The extendability of xajax is made possible because it is object oriented, and by the addScript() method of the xajaxResponse class. You can create your own xajax response class that extends the xajaxResponse class and has all of the normal xajaxResponse methods, plus your own custom responses. For instance, let‘s say that you wanted to add a custom response command to add options to select combo boxes. You could extend the xajaxResponse class like this:
class myXajaxResponse extends xajaxResponse { function addAddOption($sSelectId, $sOptionText, $sOptionValue) { $sScript = "var objOption = new Option(‘".$sOptionText."‘,‘".$sOptionValue."‘);"; $sScript .= "document.getElementById(‘".$sSelectId."‘).options.add(objOption);"; $this->addScript($sScript); } } Now, instead of instantiating an xajaxResponse object, you instantiate and use your myXajaxResponse object in your xajax PHP functions:
$objResponse = new myXajaxResponse(); $objResponse->addAssign("div1", "innerHTML", "Some Text"); $objResponse->addAddOption("select1","New Option","13"); return $objResponse->getXML(); This method would send the necessary javascript to the page when it was called and execute it. Alternatively, you could create a javascript function in your application:
<script type="text/javascript"> function addOption(selectId,txt,val) { var objOption = new Option(txt,val); document.getElementById(selectId).options.add(objOption); } </script> and call it with the addScript() method:
$objResponse->addScript("addOption(‘select1‘,‘New Option‘,‘13‘);"); Trackback: http://tb./TrackBack.aspx?PostId=614822 |
|