Using AJAX to improve your mobile website

Tips and Tricks

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.

About Prosanta B.

Prosanta is a member of the BlackBerry Developer Relations team specializing in Web Development. Prosanta’s focus is on developing out the web platform and tools associated with web development while supporting the development efforts of a number of Independent Software Vendors. Prior to joining RIM, Prosanta had worked on numerous web portals for major multinational firms writing both front and backend code.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus