Simple Ajax

Simple Ajax Example

function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
//self.xmlHttpReq.overrideMimeType(“text/xml”);
}
// 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;
}

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.

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>.
Advertisements

2 thoughts on “Simple Ajax

  1. why not go for Jquery , Mootools .. these are AJAX framework , easy to work with and lot of interactivity with good feel and looks !

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s