注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

TOTO

Think and Be Different

 
 
 

日志

 
 

Ajax -- A guide for the perplexed, Part 1: Survey of Ajax tools and techniques[zz]  

2007-07-12 21:13:06|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

ajax center : http://www.ibm.com/developerworks/ajax


Gal Shachor (shachor@il.ibm.com), Senior Technical Staff Member, IBM
Yoav Rubin (yoav@il.ibm.com), Software engineer, IBM
Shmulik London (shmulikl@il.ibm.com), Researcher, IBM
Shmuel Kallner (kallner@il.ibm.com), Software engineer, IBM

10 Jul 2007

Ajax (Asynchronous JavaScript + XML) programming techniques are increasingly dominating the world of Web application development. New developers are stepping into the world of Ajax development every day, and they come from disparate development backgrounds. Part 1 of this multipart series gives you a cheat sheet of Ajax development resources from an expert team of Ajax developers at IBM?. The authors draw from their own ramp-up experiences to help you with practical information that will put you on a fast track to effective Ajax development.

Ajax is a Web application client technique that combines JavaScript, Cascading Style Sheets (CSS), HTML, the XMLHttpRequest object, and Document Object Model (DOM) (see Resources for more information on each of these standards). Ajax applications running on a browser communicate with the Web server in an asynchronous manner and only update portions of the page. By taking advantage of Ajax techniques, you can provide a rich, browser-based user experience.

Upon embarking on the Ajax journey, you need to get a handle on many different languages, standards, tools, and libraries. Navigating between the various options and assembling a development environment can be overwhelming at the beginning. The authors draw from their own ramp-up experiences to help you avoid some of the more common and irritating issues you might encounter on your journey.

The developerWorks Ajax resource center
Check out the Ajax Resource Center, your one-stop shop for information on the Ajax programming model, including articles and tutorials, discussion forums, blogs, wikis, events, and news. If it's happening, it's covered here.

Getting on board the Ajax wagon

Ajax is about changing the experience a user has on a Web site from a page-per-click experience to one with the look and feel of an interactive and nimble desktop application. Your users can avoid page reloads and avoid waiting for the next piece of content to be presented. You might be thinking that all of this sounds great, but how do you do it? To answer that, a little background about the technologies behind Ajax is helpful.

Ajax is a collection of the following several Web technologies and standards that lets you use the client's machine to run a significant portion of the application's logic behind the scenes and not just present its output:

  • Hypertext Markup Language (HTML): Defines the content that is ultimately presented to the user.
  • Cascading Style Sheets (CSS): Define the style (or decoration) of the presented content.
  • The Document Object Model (DOM): An API used by the browser to expose the presented content to JavaScript scripts. Scripts can then use the DOM to modify the content dynamically before the user’s eyes.
  • The XmlHttpRequest object: Facilitates asynchronous interaction between the browser and the server, invoked from JavaScript scripts.
  • programming language that executes inside the browser, gluing together all other Ajax ingredients. Scripts can listen to events happening inside the browser (such as clicking a button), react to them by calling back to the server with XmlHttpRequests, and later on modify the DOM tree based on the returned results.

All these technologies execute inside the user’s Web browser, which serves as the platform that executes the Ajax programs.

To use Ajax, it is important to understand that the technologies composing it, while standards-based, are browser-specific to some extent; putting it in another way, the same application might behave differently on different browsers. However, because it is neither possible to restrict users to a specific browser nor wise to ignore clients because of the fact that their browser may be CSS or DOM challenged, you, the application creator, need to understand the differences between the various browsers.

To be an effective Ajax developer, you need to:

  • Know the technologies that form Ajax development's foundation.
  • Understand the available run-time platforms and Web browsers.
  • Use an IDE that supports the various languages used while developing Ajax applications.
  • Have debuggers and application test tools available for the various environments and languages.

Information sources

One of the best Ajax tutorials out there is the Mastering Ajax series here on developerWorks, by Brett McLaughlin. This series assumes very little prior Ajax programming knowledge and walks you through various Ajax-related technologies. If you are looking to gain a better understanding of Web architecture, you may also want to get familiar with Representational State Transfer (REST). The article "How to Create a REST Protocol" (see Resources) is a good first step in that direction.

