class HypAjaxObject{
private static $instance;
private static $version;
private $_version;
private $_div_id;
private $_div_class = 'hyp-ajax-object';
private $_file_urls = array();

private function __construct($div_id,$here){
$this->_div_id = $div_id;
$this->_version = self::$version;
if($here) $this->drop_target();
public static function create($div_id,$here = false){
self::$version = 1;
self::$instance = new HypAjaxObject($div_id,$here);
self::$version += 1;
self::$instance = new HypAjaxObject($div_id,$here);
return self::$instance;

//Public Functions
public function get_file($url){
echo "javascript:hypAjaxLoad('$this->_div_id','$url');";
public function get_urls(){
return $this->_file_urls;
public function get_version(){
return $this->_version;
public function get_data(){
$form_name = $_POST['hyp_ajax_data'];
return $_SESSION['hyp_ajax'][$form_name];
public function close_link(){
echo "javascript:document.getElementById('$this->_div_id').innerHTML = '';";
public function drop_target(){
<div id="<?php echo $this->_div_id ?>" class="<?php echo $this->_div_class ?>"></div>

//Private Class Functions
private function check_post_data(){
$form_name = $_POST['hyp_ajax_data'];
if($_POST == $_SESSION['hyp_ajax'][$form_name]['post']) return;
$_SESSION['hyp_ajax'][$form_name]['post'] = $_POST;
$_SESSION['hyp_ajax'][$form_name]['get'] = $_GET;
<script type="text/javascript">hypAjaxLoad('<?php echo $this->_div_id ?>','<?php echo $_POST['hyp_ajax_url'] ?>');</script>
private function check_form_reset(){
$div_id = $this->_div_id;
$form_name = $_POST['hyp_ajax_data'];
private function print_javascript(){
<script type="text/javascript">
var currentUrl;

function hypAjaxLoad(target,url){
if(currentUrl == url){
document.getElementById(target).innerHTML = '';
currentUrl = '';
else currentUrl = url;

if(window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//For Ie5+Ie6

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) document.getElementById(target).innerHTML = xmlhttp.responseText;

Built using a Polyton Design Pattern
By Adam J Nowak ~ http://hyperspatial.com

An Ajax loader for PHP programmers. This class allows you to harness the power of Javascript's XMLHttpRequest capability, without having to write a single line of Javascript code.

Public Methods:

Constructor method. Second argument of true creates the div which will contain the loaded file immediately on instantiation. Pass true only if you want your trigger above the loaded ajax content
Ex1: $ajax_object = HypAjaxObject::create('main-ajax-target',true);

Instance version number,
Ex2: $ajax_object->get_version();

Location of the file to load dynamically. Place this call within a link href or a javascript onlclick attribute. Loading php files with this methos is especially powerful.
Ex3: <a href="<?php $ajax_object->get_file('myfile.php') ?>">Load Content</a>
Ex4: <span onclick="<?php $ajax_object->get_file('myfile.php');">Load Content</span>

Returns an array of the current urls of the files to be loaded with ajax for the object.

Returns an array of the data posted by the form for the object

Call this within an a href or an onclick attribute in order to create a "Close Ajax Div" button.

Drop target creates the div which will contain the loaded file. The target will automatically have the css id and class based on the constructor, create(); If you want your trigger above the loaded ajax content you must drop a target below the trigger within the html code. If you want your trigger below the loaded content then just pass true for the second argument in the constructor as in Ex1.
Ex5: $ajax_object->drop_target();

What to Do?

Upload the file
1 - Upload a file to your server which will be loaded into your target div. I recommend just using a php file to get started. Just keep in mind that php runs on the server so ajax is loading the output of the file not the script as would be the case with an include(); function.
2 - If you are going to use html forms in your loaded content make sure to call session_start(); at the top of the php script you are loading. This class stores all post data in a session to improve dynamic form submittal.

Create Instance
1 - Use static method to instantiate
2 - Constructor is private. *Don't Use: $var = new HypAjaxObject();

Create a Trigger
1 - Use a link href or a javascript onclick attribute and call the get_file('myfile.php'); method within the quotes.

Drop a Target
1 - If you pass true as the second argument your target has already been dropped. See Ex1
2 - Set the location of the div to load the ajax content by calling the drop_target(); method.


HypAjaxObject markup example - Target Window above the Trigger:

<?php $ajax_object = HypAjaxObject::create('main-ajax-target',true); ?>
<a href="<?php $ajax_object->get_file('myfile.php') ?>">Load content with link</a>

HypAjaxObject markup example - Target Window below the Trigger:
Use this method assures you can move the target div anywhere you want in the html and not worry about the class not having been loaded yet.

<?php $ajax_object2 = HypAjaxObject::create('main-ajax-target2'); ?>
<p onclick="<?php $ajax_object2->get_file('myfile.php');?>">Load content onclick</p>
<?php $ajax_object2->drop_target();?>


This is a self submitting form example to be put in a dynamically loaded php file:

<?php session_start();?>

<form name="test_form" action="?testget=yes" method="post">
<label>Test Field</label><br />
<input class="input" name="test_input" size="60" type="text" />

<!-- Hyp Ajax Fields -->
<input name="hyp_ajax_data" type="hidden" value="test_form" /><!-- Use this field to store the form post and get data in a session -->
<input name="hyp_ajax_url" type="hidden" value="<?php echo $_SERVER['REQUEST_URI']?>" /><!-- Use this to make the form self submitting -->

<input class="submit_btn" name="submit" type="submit" value="Submit" />
<input name="reset" type="submit" value="Reset" />

<p>Here is the content of the field: <strong><?php echo $_SESSION['hyp_ajax']['test_form']['post']['test_input']; ?></strong></p>


You must be logged in to post a comment.