Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

Introduction

 

JavaScript is an object-oriented scripting language that has long been the client-side scripting interface of choice for Web browser applications. JavaScript lets Web developers programmatically work with objects on a Web page, providing a platform for manipulating these objects on-the-fly. When JavaScript was first introduced, it was commonly used to provide trivial features on Web pages such as clocks and scrolling text in the browser status bar. Another common feature was the "rollover link," where an image or text color of a link would be changed when the user rolled their mouse over it. In recent times, however, JavaScript has evolved to become far more useful, with the concept of Asynchronous JavaScript and XML (Ajax) bringing a whole new level of interactivity to Web-based programming. Prior to Ajax, any server-side processing or database access would require the entire page to be "refreshed" or a new page to be rendered by the browser. Not only is this slow and frustrating for the user, but it is also a waste of bandwidth and resources.

 

Ajax stands for Asynchronous JavaScript and XML, although the reference to XML is no longer valid as Ajax requests can return responses in several formats other than XML, for example JSON (JavaScript Object Notation). Ajax works by allowing JavaScript to asynchonously submit an HTTP request to the Web server, and to render its response without refreshing or rendering a new page. Instead, the developer would typically use DOM (Document Object Model) manipulation to modify part of the Web page to reflect the changes or data returned by the HTTP response.

 

What is a JavaScript framework?

 

JavaScript on its own is a very powerful language, and you do not need any additional frameworks to create Rich Internet Applications (RIA) that are powered by it. Using JavaScript, however, is not an easy task, primarily due to the complications that arise when trying to provide support for multiple Web browsers. Like HTML and CSS, different browsers have separate implementations of JavaScript, and it can be a nightmare to ensure that your JavaScript code is cross-browser compatible.

 

A JavaScript framework or library is a set of utilities and functions that make it much easier to produce cross-browser compatible JavaScript code. Each library is vigorously tested on modern versions of many popular Web browsers, and as such, you can be confident that by using one of these frameworks, that your JavaScript-based RIA will work similarly across different browsers and platforms.

 

In addition to taking care of cross-browser issues, JavaScript frameworks make it easier to write code that retrieves, traverses, and manipulates DOM elements. Not only do they provide shorthand functions to obtain a reference to a DOM element, but they also allow for the daisy-chaining of DOM traversal functions to find parent, child, or sibling elements of any depth. Finally, the frameworks provide a series of functions that make it easier to manipulate these objects, allowing the content itself to be changed, added, or removed; or the CSS styling of classes to be manipulated to impact the look of the element.

Another important feature of JavaScript frameworks is its improved support for event handling. Cross-browser event handling can be a nightmare due to the differing implementations between browsers, so JavaScript frameworks typically wrap browser events and provide a series of useful cross-browser compatible functions for dealing with them. Some frameworks also provide a series of standardized key codes that represent keyboard-based events (such as hitting the Escape key, Return key, cursor keys, and so forth).

 

All of these features are very useful, but there is one aspect to JavaScript frameworks that has been instrumental in their recent popularity—Ajax support. Like many other aspects of JavaScript, each Web browser tends to support Ajax in a different manner, making it tedious to work with Ajax in a way that is supported across all Web browsers. Almost all JavaScript frameworks include some form of Ajax library support that usually provides Ajax request and response objects, with helpers for evaluating responses, updating DOM elements, and polling a particularly request.

 

 

Read the complete article on http://www.ibm.com/developerworks/java/library/wa-jsframeworks/index.html