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 pythonOur HTML page is very simple, note that:
import simplejson
from random import randint
print "Content-Type: text/plain"
low, high = 0, 100
data = {
"A" : randint(low, high),
"B" : randint(low, high),
}
print simplejson.dumps(data)
- We give an id for each table cell we want to change
- We load MochiKit
- After that we load our script
index.html
<html>What's left is our little script:
<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>
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 :)
No comments:
Post a Comment