Here's an example to get you started.
First, put this file where ever your HTML files like to live. I called it it ajaxdemo.htm:
<html>
<head>
<title>Ajax Demo</title>
<script type="text/javascript">
function createRequestObject() {
var req;
if (window.XMLHttpRequest) { // Firefox, Safari, Opera...
req = new XMLHttpRequest();
// alert('Detected a modern browser - very good!');
} else if (window.ActiveXObject) { // Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
// alert('Detected an old IE browser');
} else {
// error creating the request object,
// (maybe an old browser is being used?)
alert('There was a problem creating the XMLHttpRequest object');
req = '';
}
return req;
}
// Make the XMLHttpRequest object
var http = createRequestObject();
function sendRequest() {
var now = new Date();
http.open('get', 'http://www.myhostname.com/cgi-bin/myscript.pl?noca
+che='+now.getTime());
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4 && http.status == 200){
var response = http.responseText; // Text returned FROM perl scrip
+t
if(response) { // UPDATE ajaxTest content
document.getElementById("ajaxstuff").innerHTML = response;
setTimeout('wipeout()', 2000); // wait 2 seconds, then clear mes
+sage
}
}
}
function wipeout() {
document.getElementById("ajaxstuff").innerHTML = '';
x = document.getElementById("mybutton");
x.disabled = false;
}
function doclick() {
x = document.getElementById("mybutton");
x.disabled = true;
document.getElementById("ajaxstuff").innerHTML = 'working...';
sendRequest();
return true;
}
</script>
</head>
<body>
<p>Click here to begin:</p>
<form><input type="button" id="mybutton" onClick="doclick()" value="Go
+!"></form>
<hr/>
<p><em><div id="ajaxstuff" > </div></em></p>
<hr/>
</body>
</html>
Note that there is a lot of javascript in here. You could
put it in a file of its own if you prefer. The main part
that makes this 'AJAX' is the createRequestObject() function, which uses the XMLHttpRequest object. This is the
thing that lets the client (browser) and server pass messages back and forth asynchronously. You have to pull a few tricks to keep old browsers happy, unfortunately.
Down near the end of the file, there is a DIV tag with id="ajaxstuff". Remember this, because we'll see it again later.
There's also a button with an a onClick event defined. When you click it, the javascript doclick() function gets called. It disables the button (so someone can't click it again while it's busy), changes the DIV contents to "working..." (so you know it's doing something), then calls sendRequest().
sendRequest() sends a request to the server, asking it to run myscript.pl. All this script does is sleep for 5 seconds then print "Done!":
#!/usr/bin/perl
use strict;
sleep 5;
print "content-type: text/html\n\n";
print "Done!\n";
If this were a real script (and not a demo) it would actually do something useful. Note that you could put the same URL into your browser's address bar. It should print "Done!" after 5 secods. There's nothing special about it, it's just a regular cgi script. You should
put it where ever your CGI scripts like to live. You'll
have to edit the URL in the example to match your server, etc.
Note that I use the javascript getTime() function to assign a value to the 'nocache' variable. getTime returns the integer number of seconds since the beginning of time, so it should be different every time you call it. The script doesn't actually use the nocache variable, but it makes each URL unique, which prevents the browser from caching it. If your browser caches the URLs, then not all of your requests will actually be sent to the server. This can create really hard to debug problems.
If you needed to send data to the server, you'd do it the same way (string the name=value pairs together on the URL), and the server side script would process them the same as any other CGI script.
After sendRequest() askes the server to run this script, it then defines a response handler, the function handleResponse(). When the server responds to the request the handleResponse() function will be called. The client has no way of knowing if/when the server will respond. Think of it like an interrupt, or an event to be processed, like a mouse click.
For this demo, the response handler grabs the output of the script (the message "Done!", remember?) and stuffs it into the DIV (overwriting the "working..." message).
I went one step further and used the setTimeout function next. In this example, it sets a 2 second timer (time value given in milliseconds), then calls the wipeout() function. wipeout() erases the 'Done!" message (overwrites the old contents with the empty string), then re-enables the button, so you can click it again.
Okay - I never used CGI::Ajax anywhere. I'm not a big fan of that module. For what you're trying to do, I think it would be overkill. If you ever need to pass several input values from your web page to the server, then get several result values back, and stick each of them into different DIVS, then it does help automate generation of most of the javascript necessary to tie everything together.
I prefer to concatenate everything together into one big string on the client end, pass it to the server, parse it (perl makes this easy), and then send back one big string. Javascript has a 'split' function, too. If you need more structured data, you can use JSON (it's still basically one big string, and there are perl modules for reading/writing it). But that's just me...
I hope this helps get you started. Good luck!
|