After you complete the Mastering Ajax series and start some development of your own, you will also need reference information. W3Schools (see Resources) provides online reference information for the core Ajax technologies (JavaScript, CSS, HTML, DOM, XML, and so on).

If you are using the Mozilla Firefox browser, you should use the DevEdge sidebars (see Resources). These sidebars contain indexes to standards defining the individual Ajax technologies and allow you to use them as a reference guide.

Finally, if you want to feel the pulse of the Ajax community, you should subscribe to the Ajaxian blog (see Resources).

The browser as a run-time environment

The Web browser is not only your Ajax deployment environment, but it is also your debugging environment. Most browsers can be extended with debugging aids such as DOM tree viewers or debuggers. The next section gives you an overview of these popular browsers:

  • Microsoft? Internet Explorer (IE)
  • Firefox
  • Safari

Internet Explorer

IE remains the browser of choice for the majority of users. IE6 is an aging browser with very deep market penetration. In IE6, many CSS and DOM features are not supported or are provided in a proprietary way. Developers using IE6 may encounter some of the following reported issues:

  • Slow JavaScript interpreter and inconsistent standards implementations.
  • Lack of transparent PNG support.
  • DOM events: An event may have one name in Firefox and a different name in IE. The call order of some of the events is different, and there may be a different set of attributes for similar event objects in IE and Firefox. Read more about this issue in "Migrate apps from Internet Explorer to Mozilla" (see Resources).
  • Unimplemented CSS attributes such as minimum/maximum height, selectors, and so on.

Despite these issues, you should always assume that the majority of your users are using this browser. You can also try to use various libraries such as /IE7/ (see Resources) that can provide some remedy to the IE6 quirks.

IE7 provides many visible improvements over IE6, such as tab support. For developers, the hidden improvements are more important. IE7 provides a better performing JavaScript interpreter and fixes many of the flaws in IE6 (CSS, for example) such that most standard-compliant Ajax applications should be able to run on it with very few modifications.

IE debugging aids

You can use the following tools to debug applications with IE:

  • The IE Developer Toolbar: Lets you better control the IE environment (cache, cookies), explore the DOM tree, and explore and manipulate the element’s style. This is a useful tool when analyzing the page generated by the application. (The IE Developer Toolbar is available for download from Microsoft. See Resources for a link.)
  • The Microsoft Script Debugger: Shipped with Microsoft Office (and downloadable from Microsoft, see Resources), lets you place breakpoints in your JavaScript code, watch variables, and in general perform regular debugging routines. Note that when debugging, it is recommended to disable the cache via the IE Developer Toolbar before every debug session or you will be debugging cached versions of your code.

IE related browsers

You can use Trident, an IE browser engine, to create "new" browsers such as maxthon. New is quoted here because from a developer perspective, the browser's key attributes (such as its Ajax support) stay the same. (Learn more about Trident in Resources).

A word of caution: Browsers are not sealed
Browsers are increasingly becoming a target for add-ons. Users can download and install popup blockers, tab managers, UI themes, and other add-ons. Many can affect Ajax programs in unexpected ways that can be very hard to reproduce and thus debug. A simple example is a scenario where a user sets up his or her popup blocker to block new browser windows that are opened from an application. This seemingly harmless add-on, however, can impact an application in a way that isn't immediately obvious, such as by consuming browser window real estate and hiding parts of an application.

Mozilla Firefox

While several Firefox versions have been released to date, this discussion covers only Firefox 2.0. Firefox is very commonly used by developers and power users, is the browser of choice for UNIX?-type operating systems, is open source, and is second in popularity to IE.

Firefox has a fast JavaScript interpreter and a very good implementation of the various Web standards. Because of its Ajax friendliness, we highly recommend using Firefox for most of your Ajax development. In general, many Ajax developers start their application development on Firefox and later migrate it to other browsers.

Firefox debugging aids

Firefox has a powerful and open extension mechanism that was used by its community to create a large set of Web development aids. However, Firebug (see Resources) is by far the most important of them all. (For more details about the capabilities of Firebug, take a look at "Ajax Debugging with Firebug.") Firebug is an all-in-one extension that lets you:

  • Debug JavaScript code with breakpoints, with variable monitoring, and by stepping through the code.
  • Review network traffic.
  • Review and tweak the DOM tree and the CSS of the various elements.

