POJAX

Contents

[edit] Introduction

POJAX stands for PHP Objects, Javascript, and XML. This open source project allows PHP developers to easily implement and use AJAX in web development. This project was started and is maintained by Nathan Jacobsen. If you wish to help develop this idea, contact Nathan Jacobsen or Benjamin Chodroff for details.

The idea is simple: enable the creation of dynamic web pages in PHP that don't need to be reloaded, and don't force the programmer to learn javascript or expose his or her codebase to the client's browser.

[edit] 10 Minute Crash Course

Here's a simple example. Let's say you want to make a login form, and when the user is logged in, the login form area becomes some other form or information table. Here's what you'd do:

First, you create the form and the form elements: 

 
 <?php
   $myForm = new Form("frmLogin",Form::METHOD_POST,Form::ENC_DEFAULT,
       DisplayContainer::LAYOUT_GRID,DisplayContainer::UNITS_EMS);
   $myForm->addItem(new Label("lblUsername","Username: "),
      DisplayContainer::PLACE_ABSOLUTE,
      array(0,0));
   $myForm->addItem(new Label("lblPassword","Password: "),
      DisplayContainer::PLACE_ABSOLUTE,
      array(0,3));
   $myForm->addItem(new TextBox("txtUsername"),
      DisplayContainer::PLACE_ABSOLUTE,
      array(15,0));
   $myForm->addItem(new TextBox("txtPassword"),
      DisplayContainer::PLACE_ABSOLUTE,
      array(15,3));
   $myForm->addItem(new SubmitButton("btnSubmit","Login"),
      DisplayContainer::PLACE_ABSOLUTE,
      array(0,6));
 ?>

Then, you add an event handler: 

 
 <?
   // We pretend we have an instance of a class called $curUserInfo with the method LoginUser
   $myForm->getItem("btnSubmit")->addEventHandler('evtOnClick',FormControl::EVT_ONCLICK,
      new EventHandler('evtLoginOnClick',EventHandler::EH_CLASS,$curUserInfo,'LoginUser'));
 ?>

Now, when the user clicks on the login button, the server will call $curUserInfo->LoginUser(), passing a reference to the root container (the div or form element that contains all the other dynamic elements. Finally, we create this as a root container on a page: 

 
 <?
    $pojaxRegion = new CSOContainer($myForm);
 ?>

Then, the web designer simply needs to include this in his or her page: 

 
 <? require_once("myformdef.php"); ?>
 ...
 <head><? $pojaxRegion->generateHeadScript(); ?>
 ...
 </head>
 <body>
 ...
 <? $pojaxRegion->display(); ?>
 ...
 </body>
 ...

If you look at the source code at the project's home page, you'll get a better idea of how these components work together.

What happens when the user clicks on the Login button?

  • The javascript functions on the client's page check for any changed information since the last time an event was called, and send updates to the server using AJAX (for example, telling the server that the txtUsername is now 'abc123').
  • The server parses the XML recieved, and updates the server-side objects that correspond to the client-side objects. So, now the $myForm->getItem('txtUsername')->getValue() call will return 'abc123' instead of an empty string.
  • The server calls the event handler function, and passes the function a reference to the root container. Now, the event handler function can access and change the root container's children, which in our case include all elements on the form.
  • After the event handler is done, the root container checks to see what, if anything, has changed. It creates an XML file to return to the server with the changes in it (in our case, we may want to replace the login form completely with something else. That "something else" is described using XML and sent back to the client).
  • The client parses the returned information and uses DHTML to update information on the page.

How does the client know which elements on the page correspond to which server-side objects? The base class, ClientSideObject, from which all classes are derived, implements an identification method, so that each object (each TextBox, Form, CSOContainer, etc.) is assigned a unique integer. This integer allows for two things:

  • First, we can ensure that there is a one-to-one correspondence between client-side and server-side objects, and that we don't run into problems with non-unique naming.
  • Second, since the integer IDs of the objects are randomly-generated and on the HTML of the page instead of class or instance names, your code base is not exposed, providing added security.

[edit] Documentation

Lots and lots of documention will go here.

[edit] Classes

[edit] ClientSideObject

This is the base class from which all POJAX classes that create displayable are derived. The primary purpose of this object is to assign a unique identifier to each control (within a session) that will be displayed on the client side, or any class or function that is referenced as an event handler for a displayable control.

[edit] Developments

Source code can be checked out of the SVN at http://opensource.case.edu/svn/pojax

[edit] Discussion

Discussion will happen in a different wiki thread...soon.

Retrieved from "http://wiki.case.edu/POJAX"
This page has been accessed 1,828 times.
This page was last modified 09:29, October 28, 2005 by Nathaniel Jacobsen.
About | Disclaimers