Simple Ajax Example
Ajax is the method of using
Javascript, DHTML and the XMLHttpRequest object to perform a GET or POST and
return a result without reloading the HTML page. Below is a very simple Ajax
example that calls a CGI script that prints out the word sent to the CGI script
and the remote user's IP address.
Simple
Ajax Demo
word:
HTML
page
This is the HTML page with three
JavaScript functions that perform the XMLHttpRequest and subsequent update to
the HTML page. (These are Ajax calls)
<html>
<head>
<title>Simple
Ajax Example</title>
<script
language="Javascript">
function
xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new
ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange =
function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
function
getquerystring() {
var form
= document.forms['f1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
return qstr;
}
function
updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>
</head>
<body>
<form
name="f1">
<p>word: <input
name="word" type="text">
<input value="Go"
type="button"
onclick='JavaScript:xmlhttpPost("/cgi-bin/simple-ajax-example.cgi")'></p>
<div id="result"></div>
</form>
</body>
</html>
CGI
Script
This is the CGI script that the
JavaScript in the HTML page calls. This CGI script could just as easily be
written in Python, Ruby, PHP etc.
#!/usr/bin/perl
-w
use
CGI;
$query
= new CGI;
$secretword
= $query->param('w');
$remotehost
= $query->remote_host();
print
$query->header;
print
"<p>The secret word is <b>$secretword</b> and your IP is
<b>$remotehost</b>.</p>";
0 comments:
Post a Comment