Simple ajax when writing a web page using PHP

I was looking for a simple solution to write a page where the calculation is not visible by viewing the source of the html page, which is easy to deploy on most web servers. As almost all providers support php these days, that seemed to be the way to go.

Now, we all know the buzz around ajax, where many people say you need a framework to get it to work (probably because they are trying to sell you something). However, I did simply wanted a very lightweight solution. A simple library which makes it fast and easy to handle the asynchronous stuff was searched.

I tumbled on sajax, and it seems to fit the bill perfectly.

I have a very simple example running here. It shows a page which allows you to multiply two values. The trick is that the calculation itself is done server side using php code. This is easiest sajax demo you can find.

The code is pretty simple

<?
require("Sajax.php");

function multiply($x, $y) {
return $x * $y;
}

<strong>sajax_init();</strong>
<strong>sajax_export("multiply");</strong>
<strong>sajax_handle_client_request();</strong>

?&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
&lt;?
<strong>sajax_show_javascript();</strong>
?&gt;

<strong>function do_multiply_cb(z) {
document.getElementById("z").value = z;
}</strong>

function do_multiply() {
// get the folder name
var x, y;

x = document.getElementById("x").value;
y = document.getElementById("y").value;
<strong>x_multiply(x, y, do_multiply_cb);</strong>
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;input type="text" name="x" id="x" value="2" size="3"&gt;
*
&lt;input type="text" name="y" id="y" value="3" size="3"&gt;
=
&lt;input type="text" name="z" id="z" value="" size="3"&gt;
&lt;input type="button" name="check" value="Calculate"
onclick="do_multiply(); return false;"&gt;
&lt;/body&gt;
&lt;/html&gt;

Let me highlight some of the details

  • The sajax_init is need to initialise the system.
  • Your php functions need to be exported to allow asynchronous access (using sajax_export). When exporting several functions, just add the other names as extra parameters.
  • sajax_handle_request is need to allow the asynchronous calls to function.
  • In a javascript block, you need sajax_show_javascript to generate the client side ajax stuff.
  • You need a function to handle the reply from your call (here called xxx_cb), and this needs to be passed to the (generated) function (the exported name prefixed by x_ (giving x_xxx to use the same example) to do it all in one swoop.

The next step it to try to enhance this a bit to make the ajax usage itself more powerful. The big trick is to not just replace a n input value somewhere, but to actually replace an entire piece of HTML.

Once you do that, the possibilities become limitless. Unfortunately though, this will make your code less readable as you will need to mix the html markup and the actual result info in your page. But then again, we were already doing that by using a asp like programming model.

&lt;?
require("Sajax.php");

function replaceData($old, $new, $source) {
<strong>return "&lt;p&gt;The new &lt;b&gt;value&lt;/b&gt; is &lt;font size='+1'&gt;" . str_replace($old,$new,$source) . "&lt;/font&gt;";</strong>
}

sajax_init();
sajax_export("replaceData");
sajax_handle_client_request();

?&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
&lt;?
sajax_show_javascript();
?&gt;

function do_replaceData_cb(val) {
<strong>document.getElementById("res").innerHTML = val;</strong>
}

function do_replaceData() {
// get the folder name
var o, n, s;

o = document.getElementById("o").value;
n = document.getElementById("n").value;
s = document.getElementById("s").value;
x_replaceData(o, n, s, do_replaceData_cb);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;table&gt;
&lt;tr&gt;&lt;td&gt;String to replace data in&lt;/td&gt;&lt;td&gt;&lt;input type="text" id="s" value="Some example to replace strings in" size="40"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;String to replace&lt;/td&gt;&lt;td&gt;&lt;input type="text" id="o" value="e" size="40"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Replacement value&lt;/td&gt;&lt;td&gt;&lt;input type="text" id="n" value="-" size="40"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan="2"&gt;&lt;input type="button" value="Replace" onclick="do_replaceData(); return false;"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
<strong>&lt;div id="res"&gt;&lt;/div&gt;</strong>
&lt;/body&gt;
&lt;/html&gt;

As you see, the main template is still the same (though we changed the names of the functions which do the work.

I have marked the most important bits

  • HTML code is now being returned.
  • innerHTML is used to set insert the HTML in the document.
  • You need an empty span or div under which the HTML can be put. Using an open and close tag is better than using a empty tag (needed for some browsers).

Leave a Reply

Your email address will not be published. Required fields are marked *

question razz sad evil exclaim smile redface biggrin surprised eek confused cool lol mad twisted rolleyes wink idea arrow neutral cry mrgreen

*