Working With AJAX and Perl with example

Nov 17, 2010 • Pradeep Pant

Hello,

While doing Ajax Perl application development, I came across an interesting article on the following link.

The article demonstrate with an example how Ajax can be used with Perl. In the example given, there is table containing Student names and Marks. Every row has an Edit button, by which user can edit the information for that row. THE DB used is Microsoft Access to keep things simple. In order to run the below example code you will have to create a table by the name “Student” in MS Access”. It should have the following columns.

Column Name Data type Sl_No(Primary Key) Number Name Text Marks Number

Also you need to create a DSN by the name “mydsn” pointing to the Access DB.

The basic logic here used in the example is that we have two separate rows for View and Edit (for every Student). Initially we hide the Edit row (by using style=”display:none”) and display the View Row(by using style=”display:block”). When the user clicks on the “Edit” button, the View row becomes hidden and the Edit row is displayed. We have used JavaScript to toggle between the rows. Below is the code snippet used in files (AjaxExample.pl and student.js).

============================================================

AjaxExample.pl

============================================================

#!perl

use DBI qw(:sql_types);

use CGI;

use CGI qw/:standard/;

use CGI::Ajax;

my $cgi = new CGI();

#——————————————————————–

# Mapping the Perl subroutine to the triggering function

#——————————————————————–

my $ajax = new CGI::Ajax( ‘saveStudInfo_JScript’ => &saveStudInfo_PerlScript );

$cgi->header(-charset=>’US-ASCII’);

print $ajax->build_html($cgi,&generateHTML);

#——————————————————————–

# Subroutine which generates the HTML

#——————————————————————–

sub generateHTML {

# Hash which contains existing data

%Students = get_Student_Info();

$cnt = 1;

# Write the html code in the form of a string

$returnHTML .= “n”;</span> </p>

$returnHTML .= “nStudent Information”;

$returnHTML .= “<SCRIPT language=”javascript” src=”/javascript/student.js” type=”text/javascript”></SCRIPT>”;

$returnHTML .= “n</HEAD>”;

$returnHTML .= “n<BODY bgColor=”#ffffff”>”;

$returnHTML .= “<FORM method=”POST” enctype=”multipart/form-data” name=”StudentForm”>”;

$returnHTML .= “n
”;

$returnHTML .= “n<TABLE cellspacing=”0″ cellpadding=”0″ align=”center”>”;

$returnHTML .= “n”;</span> </p>

$returnHTML .= “n<TABLE width=”100%” align=”center” border=”1″ cellpadding=”3″ cellspacing=”1″ id= “StudentInfoTable”>”;

$returnHTML .= “n”;</span> </p>

$returnHTML .= “n<TD align=”center” >SL No</TD>”;

$returnHTML .= “n<TD align=”center” nowrap>Name </TD>”;

$returnHTML .= “n<TD align=”center” nowrap>Marks </TD>”;

$returnHTML .= “n<TD align=”center” > </TD>”;

$returnHTML .= “n</TR >”;

foreach $key (sort { $a <=> $b }(keys %Students)) {

#View row

$returnHTML .= “n<INPUT type=”hidden” name=”SerialNo” id=”SerialNo_$key” value=”$key”>”;

$returnHTML .= “n<TR style=”display:block”>”;

$returnHTML .=”n<TD align=”center” >$key</TD>”;

$returnHTML .=”n<TD align=”center” nowrap><Div id=”Div_Name_$key”>”. (($Students{$key}->{Name}) ? $Students{$key}->{Name} : “ ”).”</DIV></TD>”;

$returnHTML .=”n<TD align=”center” nowrap><Div id=”Div_Marks_$key”>”. (($Students{$key}->{Name}) ? $Students{$key}->{Marks} : “ ”).”</DIV></TD>”;

$returnHTML .= “n<TD align=”center”><INPUT type=”button” name=”EditButton” value=”Edit” style=”cursor: hand; width: 40px” onClick=”makeRowEditable($cnt,’StudentInfoTable’)”></TD>”;

$returnHTML .= “n</TR >”;

#Edit row

$returnHTML .= “n<TR style=”display:none”>”;

$returnHTML .=”n<TD align=”center” nowrap>$key</TD>”;

$returnHTML .=”n<TD align=”center” nowrap><INPUT type=”text” size=”30″ id=”Student_Name_$key” value=”$Students{$key}->{Name}” style=”text-align: center”></TD>”;

$returnHTML .=”n<TD align=”center” nowrap><INPUT type=”text” size=”10″ id=”Student_Marks_$key” value=”$Students{$key}->{Marks}” style=”text-align: center”></TD>”;

$returnHTML .= “n<TD align=”center”><INPUT type=”button” name=”SaveButton” value=”Save” style=”cursor: hand; width: 40px” onClick=”saveStudInfo_JScript([‘Student_Name_$key’,’Student_Marks_$key’,’SerialNo_$key’,’NO_CACHE’],[‘Div_Name_$key’,’Div_Marks_$key’],’POST’);makeRowViewable($cnt,’StudentInfoTable’)”></TD>”;

$returnHTML .= “n</TR >”;

$cnt += 2;

}

$returnHTML .= “n</TABLE>”;

$returnHTML .= “n</TD></TR>”;

$returnHTML .= “n</Table>”;

}

