JavaScript, the Ajax Web service client language

In this tip, William Brogden discusses JavaScript and its popularity as a scripting language.

These days JavaScript's main claim to fame is the J in Ajax (asynchronous JavaScript and XML), but as a scripting language it has been popular for years. The scripting language started life as "LiveScript" in Netscape Web browsers, living in the environment of the browser and manipulating the browser display. At about the time Netscape added Java applet capability, some marketing genius decided to rename LiveScript to JavaScript. The...

confusion this has caused over the years is mind-boggling since there is only a superficial similarity of syntax.

In competing with the Netscape browser, Microsoft created its own version called JScript, the beginning of the slight incompatibility between browsers that plagues developers to this day. The first relevant technical standard, known as ECMA-262, was created in an attempt to provide a common API. Formally speaking, we should be talking about ECMAScript instead of JavaScript, but the usage never caught on. Ecma International is a standards organization previously known as European Computer Manufacturers Association.

As a technology for creating a rich user experience, JavaScript has great advantages over competing technologies such as Flash, ActiveX Objects and Java applets. Because JavaScript in the browser is intimately connected to all of the components that make up a Web page, the evolution of JavaScript has profited by all the technologies such as CSS which have been developed to create the modern Web browser.

The Document Object Model and XHTML

The Document Object Model or DOM lets JavaScript locate and change the content and display characteristics of all elements of an HTML page. Unfortunately early browser development proceeded without a DOM standard so each vendor had its DOM terminology. The W3C formal specifications at the "Level 1" and "Level 2" DOM recommendations are implemented by modern browsers and make Ajax development possible. XHTML is simply a refinement of HTML that causes a greater degree of predictability on the use of HTML tags by enforcing XML syntax.

Cascading Style Sheets

The central idea of Cascading Style Sheets or CSS, is to separate the control of presentation from the content of HTML elements. When correctly applied, CSS provides for consistency of appearance of all pages on a site, greater ease of authoring, as well as a reduction in bandwidth. The "cascading" principle allows a general style to be overridden for special purposes. JavaScript can directly manipulate the components of the DOM that control CSS presentation. As with the DOM, although there are official W3C recommendations for CSS, browser compliance is not 100 percent.

Events and Asynchronous Requests

An essential JavaScript feature is the ability to execute code in response to events. For example, the often used change in the appearance of an HTML element such as a button when the user's mouse moves over it because an onmouseover() function has been attached to the button. In that case, all the action is local to the browser.

The essential tool by which JavaScript gets Web service or other data asynchronously is the XMLHttpRequest. JavaScript gives such a request its own thread of execution so that all normal browser event handling can proceed while the request object is waiting for a response. The programmer has to supply a function which will be automatically called at various points during the processing of the request. Eventually you either get an error or a completed response.

If the server sends text in the form of an XML document, the request returns a DOM object from which data can be extracted using the JavaScript methods that deal with HTML. This data might then be substituted for existing text in the HTML page when it is received or simply held in anticipation that it will be needed.

Writing JavaScript

As a scripting language, JavaScript is executed by an interpreter that works from the program text held by the browser. Although slower than executing compiled code this is a virtue for Ajax applications because program text can be assembled from a variety of sources. The Ajax approach allows you to combine JavaScript data unique to a particular user written on the fly into the script sections of a Web page with standard libraries brought in from external code sources. Standard library code, like standard CSS style sheets, can be cached by a Web browser to further reduce the bandwidth requirements.

Potential Problems for Ajax

There is an important difference between JavaScript programming for single Web pages as it has been done in the past and Ajax programming. In many people's vision of Ajax application programming, a single base Web page will hold extensive JavaScript code and collections of objects for an extended period while HTML data is loaded and displayed dynamically. This is in contrast to previous use patterns in which new Web pages with new code and objects are frequently loaded. Although JavaScript recovers memory from discarded objects, it is possible for poorly written code to accidentally hold on to object references thus causing a "memory leak." This error would not cause a problem in a short-lived page, but would if the page has a long lifetime.

For security reasons, JavaScript is normally restricted to making requests from the host that provided the original Web page. Therefore, if you want to combine material from various Web services, you may have to design your system so that the server makes the request and relays the data to the JavaScript client.

Another potential problem has to do with indexing by search engines. Content that is generated dynamically by Ajax interacting with the user will not be visible to search engine robots.

Tools

You should not try to work with Ajax without a browser tool that lets you inspect the DOM representation of an HTML page. The Firefox browser is ideal for this because it includes the "DOM Inspector" tool as a menu option. The DOM Inspector window lets you browse through the entire hierarchy of a page, including the JavaScript and CSS elements. Furthermore there are numerous Firefox plug-ins available for debugging JavaScript.

Every time a new technology gains a big shot of publicity and industry buzz, suppliers to meet that need spring up. Large numbers of Ajax toolkits combining JavaScript libraries and custom user interface components are making their appearance. Some of these toolkits are commercial and some are open source. The field is changing way too fast for me to make any toolkit recommendation.

References

The Ajax book I recommend is "Ajax in Action" by Crane, Pascarello and James, published by Manning, ISBN 1-932394-61-3.

For a compact summary of the state of ECMAscript standard usage in various environments consult the Wikipedia entry: http://en.wikipedia.org/wiki/ECMAScript

For the current state of DOM standardization see: http://www.w3.org/DOM/

For the current state of CSS standardization see: http://www.w3.org/Style/CSS/

See SearchWebServices' Ajax Learning Guide collection of Ajax resources


This was first published in April 2006

Dig deeper on Ajax and RIA (Rich Internet Applications)

Pro+

Features

Enjoy the benefits of Pro+ membership, learn more and join.

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchSoftwareQuality

SearchCloudApplications

SearchAWS

TheServerSide

SearchWinDevelopment

Close