Remote Scripting with PHP
Remote scripting lets you pull data from a database and display it without loading a new Web page
When you sign for a Microsoft Passport account, at the registration page you are prompted to select your country and state, which are shown in a select box. When you select a country, the entire page first reloads and then shows you the corresponding states. This happens because when a country is selected, the form (containing the select boxes) is posted to a server-side script. The script connects to the database, fires a query to retrieve the states for the selected country and populates the 'state select box' with the state names. For the user, the reloading of the page is not a pleasant experience.
For a better user experience, you can use remote scripting. Using JSRS (JavaScript Remote Scripting), a JavaScript on a Web page can call a server-side script written in PHP, Perl, ASP, ASP .Net or JSP. So, you can set up the onChange event of a select box (the one for countries) to call a JavaScript function, which in turn communicates with a server-side script using JSRS. The server-side script will return the data (name of states) to the JavaScript, which will in turn populate the page with the data, all without reloading the page. To get a taste, we will now code the same countries-states example. For the server-side script, we will use PHP.
Setup
We assume that you have set up PHP and MySQL database on your machine. Next, create a database named rs in MySQL as:
mysqladmin –u root –p create rs
In the rs database, create two tables for the countries and states using the following SQL.
create table countries (id int auto_increment not null, name varchar(50), primary key(id));
create table states (id int auto_increment not null, name varchar(50), country_id int, primary key(id));
Here, the country_id is the foreign key. Populate both the tables with some values.
On our this month's CD, we have given out the JSRS library. Extract the file named jsrs23.zip present in the directory system/cdrom/src_code on the CD. Copy the files named jsrsClient.js and jsrsServer.php.inc to a directory on your Web server. Here, jsrsClient.js is the client side or JavaScript library and jsrsServer.php.inc is the server-side (PHP in our case) library.
The RS code
Next, write a PHP file (say, rstest.php), containing the two selected boxes for country and state. Name the select boxes as country and states, respectively. Populate the country select box with the country names and IDs (use them as the option's value) from the database. Include the client-side library by adding the following line between the tag pair.
Set the onChange event handler for the country select box to getStates( ). Within the getStates( ) function we will call the server-side script using a function (namely jsrsExecute) in the JSRS client-side library. The getStates( ) function (which should be present within the tag pair) looks as follows.
function getStates()
{
country=document.forms[0].country.options[document.forms[0].country.selectedIndex]
jsrsExecute( "get_states.php", listStates, "getStates" , country );
}
The parameters to the jsrsExecute function are as follows.
l Name of the PHP script
l Name of the JavaScript function to call when the server-side PHP script has returned results (the name of the states)
l Name of the PHP function to call within the PHP script, which is specified as the first parameter
l Parameters to pass to the PHP function specified as the third parameter
The get_states.php file will look as follows.
include("jsrsServer.php.inc");
jsrsDispatch( "getStates" );
function getStates($country)
{
$return_value="";
$dblink=mysql_connect("localhos
mysql_select_db("rs",$dblink);
$query="select id,name from states where country_id=$country";
$query_result=mysql_query(
while($row=mysql_fetch_array(
$return_value.=$row["name"]."~
return $return_value;
}
?>
The JSRS specific code has been marked in bold. The first line includes the server-side PHP library for JSRS and with the second line you declare the method to expose, to be called via JSRS. The syntax of jsrsDispatch( ) function is as follows.
jsrsDispatch(
Note that getStates( ) PHP function returns the results in a form where each row is separated by a Pipe (|) and the states' IDs and names within each row are separated by a tilde (~).
What is left is coding the listStates function in rstest.php. The listStates function (again, preferably located between ) looks as follows.
function listStates(states)
{
jsrsExecute ("foo.php", callBack, "blankFunc");
document.forms[0].states.options.length=0;
options = states.split("|");
for( var i = 0; i < namevalue="options[i].split(">);
document.forms[0].states.options[i] = new Option(nameValue[0], nameValue[1]); }}
Note that in the first line we are calling the jsrsExecute( ) function again. This is just an ugly fix without which the browser will keep showing a loading status even after the states list has been populated. You should define a function named callBack with empty body as:
function callBack() {}
Besides PHP, JSRS supports numerous other server-side scripting languages, which include ASP, ASP .Net, JSP, Perl and Python. If you look at the extracted archive of JSRS, you will find server-side library files for ASP, Perl and Python. JSRS, however, supports only JavaScript (as the name indicates) at the client side. For more information on JSRS, go to www.ashleyit.com/rs/.
