Pronoid Android

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: ajax, callback, JavaScript, XMLHttpRequest