Simple AJAX example in WordPress.

I had a tough time finding a simple AJAX example that used PHP, Perl, and Javascript – hopefully this one will help WordPress users integrate AJAX, PHP, and Perl code into their posts and pages without too many problems. The code should be straightforward enough for you to copy/paste, see how it functions function, and then learn the underlying mechanism so you can apply it to your own projects. Of course, if you have questions, just ask.

First we need to place all of our javascript code into an external file, this is the code that actually performs the AJAX actions. I think that this is cleaner, but you’re welcome to enclose all the javascript in the same file if you know how. For my example I named the file containing my javascript code ajax.js and its contents are as follows.

function initAjax(){
 var xmlHttp=null;
 try{xmlHttp=new XMLHttpRequest();}
 catch (e) {
   try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
   catch (e){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
   }
 return xmlHttp;
}
 
function do_something(){
 var simpleajax = new initAjax();
 var container = document.getElementById("container123");
 var inputext = document.getElementById("text").value;
 if(simpleajax==null)
     alert("Your browser does not support Ajax");
 simpleajax.onreadystatechange = function(){
     if(simpleajax.readyState == 4){
         container.innerHTML = simpleajax.responseText;
     }   
 }
 simpleajax.open("GET","../cgi-bin/example.pl?text="+inputext,true);
 simpleajax.send(null);
}

Next, we introduce our actual PHP code that will be associating the javascript functions with the events like “on click”. I’m running PHP in WordPress using RunPHP which I described here. This code can be adapted to suite your particular use pretty easy. The code that I actually used in a post was as follows.

<h1> <strong>Example</strong></h1>
<script language="javascript" src="../../ajax.js"></script>
<input type="text" name="text" id="text"/>
<input value="Go" type="button" onclick="do_something();"/>
<div id="container123"></div>

Finally, the contents of my example.pl script that the ajax code uses in do_something() is as follows. This is fairly simple script that uses the CGI perl module to print the query string you submitted to it.

#!/usr/local/bin/perl
use strict;
use CGI qw(:standard);
print CGI::header;
print start_html("Example");
my $string = $ENV{'QUERY_STRING'};
print $string;
print end_html;

Look over the code a few times if it doesn’t click right away. Notice how it works: First we load in the ajax.js script that contains all of our AJAX code and the javascript function do_something(). This do_something() builds the query string and runs the example.pl perl script. The PHP code that we insert into the post/page is the code responsible for registering the onClick javascript event to call do_something().