#——————————————————————–

# Perl Subroutine which is called aschronously

#——————————————————————–

sub saveStudInfo_PerlScript {

# Accept Input

my $Name = shift;

my $Marks = shift;

my $SerialNo = shift;

# Call subroutine which does database update

update_Student_Info($SerialNo,$Name,$Marks);

# Return Output

return (@Return, ($Name ne “”) ? $Name : “ ”,($Marks ne “”) ? $Marks : “ ”);

}

#——————————————————————–

# Subroutine which fetches the data

#——————————————————————–

sub get_Student_Info {

my %Details;

my ($sql, $sth, $row);

# DSN with the name “mydsn” points to the Db

$DB = “mydsn”;

# User name and password if any need to be specified. Currently no user name and pwd set.”;

$DB_USER = “”;

$DB_PASS= “”;

$dbh = DBI->connect(“dbi:ODBC:$DB”, $DB_USER, $DB_PASS);

$sql = “SELECT * FROM Student”;

$sth = $dbh->prepare($sql);

$sth->execute;

$cnt = 1;

while ($row = $sth->fetchrow_hashref) {

$Details{$cnt++} = $row;

}

$sth->finish();

return %Details;

}

#——————————————————————–

# Subroutine which updates the Student Table in DB

#——————————————————————–

sub update_Student_Info {

my $SerialNo = shift;

my $Name = shift;

my $Marks = shift;

my ($sql, $sth,$row);

# DSN with the name “mydsn” points to the Db

$DB = “mydsn”;

# User name and password if any need to be specified. Currently no user name and pwd set.

$DB_USER = “”;

$DB_PASS= “”;

$dbh = DBI->connect(“dbi:ODBC:$DB”, $DB_USER, $DB_PASS);

$sql = “Update Student set Name = ‘$Name’,Marks = $Marks where Sl_No = $SerialNo “;

$sth = $dbh->prepare($sql);

$sth->execute;

$sth->finish();

return $sql;

}

============================================================

student.js

============================================================

* Toggles the rows from EDIT mode to VIEW mode.

* Invoked on clicking the ‘SAVE’ button in last column.

function makeRowViewable(rowNumber,id) {

var table = document.all ? document.all[id] : document.getElementById ? document.getElementById(id) : null;

var editableRowNumber = rowNumber + 1 ;

var nonEditableRowNumber = editableRowNumber -1 ;

table.rows[editableRowNumber].style.display = “none” ;

table.rows[nonEditableRowNumber].style.display = “block” ;

}

* Toggles the rows from view mode to edit mode.

* Invoked on clicking the ‘EDIT’ button in last column.

function makeRowEditable(rowNumber,id) {

var table = document.all ? document.all[id] : document.getElementById ? document.getElementById(id) : null;

var editableRowNumber = rowNumber + 1 ;

var nonEditableRowNumber = editableRowNumber -1 ;

table.rows[editableRowNumber].style.display = “block” ;

table.rows[nonEditableRowNumber].style.display = “none” ;

}

As we know, the term Ajax stands for ‘Asynchronous JavaScript And XML’. It is not a technology but a set of technologies being used together in a particular way. With effective use of existing technologies like HTML, DHTML, DOM, CSS, JavaScript one can make web pages more dynamic and interactive.

Using JavaScript, Ajax makes an asynchronous call to the server and fetches an XML document from a server-side component. Upon completion of the request, JavaScript may be used to update or modify the Document Object Model (DOM) of the HTML page. Only the necessary portions of the HTML DOM are re-rendered in the HTML page. In short Ajax techniques let you update parts of your web page without reloading the whole page.

The general benefit here is that an asynchronous operation executes in a separate thread. So when an operation is triggered asynchronously by the application, it can continue executing while the asynchronous method performs its task. Moreover only the data that needs to be updated or inserted can be sent instead of sending the entire form data. Perl Ajax framework are also available for faster development and test.

Popular web applications like Gmail, Amazon, Orkut etc are using Ajax.

References and more links:

Simple Example demonstrating Ajax Implementation using Perl « Perl recipes « ActiveState Code.

http://www.perl.com/pub/2006/03/02/ajax_and_perl.html

http://perl.about.com/b/2006/03/17/using-ajax-from-perl.htm

http://ajaxpatterns.org/Perl_Ajax_Frameworks

http://search.cpan.org/~bpederse/CGI-Ajax-0.707/

Enjoy using Ajax from Perl.