BlackBerry Developer's Blog

[#1]

There are several methods to enhance user experience using advanced web development strategies on your mobile website.  One of the more popular methods for enhancing mobile websites would be the use of AJAX (asynchronous JavaScript and XML). Grabbing data from outside of your webpage to update it in real time is a great way to give your website a “web 2.0” look and feel. Typically, using AJAX and more specifically XMLHTTPRequest is the best way to do this.

Here’s a short snippet of code for using the XMLHTTPRequest:

var request = new XMLHttpRequest();request.open('GET', ‘mydata.html', true);request.onreadystatechange = function (event) {	if (request.readyState == 4) {		alert(request.responseText);	}};request.send(null); 

Setting the ‘onreadystatechange’ value of the object makes this request asynchronous, so your webpage will not be blocked waiting for the response to come back.

XMLHTTPRequest is fully supported by the BlackBerry® Browser as of BlackBerry Device Software v4.6, and is something that can open a lot of doors to developers.  When using XHR, it’s very important to use it wisely.  While it does enable web developers to create stunning UI’s and a terrific user experience, and possibly even build an entire web application using it, there are a couple of properties to be aware of.

You’ll need to keep in mind when using the XMLHTTPRequest object that the BlackBerry® Mobile Data System™ (BlackBerry MDS™) does not transcode any of the data when using your XHR object.  Usually, when making a request that goes through the BlackBerry MDS, the HTML, CSS and JavaScript™ are transcoded. Specifically, JavaScript is precompiled on the BlackBerry MDS which is a significant performance enhancement.  When using XHR objects, you’ll lose those performance enhancements since none of the BlackBerry MDS transcoding takes place.

However, it is important to note that it is not XHR which is slow, but it is the compilation of JavaScript which is the bottleneck in the process.  As the BlackBerry Browser continues to improve and evolve, it will allow for more speed and efficiency throughout the process, and I think this method will become more commonplace.

A terrific example of how a web application or website can be enhanced through the use of AJAX is the MLB Gameday web application.  It uses AJAX to update the screens in virtually real time to display updates to the user.

If used properly, AJAX is a fantastic way to improve the look of your website, and will provide a unique experience for your users. 

[#2]

what if the user has javascript disabled or the device does not support it? I seen plenty of sites that rely on ajax and are rendered useless when the javascript is disabled. Even the mlb example fails to properly acommodate users with javascript disabled

[#3]

Great tip about the XHR/MDS transcoding issue Prosanta. Thanks. I'm sure simple things like minifying the XHR response would help with performance too.

In my opinion, the best use of AJAX on a made-for-BlackBerry site is via a few sparing widgets. Too much AJAX can cause a lot of "hidden" network traffic which can drain the battery perhaps more than the user might be expecting.

But then I'm a proponent of the "less is more" philosophy in my UI designs anyway .

[#4]

It's not the setting of the onreadystatechange that makes the XHR request asynchronous. It's the "true" that you're passing in as the third argument to the open method. See http://www.w3.org/TR/XMLHttpRequest/