Vikram Goyal's Blog

June 2006 Archives

Sadly, I am not a mock Sun employee

In fact, last time I checked, I wasn't a 'mock' anything. I get 'mocked' a lot for my photograph above, but that's the maximum 'mocking' in my life sadly.

So why does Javablogs.com classify me as a mock Sun employee?

If Sun would like to offer me a position, I will be more than happy to call myself a mock Sun employee. Or whatever. But then I wouldn't be 'mock' anymore so that may defeat the purpose. How about Sun employee emeritus? Or Distinguished Sun fellow?

On second thoughts, Vikram Goyal may be fine too. I am still open to a position with Sun though.

Did you ask the users before implementing AJAX?

If you have read my previous entry on a 30 second guide to using AJAX, you know that it was a surprise to me that implementing AJAX is so simple (There were other lessons in that entry too, about how much hype driven AJAX really is and why there is a whole market for AJAX that should really be the DHTML and Javascript market, but hey, I am not the complaining kind).

So, would it come as a surprise to you that my good intention of using AJAXish behavior on an existing web application turned into a nightmare of gargantuan proportions, and it had nothing to do with knowing how to use AJAX?

It had all to do with knowing when to use AJAX.

To keep this entry simple, suffice to say, that I decided to implement a Google Suggest like capability for a search field in the said web application. I was happy with the result and so was my manager and we decided to show this to the users.

They hated it.

Not just hated it, but showed a varying range of emotions including paranoia, skepticism and general hatred towards the programming geeks (OK just kidding). Sample some of the responses (You need to know Google Suggest to understand these responses):

1. Why is this page not refreshing?

2. What is this drop down and why doesn't it go away?

3. Where is my result?

4. How do I select my result?

5. Why is this thing preselecting a partial result?

6. Aren't we paying you too much?

7. This coffee you served smells weird.

(They didn't actually say the last two, but I swear they meant to).

So, lesson learned.

Users are used to a certain way the web works. They expect a page refresh. Unless the whole web changes to resemble AJAXish behavior, they won't like this mixing and matching. Confusion will reign. Do I wait for the page to refresh or will this text box magically open up? Do I click this button or do I let it be clicked for me? In short, user experience will suffer.

I am not bad mouthing AJAX. It's a cool new slant at a new web (using, I emphasize, existing technology). But that's it. It's a cool new programming technology for the programming types. Unless the actual users initiate the need for change, or the users are involved from the start and shown the possibilities and accept the changes, use AJAX in moderation. Take one bitter pill a day.

Your 30 second guide to AJAX

Chances are, if you have been building web applications for a little over a year and have used javascript even a little bit, you already know how to build AJAX applications. To use AJAX, you need to know the properties and methods of a Javascript object called XMLHttpRequest. All recent browsers support this object, but of course, as with other cross browser issues, it is instantiated differently in IE and others. The following creates this object across all browsers.


var xmlHttp;
function createXMLHttpRequest() {
  if(window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else if(window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  }
}

Now, having obtained an instance of this object, you can use it like any other Javascript object. Of course, the nice thing about it is that it can make HTTP requests to a back end process independent of the containing document or browser requests.

So the steps are:

1. Create this object.

2. Tell this object which method will handle response from the server.

// handleServerResponse is a method in your javascript code.
xmlHttp.onreadystatechange = handleServerResponse;

3. Make your request:

xmlHttp.open("GET", "YOUR URL"); // can use POST or PUT as well

4. Send your request:

// the parameter to this method can be an optional request parameter
xmlHttp.send(null);

5. Handle the response from the server in the method that you designated earlier.


function handleServerResponse() {

  if(xmlHttp.readyState == 4) { // the state when the request has completed
    if (xmlHttp.status == 200) { // the HTTP status code returned from the server
      var server_response = xmlHttp.responseText; // the servers response, use this with DHTML to modify current page
    }
  }
}

Everything else that you hear about AJAX, trust me, is just clever Javascript that is used to manipulate the DOM of the current document based on this asynchronous request to the server. Your server side code is not affected (unless you are coding specifically for AJAX).

There are other methods and properties of the XMLHttpRequest object and these can be looked up here.

I couldn't believe how simple it really was. The hype around this technology is mostly to do with AJAX patterns and clever stuff that is done using asynchronous requests and manipulating the browsers DOM on the fly. So if you know how to manipulate the DOM using Javascript, you now know how to manipulate the DOM without needing to make the whole page refresh.

This work is licensed under a Creative Commons License.