Basic AJAX starter pack using jQuery and PHP

If you'd like to add the "Web 2.0" feel to your website, one of the first things to do is make your site feel more like an application and less like a website. The traditional "blog" style websites have many page loads and a very "linear" user experience (meaning visitor go from one page to the next). An application or tool feels much more interactive and can be a more engaging user experience. To accomplish this, we'll add some simple AJAX functionality using the "starter pack" here.

Requirements:
- Webserver running PHP 5.3+
- jQuery v1.4.2+ (may work with older versions but not tested)

Step 1
Download the attached starter pack then unpack it and copy the files it to your website.

Step 2
Navigate to the website location where you uploaded the starter pack (http://yoursite.com/path/to/starter/pack/index.html).

Step 3
Go through the examples shown on the page. After you've seen the examples, you are ready to start customizing it to your needs. We'll go through the files in the starter pack and discuss how they are being used to deliver a simple AJAX experience. Starter Pack Files

+com
    +example
        +controllers
            -ExampleHandler.php
+com
    +totalapp
        +controllers
            -AjaxController.php
-ajax.js
-ajax.php
-index.html

Folder Structure and organization
The folder structure is organized in a java-like manner. The "com" folder will separate portions of the code into organized libraries. In this starter pack you will see a com/totalapp folder. This folder is a library of code that is used to drive the AJAX portion of the starter pack. The idea behind keeping good folder structure is that it makes it easy to reuse your code in multiple projects. When using the starter pack, you should not need to modify anything inside the com/totalapp folder. You should be working with and customizing the com/example folder (although you will eventually want to rename com/example to something else that is more applicable to your project).

Learning about PHP's autoload function using namespaces
PHP 5.3 offers the ability to use namespaces for your code. This topic is very technical in nature, so I won't go into much detail about what namespaces are. Another great feature addition is the __autoload() function. The __autoload() function is called when a class or interface you are trying to use hasn't been defined yet. The combination of the __autoload() function and the namespace file organization help to develop cleaner and more organized code.Normally when you create classes, you will have one per PHP file. Then to use that class, you first must include() the file before you can use the class. The __autoload() function takes care of the file include() code for you. Here is the __autoload() function from the ajax.php file (included in the starter pack):

ajax.php

// Setup auto load for namespace
function __autoload($class)
{
$file = realpath(dirname(__FILE__)."/".$class.".php");
if(!file_exists($file)) throw new Exception("Class file not found: ".$class." (".$file.")");
require_once $file;
}

The $class argument passed to the __autoload() function is the full name of the class with the namespace. The above code takes the class name and namespace and translates it into a file path to include. In the starter pack, the examples use the com/example/controllers/ExampleHandler.php file to do all the server side processing. The ExampleHandler.php file is in the com\example\controllers namespace. ExampleHandler.php
namespace com\example\controllers;
Notice that the namespace is the same as the folder path to the file. This is what allows the __autoload() function to work. Here we can show the difference in code from the old (non __autoload()) method to the new method.

Old way:

<?php
require_once "com/example/controllers/ExampleHandler.php"; // Include file
ExampleHandler::ex1($info); // Call a static method of the class
?>

New way:

<?php
\com\example\controllers\ExampleHandler::ex1($info); // Include class file and call a static method at the same time
?>

As seen here, the __autoload() function combined with proper folder organization and namespaces cuts down on code and also allows you to load and use classes on the fly. Using the starter pack code files to fit your needs
We'll go through the files in the starter pack one by one and describe what each does and how it can be used to help you create a simple AJAX system. com/example/controllers/ExampleHandler.php

<?php
namespace com\example\controllers;
use \com\totalapp\controllers\AjaxController as ajax;
 
// This class will controll the example events
class ExampleHandler
{
	public function __construct($request)
	{
		// Do request operation
		extract($request);
		if(!empty($fnc)) self::$fnc();
	}
 
	// Example 1
	public static function ex1()
	{
		// Use alert to show value sent
		ajax::alert("You sent: \"" . $_REQUEST['value'] . "\"");
		ajax::respond();
	}
 
	// Example 2
	public static function ex2()
	{
		// Use alert to show value sent
		ajax::alert("You sent: \"" . $_REQUEST['value'] . "\"");
		ajax::respond();
	}
 
	// Example 3
	public static function ex3()
	{
		// Respond with a string with a current timestamp
		ajax::respond($_REQUEST['value'] . " @ " . date("F j, Y, g:i a"));
	}
 
	// Example 4
	public static function ex4()
	{
		// Use alert to show form data
		ajax::alert("form data sent to server:\n\n" . print_r($_REQUEST['form'], true));
		ajax::respond();
	}
 
	// Example 5
	public static function ex5()
	{
		// Use alert to show restructured form data
		$data = ajax::getKVarray($_REQUEST['form']);
		ajax::alert("restructured form data:\n\n" . print_r($data, true));
		ajax::respond();
	}
 
	// Example 6
	public static function ex6()
	{
		// Change html value (use json_encode to make sure the new value is in good form
		$newVal = json_encode("Changed from server @ " . date("F j, Y, g:i:s a"));
		ajax::respond("$('#ex6text').html(" . $newVal . ");");
	}
 
	// Example 7
	public static function ex7()
	{
		// Run javascript
		ajax::respond("$('#ex7').animate(
		{
			width: '70%',
			opacity: 0.4,
			marginLeft: '0.6in',
			fontSize: '3em',
			borderWidth: '10px'
		}, 1500, function() { $('body').attr('scrollTop', '100000000'); });
 
		$('#ex7go').val('Server response finished...');");
	}
 
}
?>

This file is used to handle and process all of the data from javascript of the example index.html page. Line 2 defines the namespace for the file. As mentioned in the information above, we keep the namespace the same as the folder structure to make it easier to reference the class.
namespace com\example\controllers;
Line 3 defines an alias to another namespaced class (the alias topic will not be covered in depth here). Basically the alias is a quicker/easier way to refer to the full location of a namespaced class. Here we use it to refer to "\com\totalapp\controllers\AjaxController" simply as "ajax". Then we can use "ajax" to call methods from the \com\totalapp\controllers\AjaxController class.
use \com\totalapp\controllers\AjaxController as ajax;
The rest of the class file defines methods used in all the examples. Each example has a separate static method inside the EventHandler.php class that are defined here. This class is where all the business logic and server side code goes before creating the response. com/totalapp/controllers/AjaxController.php

<?php
namespace com\totalapp\controllers;
 
// Provides general ajax functionality
class AjaxController
{
public static $response = "";
 
// Add response
public static function response($r)
{
self::$response .= $r;
}
 
// Output response
public static function respond($r=NULL)
{
if(!empty($r)) self::response($r);
header("Content-type: application/javascript");
die(self::$response);
}
 
// Get alert for js msg
public static function alert($msg) { self::jsAlert($msg); }
public static function jsAlert($msg)
{
//header("Content-type: application/javascript");
self::$response .= "alert(".json_encode($msg).");";
}
 
// Force a server error with msg
public static function error($msg)
{
header('HTTP/1.1 500 Internal Server Error');
die($msg);
}
 
// Get key/value array from a jquery serializeArray() result
public static function getKVarray($jqArray)
{
foreach($jqArray as $pair)
{
$t = "\$".$pair['name']." = \"".$pair['value']."\";\n";
eval($t);
}
unset($jqArray, $pair, $t);
return get_defined_vars();
}
}
 
?>

This file creates all the actions need to make the proper responses. You should not need to modify this file. Here’s a basic run-down of the methods defined here:MethodParametersReturnDescriptionExampleresponse$r - stringvoidAdd text to the response.ajax::response(“var status = ‘received’;
alert(‘hello world’););respond$r – string [optional]voidFinish creating the response and send to client after adding passed in text.ajax::responsd(“var status = ‘done’;”);alert$msg – stringvoidCreates and alert from the text passed in.ajax::alert(“hello world”);error$msg – stringvoidTriggers an error in the jQuery ajax request with the text passed in.ajax::error(“there was an error processing your request”);getKVarray$jqArray – Array (jQuery serializeArray())ArrayTakes a jQuery array from serializeArray() and convert it to a “key => value” style array.$newArray = ajax::getKVarray($_REQUEST[‘formData’]); The methods here are used to build and create a response to send back to the client. In order to finish the response and send to the browser, you must end with the respond() or error() command as shown in this example (from ExampleHandler.php):

// Example 1
public static function ex1()
{
// Use alert to show value sent
ajax::alert("You sent: \"".$_REQUEST['value']."\"");
ajax::respond();
}

Without the respond() command in line 20, no response will be sent to the client. ajax.js

// Function used to make an AJAX call
var ajaxServerFile = './ajax.php';
function ajaxCall(info)
{
var success = (typeof(info.success) == 'function') ? info.success : function() { };
var async = (typeof(info.async) == 'undefined') ? true : info.async;
delete info.success;
delete info.async;
$.ajax(
{
'async': async,
'url': ajaxServerFile,
'type': 'POST',
'data': info,
'error': function(xhr, textStatus, errorThrown) { alert(xhr.responseText); },
'success': function(data)
{
if(typeof(success) == 'function') success(data);
}
});
}

This file creates a wrapper function around jQuery’s ajax method. The ajaxCall() is the function used to initiate ajax communication with the server. Here is an example of it’s usage (from index.html):

// Example 2
$('#ex2go').click(function(e)
{
ajaxCall(
{
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex2',
'value': $('#ex2send').val(),
'success': function(data) { alert('ajax successful!'); }
});
});

Function options for ajaxCall():OptionParametersDefaultRequiredDescriptionExampleasyncbooleantrueNoMake the call using asynchronous mode. If false, the call will be run in non-asynchronous mode.async: falseclassstringnullYesPHP class to use as the controller for the AJAX communication. You must supply the full namespace location to the class. *Note: you must escape the “\” namespace separation character.class: 'com\\example\\controllers\\ExampleHandler'fncstringnullYesThe method to use from the “class” defined.fnc: ‘ex2’successfunctionnullNoCallback function that is run after the AJAX response finishes successfully.success: function(data) { alert(‘response: ‘+data); } In addition to the above options, you can also add any additional data you want to the ajaxCall(). Here is an example of adding extra data to the ajaxCall() (from index.html):

// Example 4
$('#ex4form').submit(function(e)
{
ajaxCall(
{
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex4',
'form': $(this).serializeArray()
});
});

This adds the “form” data to the ajaxCall(). When PHP receives that request, the “form” value can be accessed by using the $_REQUEST[‘form’] variable. ajax.php

<?php
 
// Setup auto load for namespace
function __autoload($class)
{
$file = realpath(dirname(__FILE__)."/".$class.".php");
if(!file_exists($file)) throw new Exception("Class file not found: ".$class." (".$file.")");
require_once $file;
}
 
// Call class/method requested from JS
$class = urldecode($_REQUEST['class']);
if(isset($class))
{
// Pass to controller
$controller = new $class($_REQUEST);
exit;
}
 
// Not a valid request
header('HTTP/1.1 500 Internal Server Error');
die("Error: Invalid request.");
 
?>

This file is used to accept the AJAX request from the client and feed it to the proper class/method. You should not need to modify this file. index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html</a> xmlns="<a href="http://www.w3.org/1999/xhtml"">http://www.w3.org/1999/xhtml"</a> lang="en" xml:lang="en">
<head>
<title>AJAX Starter Pack - Examples</title>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"</a> type="text/javascript" charset="utf-8"></script>
<script src="./ajax.js" type="text/javascript" charset="utf-8"></script>
 
<style>
.exampleArea { margin-bottom: 15px; }
.exampleArea .exMain
{
border: 1px solid #000;
padding: 5px;
}
.exampleArea .exMain .description
{
font-size: .75em;
margin-bottom: 5px;
}
</style>
 
<script>
 
// Page load function
$(function()
{
// Example 1
$('#ex1go').click(function(e)
{
ajaxCall(
{
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex1',
'value': $('#ex1send').val()
});
});
 
// Example 2
$('#ex2go').click(function(e)
{
ajaxCall(
{
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex2',
'value': $('#ex2send').val(),
'success': function(data) { alert('ajax successful!'); }
});
});
 
// Example 3
$('#ex3go').click(function(e)
{
ajaxCall(
{
'async': false,
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex3',
'value': $('#ex3send').val(),
'success': function(data) { alert('server sent response: "'+data+'"'); }
});
 
// Note that this alert won't be called until after response from the server
alert('server response finished.');
});
 
// Example 4
$('#ex4form').submit(function(e)
{
ajaxCall(
{
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex4',
'form': $(this).serializeArray()
});
});
 
// Example 5
$('#ex5form').submit(function(e)
{
ajaxCall(
{
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex5',
'form': $(this).serializeArray()
});
});
 
// Example 6
$('#ex6go').click(function(e)
{
ajaxCall(
{
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex6'
});
});
 
// Example 7
$('#ex7go').click(function(e)
{
ajaxCall(
{
'class': 'com\\example\\controllers\\ExampleHandler',
'fnc': 'ex7'
});
});
});
</script>
 
</head>
<body>
 
<div id="ex1" class="exampleArea">
<div class="exTitle">Example 1 - Send simple text input to server:</div>
<div class="exMain">
<div class="description">Send value of a single textbox to the server.</div>
<input id="ex1send" value="say hello" /> <input id="ex1go" type="button" value="Go" />
</div>
</div>
 
<div id="ex2" class="exampleArea">
<div class="exTitle">Example 2 - Send simple text input with success callback:</div>
<div class="exMain">
<div class="description">Send value of a single textbox to the server and supply a callback function to run when the response is successful.</div>
<input id="ex2send" value="say hello" /> <input id="ex2go" type="button" value="Go" />
</div>
</div>
 
<div id="ex3" class="exampleArea">
<div class="exTitle">Example 3 - Send simple text input non-asynchronously with success callback:</div>
<div class="exMain">
<div class="description">Send value of a single textbox to the server in non-asynchronouse mode. By default AJAX calls are made synchronously and the javascript doesn't not wait for a response from the server to continue. This example illustrates a non-asynchronous call to the server before continuing.</div>
<input id="ex3send" value="say hello" /> <input id="ex3go" type="button" value="Go" />
</div>
</div>
 
<div id="ex4" class="exampleArea">
<div class="exTitle">Example 4 - Submit a form:</div>
<div class="exMain">
<div class="description">Send the values of an entire form using jQuery's serializeArray() function as a value to send to the server. Normally forms are sent to the server in &quot;key => value&quot; pair form. jQuery's serializeArray() function however, sends the data in a different form. The array of form data sent to the server will be display when the form is submitted.</div>
<form id="ex4form" action="javascript: void(0);">
<div>First Name: <input name="fName" value="bob" /></div>
<div>Last Name: <input name="lName" value="smith" /></div>
<div>Age: <input name="age" value="28" /></div>
<input type="submit" value="Go" />
</form>
</div>
</div>
 
<div id="ex5" class="exampleArea">
<div class="exTitle">Example 5 - Submit a form:</div>
<div class="exMain">
<div class="description">The previous example shows the array of data that is sent the the server in non &quot;key => value&quot; form. This example shows how you can use the getKVarray() method of the AjaxController PHP controller class to restructure the sent array data into &quot;key => value&quot; form. See the &quot;Example 5&quot; section of the com/example/controllers/ExampleHandler.php file to see how this method is used to restructure the array.</div>
<form id="ex5form" action="javascript: void(0);">
<div>First Name: <input name="fName" value="bob" /></div>
<div>Last Name: <input name="lName" value="smith" /></div>
<div>Age: <input name="age" value="28" /></div>
<input type="submit" value="Go" />
</form>
</div>
</div>
 
<div id="ex6" class="exampleArea">
<div class="exTitle">Example 6 - Change HTML content:</div>
<div class="exMain">
<div class="description">Response from the server can be used to run js code. This example shows a value being replaced by using the server response.</div>
<strong id="ex6text">Change Me</strong> <input id="ex6go" type="button" value="Go" />
</div>
</div>
 
<div id="ex7" class="exampleArea">
<div class="exTitle">Example 7 - Running javascript commands using server response:</div>
<div class="exMain">
<div class="description">Reponses from the server can be used to run any javascript you wish.</div>
<input id="ex7go" type="button" value="Run Server Generated Response" />
</div>
</div>
 
</body>
</html>

This file demonstrates several ways you can use the AJAX starter pack and should help get you up and running quickly and easily. Grab the starter pack and get up and running with easy AJAX on your own site!

Attached File:

php_ajax_starter_pack.zip

Shopping cart

Basic AJAX starter pack using jQuery and PHP

Navigation

Active forum topics

Syndicate

Search form

Shopping cart

Basic AJAX starter pack using jQuery and PHP

Navigation

Active forum topics

Syndicate