Using AJAX – Pros and Cons

AJAX (Asynchronous JavaScript and XML) has evolved as a powerful, user-friendly and developer-friendly platform for building web based interactive applications. When used with sound technical understanding, it can take the user experience to a whole new level. AJAX has been in a dormant existence for over a decade. Credit goes to Google to bring it to the forefront and demonstrate how powerful it can become.

Like any other technology, AJAX too has its own set of pros and cons. Here are some of the important ones which one definitely should be aware of before using AJAX.

Pros

Enhanced User Experience

Significantly enriched user experience is the biggest benefit that AJAX offers. It makes web applications much more interactive, dynamic and faster. AJAX engine is JavaScript based, which enables quick rendering of the interface and dynamic content. In addition, AJAX engine performs several basic processes, such as editing data memory, which further increases the browser’s performance and facilitates faster browsing speed.

Reduced Bandwidth Usage

AJAX reduces the requests to the server by generating the HTML within the browser. As a consequence there is a drastic reduction in bandwidth usage and response time experienced by the user. Using AJAX, one can virtually eliminate the need for reloading of web page, and provide much faster speeds while dealing with real time data.

Increased User Productivity

Faster response time for serving dynamic content directly translates in higher productivity of the user, subsequently leading to increased traffic on the site.

Increased Compatibility

JavaScript has been used for many years now to provide client-side interactivity and dynamism, but it had an inherent problem with browser compatibility. AJAX ensures that inspite of being JavaScript driven compatibility with all the popular browsers is maintained and hence eliminating a major pain point from the application development process.

Faster & Enhanced Application Development

AJAX is not tightly coupled with any particular web technology. It can be used with equal ease and power with ASP.Net, J2EE, PHP, or any other technology. With time power of AJAX is growing and more and more features are being available for plug and play kind of use. This significantly reduces the development efforts.

Cons

Learning Curve For Developers

Developers need to take special care to learn coding and test of AJAX applications, especially from a security point of view. It needs to be kept in mind that since AJAX is client-side driven it will have its own set of vulnerabilities.

Effects On End Users

Web page served using AJAX is not registered with the browser history engine. As a result if the user hits the ‘back’ button of the browser, the changes will not be reflected. Also, the bookmark feature will not render the web page as the user might be expecting.

Not Search Engine Friendly

Being heavily dependent on JavaScript, AJAX is not very friendly for the search engines, as the dynamically rendered content is not visible to the search engines. As a result AJAX driven pages are unlikely to rank well in the search rankings, at least for the content which is served dynamically.

Dependency Of Browser Settings

Any browser which does not support JavaScript or XMLHttpRequest, or if their support is disabled, will not be able to serve AJAX driven web pages. Similarly, devices such as mobile phones, PDAs, or screen readers, which have either none of limited support for JavaScript, may experience this issue with more severity.

Change the style of element using Jquery

Styles play a big part in the look and feel of any website, and jQuery can help us change them dynamically. In this section, we will look at how jQuery can be used to dynamically add and remove style classes and entire cascading style sheets.

.CSS()

You can change your website’s styles dynamically with jQuery’s .css() function. Either change styles that are already declared inline or in CSS files (such as font-size, color,background-color, etc.) or create new styles for elements.

Example: Change text color and background color

$('div#' + id).css({
    'color': 'Blue',
    'background-color': 'orange'
});

.ADDCLASS() AND .TOGGLECLASS()

In addition to the .css() function, you can apply currently defined CSS classes by using the .addClass() function. Its counterpart function, .removeClass(), reverses the action.

Example: Add a CSS class to an element

$('#' + id + ' a').addClass('newbutton');

to remove

$('#' + id + ' a').removeClass('jq4ubutton');

The .toggleClass() function is a huge time-saver for toggling a state on and off with CSS. The following example sets event handlers for mouseenter (which applies the CSS classimg-hover to the image) and mouseleave (which removes it).

$('#' + id).live('mouseenter', function (e) {
    $(this).toggleClass('yourclass');
});

Add Stylesheet Dynamically to the Web page Using Jquery

To change the layout of the web  page we can use multiple style sheets.  The following jquery code allows the user to change the view of the current page.

$(document).ready(function(){ 
     $('#Layout2').click(function(){ 
         var newcss = '<link type="text/css" rel="stylesheet" href="style2.css" />';
         $('head').append(newcss);
     });
     $('#Layout1').click(function(){
         $('link[href="style2.css"]').remove();
     });
});

And the HTML is

<div id="Layout1">Layout1</div>
<div id="Layout2">Layout2</div>

Live digital timer using Jquery

function updateClock() {
    var currentTime = new Date();
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();
    currentMinutes = (currentMinutes < 10 ? '0' : '') + currentMinutes;
    currentSeconds = (currentSeconds < 10 ? '0' : '') + currentSeconds;
    var timeOfDay = (currentHours < 12) ? 'AM' : 'PM';
    currentHours = (currentHours < 12) ? currentHours - 12 : currentHours;
    currentHours = (currentHours == 0) ? 12 : currentHours;
    var currentTimeString = currentHours + ':' + currentMinutes + ':' + currentSeconds + ' ' + timeOfDay;
    $('#jq4uclock').html(currentTimeString);
}
myCounter = setInterval(function () {
    updateClock();
}, 1000);

Code to reset

$('#clock').empty();
$('#' + id).hide();

Simple time counter using Jquery

You can automate a task based on time using the JavaScript setInterval() function, which can be used to specify a regular time-based trigger.

var elem = $('#' + id + ' #counter');
var count = 0;
myCounter = setInterval(function () {
    count += 1;
    elem.html(count);
}, 1000);

Code to Reset

clearInterval(myCounter);
$('#' + id + ' #jquery4ucounter').html('0');