If it won't be simple, it simply won't be. [Hire me, source code] by Miki Tebeka, CEO, 353Solutions

Wednesday, February 21, 2007

AJAX 101


MochiKit is one of many AJAX toolkits out
there. I found it very intuetive and fun to use.

We'll construct a minimal AJAX application using MochiKit, the application will
pull two values A and B from the server and update them on a
web page. (See the buttom for a list of packages/utilities used).

The web server will be a simple CGI (get_values.cgi) script that
returns a JSON hash table with the desired values:

get_values.cgi

#!/usr/bin/env python

import simplejson
from random import randint

print "Content-Type: text/plain"
print

low, high = 0, 100

data = {
"A" : randint(low, high),
"B" : randint(low, high),
}

print simplejson.dumps(data)
Our HTML page is very simple, note that:
  • We give an id for each table cell we want to change
  • We load MochiKit
  • After that we load our script

index.html

<html>
<head>
<title>pythonwise - MochiKit Demo
<!-- Load MochiKit -->
<script type="text/javascript" src="/MochiKit/MochiKit.js">
<!-- Load our script -->
<script type="text/javascript" src="/values.js">
</title>
<!-- Have some style -->
<style>
table {
background-color: lightskyblue;
border-style: solid;
border-width: 5px;
width: 20%;
text-align: center;
}
td {
text-align: center;
font-family: Courier, monospace;
font-size: 40px;
}
</style>

</head>
<body>
<center>
<h1>pythonwise - MochiKit Demo
<div class="content">
<!-- Just a simple table with the values we want to show -->
<table>
<tr>
<td>A
<td id="A">???
</tr>
<tr>
<td>B
<td id="B">???
</tr>
</table>
</div>
<hr width="20%" />
A MochiKit demo from
<a href="http://pythonwise.blogspot.com">pythonwise, by
<a href="mailto:miki.tebeka@gmail.com">Miki
</center>
</body>
</html>
What's left is our little script:

values.js

function connection_error () {
alert("Connection Error!");
}

function process_values(data) {
/* Even JavaScript has some introspection */
for (key in data) {
var new_value = data[key];
var color = "black"; /* No chage color */
var element = getElement(key);
var last_value = parseInt(element.innerHTML);

if (last_value == NaN) { /* First time */
color = "black";
}
else if (new_value > last_value) {
color = "green";
}
else if (new_value < last_value) {
color = "red";
}

/* Change to new value */
element.innerHTML = new_value;
element.normalize()
element.style["color"] = color;
}

/* Wait 3 seconds and refresh again */
callLater(3, get_updates);
}

function get_updates() {
var data = loadJSONDoc("get_values.cgi");
data.addCallbacks(process_values, connection_error);
}

/* Call get_updates when window is loaded */
connect(window, "onload", get_updates);

What we get is something that looks like the image at the head of this article.

If you want to run this demo, you'll need a web server for the CGI.

I'm using lighttpd because it's simple and
fast. Here is the configuration file for the demo:

lighttpd.conf

# lighhtpd configuration file, see http://trac.lighttpd.net/trac/wiki/Docs for
# more information

server.modules = (
"mod_access",
"mod_cgi",
)

server.document-root = "/home/mtebeka/mochikit-demo"
server.port = 8080

# .html is HTML
mimetype.assign = ( ".html" => "text/html" )
# Look for index.html
index-file.names = ( "index.html" )

# .cgi are not static
static-file.exclude-extensions = ( ".cgi" )

# Use Python to run CGI scripts
cgi.assign = ( ".cgi" => "/usr/local/bin/python" )

Run with /usr/sbin/lighttpd -f lighttpd.conf.


That's it, I hope that next time you'll consider AJAX - it's not that hard :)

Resources

Blog Archive