Posts Tagged 'ajax'

SAjax for PHP… Revamped!

UPDATE: Someone else is moving forward with SAjax.  Since my code has deviated away from some of the SAjax design goals, I suggest you try his site out first if you’re interested in support for the original SAjax library.

I have been using SAjax 0.12 (by the folks at ModernMethod) for a couple of years now and I think it’s the greatest think since sliced bread.  SAjax allowed me to quickly learn the very exciting and helpful technology that is known as Ajax (asynchronous JavaScript and XML).  Ajax allows you to do all sorts of cool stuff (post data without a page refresh, get small HTML fragments to add to an existing document, etc).

SAjax is great, but I found that I was doing a lot of repetitive work and I wanted to simplify it even more.  This project is the result of my effort.  I have posted it on Google’s Code project for anyone who is interested in downloading it.  It can be found here.  Note: I believe this code will only work with PHP 5.2 or higher since it relies on json_encode/json_decode (although you might be able to add this via PECL).  I will be including more documentation and code examples at my leisure or if anyone wants it sooner ;-)

So what does this re-release include?  Here are some of the features:

  • Backwards compatible with Sajax.php 0.12.  I have only done basic testing to verify this, so if you encounter problems feel free to let me know.
  • New object-oriented interface via a singleton object: Sajax::Sajax()
  • Ability to export object methods to JavaScript.
  • Object-oriented JavaScript interface via the ‘sajax‘ object, e.g.: sajax.SomeMethod(cb)
  • Ability to pass DOM objects through via stubbed calls:, e.g. sajax.SomeMethod(this.form, cb)
  • Provides additional debugging information from the server side when debugging is turned on.
  • Provides interface for rendering additional JavaScript, either through externally referenced libraries or via code blocks.

Here is the obligitory implementation example:

<?php
/*
 * Demonstration of SAjax 0.14
 * Written by Kristian Oye
 * April 19th, 2009
 */
include_once("Sajax.php");

class TestClass
{
	public $ValueString = "Hello World";
	public $ValueInt = 42;

	public function GetString()
	{
		return $this->ValueString;
	}

	public function SajaxGetNumber()
	{
		return $this->ValueInt;
	}

	public function SajaxGetObject()
	{
		return $this;
	}

	public function SajaxCalculate($form, $op = 'add')
	{
		Sajax::Sajax()->AddDebugMessage("SajaxCalculate(".json_encode($form).", $op) called.");
		if($op === 'add')
			return ($form->param1 + $form->param2);
		elseif($op === 'subtract')
			return ($form->param1 - $form->param2);
		elseif($op === 'multiply')
			return ($form->param1 * $form->param2);
		elseif($op == 'divide')
			return ($form->param1 / $form->param2);
	}
}

function GetRandom()
{
	return rand(1, 100);
}

//  Create a class to handle some of our requests.
$foo = new TestClass();
$sjax = Sajax::Sajax();

//  Turn debugging on
$sjax->EnableDebug(true);

//  Export our callable methods
$sjax->Export(
	//  Export all 'Sajax' methods in TestClass
	$foo, 

	//  Export the callback to GetString in TestClass
	array($foo, 'GetString'),

	//  Simple method export
	'GetRandom',

	//  Non-existant methods
	'TestClass::GetError',
	'GetSomeError');

//  An additional script to include in our header.
$sjax->AddScriptReference('/static/example.js');

//  Handle the request if it is for AJAX or for a
//  JavaScript document, otherwise continue as normal.
$sjax->HandleRequest();

?>
<html>
	<head>
		<title>Sajax Test</title>

		<?php $sjax->ExportIncludeJS(); ?> 

		<script type="text/javascript">
		function cb_Calculate(result)
		{
			document.getElementById('CalcResult').innerHTML = result;
		}
		</script>
	</head>

<body>
<table>
<tr>
<td>Get a string:</td/>
<td colspan="2">
				<input	type="button"
						value="Go"
						onclick="sajax.GetString(function(result) { alert(result);  })" /></td>
</tr>
<tr>
<td>Get a number:</td/>
<td colspan="2">
				<input	type="button"
						value="Go"
						onclick="sajax.GetNumber(function(result) { alert(result);  })" /></td>
</tr>
<tr>
<td>Get a random:</td/>
<td colspan="2">
				<input	type="button"
						value="Go"
						onclick="sajax.GetRandom(function(result) { alert(result);  })" /></td>
</tr>
<tr>
<td>Get an object:</td/>
<td colspan="2">
				<input	type="button"
						value="Go"
						onclick="sajax.GetObject(function(result) { alert(result);  })" /></td>
</tr>
<tr>
<td>Get an ERROR:</td/>
<td colspan="2">
				<input	type="button"
						value="Go"
						onclick="sajax.GetError(function(result) { alert(result);  })" /></td>
</tr>
<tr>
<td>ANOTHER error:</td/>
<td colspan="2">
				<input	type="button"
						value="Go"
						onclick="sajax.GetSomeError(function(result) { alert(result);  })" /></td>
</tr>
<tr>
			<form action="/bogus" method="get">
<td style='vertical-align:top'>Calculate:</td>
<td style='vertical-align:top'>
					<input	type="text"
							value="0"
							id="param1"
							name="param1" /></td>
<td>
					<input	type="button"
							value=" + "
							onclick="sajax.Calculate(this.form, 'add', cb_Calculate)" />

					<input	type="button"
							value=" - "
							onclick="sajax.Calculate(this.form, 'subtract', cb_Calculate)" />
					<input	type="button"
							value=" * "
							onclick="sajax.Calculate(this.form, 'multiply', cb_Calculate)" />

					<input	type="button"
							value=" / "
							onclick="sajax.Calculate(this.form, 'divide', cb_Calculate)" /></td>
<td style='vertical-align:top'>
					<input	type="text"
							value="0"
							id="param2"
							name="param2" /> = <span id="CalcResult"></span></td>
</form></tr>
</table>
</body>
</html>

Easter ‘Saturday’

It was not quite Easter yet, but I did get the opportunity to spend some time with Kristin on this holiday weekend. We went to the bookstore and picked out a neat Easter book with pop-up pages and Kristin wanted a box of cute, little baby chickens (I liked them more than the monster chocolate egg she was eyeing). I also bought her an Easter outfit so we could take this nice Father/Daughter picture.

In other news, I have been working on a political campaign website lately and it has me thinking about the possibility of starting a part-time, side business: web consulting. I am learning a host of new technologies that have many practical applications in the web development world. The following technologies are ones that I have started to incorporate into my skill set (and that I would suggest to other web developers):

AJAX
Ajax is a powerful technology that uses JavaScript and XML to communicate between an existing document and a web server (e.g. database). Ajax is nice, in my opinion, because it allows you to make asynchronous calls and to update existing DOM objects without a complete page refresh.
JSON
JavaScript Object Notation allows for objects to be serialized into JavaScript strings that can be evaluated into JavaScript objects… and back again! When used in conjunction with Ajax this can be a very powerful tool. Facebook is a prime example of this!
JQuery
JQuery is a powerful library of JavaScript routines that allow you to manipulate DOM objects in a variety of useful ways. So far, I have primarily been using JQuery ’selectors’ to dynamically change CSS classes on DOM objects (useful for dropdown menus, etc).


a

 

November 2009
M T W T F S S
« Aug    
 1
2345678
9101112131415
16171819202122
23242526272829
30