The strength and flexibility of Firebug 1.0 signified a landmark in Ajax development and are good reasons to use Firefox as a preferred development browser.

Firefox-related browsers

Mozilla Gecko (see Resources), the Firefox layout engine, is used within several browsers such as Camino. These browsers exhibit the same capabilities as Firefox, with a matching Gecko version.

Safari

Safari is the browser that ships with MacOSX (and as of release 3 is also running on Windows?). While noticeably faster than Firefox and IE7, when compared, Safari lacks in standards support (although the latest WebKit builds show improvements; the next section gives more details on WebKit). Note also that the Safari developer community is noticeably smaller than those associated with Firefox and IE. As a result, there is also less information about it on the Web and many libraries are not well tested on Safari.

Safari debugging aids

The Safari browser engine is developed in an open source project called WebKit (see Resources). To debug your application in Safari, we recommend using a WebKit build. The build includes:

  • A stripped down browser with CSS and DOM inspector.
  • Drosera: A JavaScript debugger. Drosera lets you debug applications but is limited in features when compared to Firebug.

If you insist on testing your application in Safari, you can turn on the Safari Debug menu, which allows you to inspect the DOM tree, CSS, the cache, and so on.

Safari-related browsers

WebKit is used in several browsers, most noticeably OmniWeb.

Ajax IDEs and tools

When you develop new Ajax applications, it will become clear to you the benefit of using an IDE that supports all Ajax-related technologies and provides a quick and pleasant development environment and UI. Some of the features to look for when you choose an Ajax IDE are:

  • Syntax-directed editing (for HTML, CSS, JavaScript, and the DOM) with features such as auto complete, color highlighting, error indications, and so on
  • Related documentation for the various technologies
  • An integrated JavaScript debugger
  • Network monitoring
  • DOM introspection
  • Framework integration

While you might consider an IDE for purchase, Eclipse and its related plug-ins provide a fully functional, open source-based Ajax IDE, which you can download for no charge. This section covers the following Eclipse-based Ajax IDEs, including add-ons:

  • Eclipse with the Web toolkit
  • Eclipse ATF
  • Aptana

This section also covers the JsUnit unit testing package.

Eclipse with the Web toolkit

If you are a Java? developer and have server-side Java responsibility, the Eclipse Web toolkit may be a simple and easy way to start basic Ajax development. Adding Eclipse's Web tools (see Resources) gives you a basic working environment for developing Web artifacts and provides editors and editing tools for HTML, CSS, and JavaScript files.

Note that the Eclipse Web tools environment is not limited to Ajax development, but rather supports Web application development with a server-side emphasis. Thus, it provides core functionality such as syntax highlighting and basic code completion. It does not provide debugging capability or DOM manipulation, which are Ajax-specific development tasks.

The Eclipse ATF

You can install and thus combine the Eclipse Ajax Toolkit Framework (ATF) environment (see Resources) with the Eclipse Web toolkit, resulting in a powerful environment that supports all aspects of your Ajax development needs. The ATF offers features such as:

  • A DOM browser and CSS runtime editor
  • A JavaScript debugger (by leveraging the Mozilla XUL runner)
  • Network traffic monitoring
  • Simple library integration for common libraries through library profiles
  • Integration with JSLint (see Resources) to perform JavaScript validation

A valuable feature of this toolkit is the ability to run, test, and inspect your application in the integrated XUL runner.

Aptana

Aptana (see Resources) is a very useful open source, Eclipse-based environment that you can download free of charge. Unlike the ATF, whose tools specifically target Ajax development, Aptana is an IDE for developing Web 2.0 applications. Aptana has acquired the Ruby Development Toolkit (RDT), providing Ruby-Eclipse integration.

You can download Aptana either as a complete Eclipse environment (which makes things very simple compared to the ATF option) or as a set of plug-ins to be added to an Eclipse environment that has been previously set up.

The Aptana environment offers several useful features, such as:

  • High-quality users' guide and technology reference documentation
  • A complete editing environment for Ajax artifacts with JavaScript code analysis, DOM integration, and browser compatibility information
  • Debugging capability using an external Firefox browser
  • Basic Ajax library integration
  • A code validation system that marks potential errors
  • The ability to edit any location on the file system as well as remote files using FTP

You might find that Aptana is a solution for your development needs that is simpler to install and learn than ATF.

