Friday, May 29, 2009

 

Ajax, king of Salamis, son of Telamon and Periboea. No, wait. That other Ajax.

So I've been playing around with the web interface to my middleware lately.

(The basic information stream for the app, at least initially, is "Android uploads GPS data, some brief notes, and maybe a picture to the middleware; middleware emails reminder to user to do something with it; user subsequently logs in to web site, conceivably from Android's browser, and uses previously uploaded data to update WikiTravel." I'm gonna add a more direct route that doesn't involve the web site for simple updates, but 'remind me to write this up in more detail later' seems like a more useful function, thanks largely to phone screen sizes.)

Anyway, I stopped writing code just as Ajax - that's Asynchronous Java/XML, more or less, although it has a highly fungible definition - began to take over the web world and begat Web 2.0. So as a mere user, I've always been pretty impressed by it. Saving and loading data within the browser? Cool! Must be tricky!

It ain't. On the contrary, it's really easy. Oh, I can see how you could tangle yourself up in knots with it, but for basic "go send stuff to server / revamp this piece of this page" stuff, Ajax is totally straightforward. Looks like it's often far simpler than doing everything on the server, even.

I did solve one microproblem, so I'll post some code. Ajax is built around an XMLHttpRequest object, which you basically instruct to "go send this request to the server, then get back to me." You then set a callback function XMLHttpRequest uses to get back to you. But I wanted to pass a parameter to my callback function. I wasn't clear on the best way to do this, so I googled, but while there were a few solutions out there, frankly, I think this one I came up with is more elegant. (And I'm sure I'm far, far from the first to work this out.)

Basically, you use the fact that JavaScript treats functions as objects, and write a function to create your callback function on the fly. Sound complicated? It really isn't. Here's JavaScript code to update/expand div with new data from the server:


var http;

function getResponseFunction(divName) {
return function() {
if (http.readyState==4) { //4 means "done!"
var element = document.getElementById(divName);
element.innerHTML = http.responseText;
element.style.display='block';
}
}
}

function fillDiv(divName) {
var element = document.getElementById(divName);
http = new XMLHttpRequest();
http.onreadystatechange=getResponseFunction(divName); // customized callback function
var targetUrl="/expandDiv?divName="+divName; // a call to this URL will return the HTML with which we'll fill the div
http.open ("GET", targetUrl, true);
http.send(null);
}


Voila. Piece o' cake.

(Yes, this project has now expanded to include Java, Python, and JavaScript/DHTML/Ajax code. Hey, it keeps me from getting bored.)

Labels: , , ,


Comments:
@"And I'm sure I'm far, far from the first to work this out."
Check out the ajax libraries(jquery, prototype, etc...), most of which have size and memory optimized versions that are ideal, even for a platform like an android mobile phone.

Basically they _ALL_ let you do this kind of parameterized callback thing efficiently and elegantly.

In general if you are _EVER_ writing a line of code in the year 2009+ that has 'new XMLHttpRequest()' in it, you are almost surely reinventing the wheel (for no good reason).

As someone that remembers the pre-ajax days all to well, the guiding principal that I use most frequently is, 'this[whatever i'm trying to do] is in a library somewhere, and is probably implemented pretty well'
 

Post a Comment

Subscribe to Post Comments [Atom]





<< Home

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]