JsUnit

JsUnit (see Resources) is a JavaScript-based unit-testing framework that was created by porting JUnit (a common Java unit testing library) to JavaScript. JsUnit supports both the definition of test cases for JavaScript functions and running them inside a browser environment. If you seek a way to perform consistent unit tests of developed code, JsUnit can be a useful framework.

Ajax frameworks

Many Ajax development frameworks have recently emerged, with the goal of easing potentially tedious Ajax development tasks. This section reviews several nascent open source Ajax frameworks that can make your job easier by:

  • Providing a collection of widgets that serve as building blocks for a rich Web user interface (UI)
  • Simplifying asynchronous data interaction and transfer protocols
  • Easing any cross-browser incompatability
  • Providing useful JavaScript methods that simplify many common Ajax development tasks, such as DOM manipulation and event registration, among others

Because covering the myriad of Ajax frameworks available is beyond the scope of this article, we've chosen to detail only Prototype, script.aculo.us, Dojo, and Rico. For a more comprehensive list of available Ajax frameworks and their usage, see the Ajaxian.com 2006 survey (see Resources for a link).

Prototype

Prototype (see Resources) is a JavaScript library that introduces powerful functions to help simplify Ajax programming. While it may not be considered as an Ajax framework itself, it lies at the core of several other frameworks, such as script.aculo.us, Moo.fx2, Rico, and others. Prototype supports:

  • Basic DOM manipulation
  • Ajax calls
  • A handful of utility functions
  • Working with input fields and forms

Prototype, developed by Sam Stephenson, was inspired by the Ruby programming style and is now an open source project under the Massachusetts Institute of Technology (MIT) license (see Resources).

An example Prototype scenario

The following is an example scenario of how using Prototype can simplify Ajax programming. Imagine you have a requirement for a page with a section that will refresh periodically and display the most recent news. You set a timer to call the method updateNews() once a minute. In the updateNews() method, you use Prototype Ajax.Updater to issue an asynchronous request for the latest news content. When the result is received, it is inserted as the HTML content of the div element most-recent-news. Listing 1 demonstrates one example of the many powerful functions provided by Prototype:


Listing 1. Example Prototype scenario
                
<html>
<head>
<script type="text/javascript"></script>
<script type="text/javascript">
function updateNews() {
new Ajax.Updater(
{success: 'most-recent-news'},
'http://myserver/news/recent-news'
);
setTimeout("updateNews()",60000);
}
</script>
</head>
<body >
<h1>Recent News</h1>
<div ></div>
</body>
</html>

Without the use of Prototype, this example scenario would have required many more details and much more coding effort.

Script.aculo.us

Script.aculo.us (see Resources) is an open source project under the MIT license. It is built on top of Prototype and is included with Ruby on Rails. Script.aculo.us is a popular framework for developing rich Web-UI Rails applications, but you can also use it with any other server-side technology. Script.aculo.us, while described as a rather thin framework, has strong animation capabilities, as well as the following features:

  • Shallow DOM manipulation with a JavaScript-based DOM builder
  • Drag-and-drop support
  • A few controls and widgets, such as autocomplete, slider, and in-place editing

Listing 2 gives you an example of the use of Script.aculo.us's powerful animation effects, where a line of text, when clicked, gradually fades out of sight:


Listing 2. Script.aculo.us animation effects
                
<script type="text/javascript"></script>
<script type="text/javascript"></script>
...
<div Effect.Fade(this)">
Click here to see me fade out!
</div></html>

The Dojo Toolkit

The Dojo Toolkit (see Resources) is a comprehensive Ajax framework that meets a broad set of needs. Dojo provides:

  • Cross-browser stdlib for JavaScript
  • DOM manipulation
  • A packaging system to optimize download time and size
  • A rich and extensible set of widgets
  • Drag-and-drop support
  • Animation support
  • A very rich server-side integration library

One of Dojo’s strong selling points is that its widgets are extensible, enabling you to create composite widgets from simpler ones. Therefore, unlike most Ajax libraries and frameworks, Dojo guides you toward a specific programming model that, if followed, lets you design your Web interface in a manner that can resemble desktop GUI programming.

Dojo is being developed as an open source project by the Dojo Foundation and is provided under the Academic Free License (see Resources). A very active project, Dojo is supported by major corporations such as IBM, Sun Microsystems, AOL, and others.

Figure 1 shows a screenshot of a mail application demo that uses Dojo. You can see that Dojo provides tree, table, and many other widgets that help you create a desktop-like UI. It also simplifies the interactions among these widgets.


Figure 1. Sample Dojo interface
Sample Dojo interface

The Rico framework

Rico is an open source Ajax framework provided under the Apache 2.0 license (see Resources for links to the Rico Web site as well as a link to a description of the Apache 2.0 license). It packs considerable value into a relatively small footprint. Some of Rico’s most prominent features are:

  • Extensive DOM manipulation using a template
  • Various widgets, such as accordion, LiveGrid, and pull down
  • Drag-and-drop support
  • Simple animation
  • Utilities to round corners, manage colors, and other appearances
  • Simple server-side integration

Although Rico includes fewer functions than the Dojo framework, if the available functions meet your UI development needs, Rico's compact footprint can be an advantage. In particular, Rico's LiveGrid widget can make the common task of creating dynamic tables very simple.

Beginner's roadmap -- get started now

If you're ready to jump onto the Ajax development wagon, the following roadmap gives you a list of steps to get you started. (Note: This roadmap uses Aptana as the IDE and Dojo as the Ajax framework, but you can change the configuration to suit your needs.)

  • Download Mozilla Firefox 2.0 and install the Firebug plug-in.
  • Download and install Aptana.
  • Following the “Mastering Ajax” tutorial, write the code samples in Aptana. Debug the examples in Firebug as you go.
  • Download the Dojo Toolkit and go through the Dojo “Hello World” tutorial (see Resources).

Summary and next steps

At this point, you probably have more than enough Ajax application development tool information to chew on, and if you've followed the beginner's roadmap mentioned here, you have a bit of practical, hands-on experience with Ajax applications. So what's next? Reading in-depth about Ajax-related technologies and choosing and reading about an Ajax framework to use will help you build your knowledge base. There is a lot of material out there on HTML, JavaScript, and CSS (see Resources for a link to W3School tutorials, which are a good place to start). You should also go through the Ajax Patterns site (see Resources). And nothing gets you started faster than getting started -- test the waters by writing an application of your own.

The next article in this series will guide you through putting your newly gained Ajax development knowledge into practice by developing a simple Dojo-based blog reader. Not on board the Ajax wagon yet? You will be soon. Stay tuned!



Resources

Learn

Get products and technologies
  • Download the IE Developer Toolbar and the Microsoft Script Debugger from the Microsoft Download Center.

  • Adding Eclipse's Web tools gives you a basic working environment for developing Web artifacts, and provides editors and editing tools for HTML, CSS, and JavaScript files.

  • Learn more about and download the Eclipse Ajax Toolkit Framework (ATF).

  • Aptana is a useful open source, Eclipse-based environment that you can download free of charge.

  • JsUnit is a JavaScript-based unit-testing framework that was created by porting JUnit (a common Java unit testing library) to JavaScript.

  • JSLint is a JavaScript program that looks for problems in JavaScript programs.

  • Prototype is a JavaScript library that introduces powerful functions to help simplify Ajax programming.


Discuss
  • If you want to feel the pulse of the Ajax community, subscribe to the Ajaxian blog.



About the authors


Gal Shachor is an IBM Senior Technical Staff Member and researcher working at the IBM Haifa Research Lab, on various topics related to middleware and rich Internet applications.



Yoav Rubin holds a B.Sc. in Information Systems Engineering from the Computer Science faculty in the Technion, Israel Institute of Technology, and for the last seven years, he has been working as a Software engineer in IBM Haifa Research Lab, mostly in the fields of visual application development tools and complex event processing. His main interests are Java and Web technologies, simplified programming, and usability.



Shmulik London is a researcher working at IBM Haifa Research Lab. His current professional interests are software component models and Web 2.0.



Shmuel Kallner holds a B.Sc. in Information Science from Yeshiva College, New York, NY. For the last 26 years, he has been working as a software engineer at various locations in IBM, most recently at the IBM Haifa Research Lab. He has worked in the fields of databases, client server applications, and Java telephony servers. His main interests are Java and Web technologies, simplified programming, and usability.

  评论这张
 
阅读(244)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017