This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
By Heidi Kriz | Also by this reporter14:30 PM Oct, 20, 1998The king of toothpaste, soap, and household cleaners has backed away from its demand that a small,noncommercial Web site change its domain name.Benjamin Kite, co-founder of Ajax.org, is convinced that an Internet campaign -- which threatened a boycott ofColgate-Palmolive products -- brought the consumer products giant to its knees. The company said that it backeddown for other reasons.
In the typical web application, each request causes a complete refresh of the browser page
An Ajax application begins the same way.
After the initial page loads, JavaScript code retrieves additional data in the background and updates specific sections of the page
AJAX is a particular method of using JavaScript, DHTML, and the XMLHttp behavior in the browser to provide dynamic content on a Web page without a page refresh
The AJAX programming model focuses on the client; most AJAX applications are completely agnostic to the server (could be J2EE, PHP, ASP.Net, REST, SOAP, etc.)
Making an Asynchronous Request/ResponseCreate XMLHttpRequest Object:xmlhttp = new XMLHttpRequest() (Mozilla)xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") (Internet Explorer*)
Set callback function:xmlhttp.onreadystatechange = <function name>
Open URL:xmlhttp.open(<"GET“ | “POST”>,<URL>,true)xmlhttp.send(<optional post data>)
*In IE7, ActiveX objects are disabled by default. The XMLHttpRequest, however, will be natively supported.
Response Callback Handler:
function callback() {if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {data = xmlhttp.responseXML//do something with data
}else {
//handle error}
}}
The text of the response data is also available through the responseText attribute
Document Object ModelBrowser stores data (HTML, XML, CSS) as a hierarchical collection of nodes exposed through DOM interfaceAllows page content to be modified programmatically through javascript.Node Types
Element – equivalent to XML elements <…></…>
Attribute – equivalent to XML attributes name=“value”
Text – equivalent text between XML elements<…>text</…>
•For client-side Ajax, the application server usually requires no additional Ajax-specific server software.
•All Ajax transformations come from the client-side Ajax runtime library.
•One advantage of this option is the independence from the server side technology. The server code creates and serves the page and responds to the client's asynchronous requests. This way either side can be swapped with another implementation approach.
Server-side transformations An Ajax server component performs most or all of the Ajax transformations into appropriate client-side HTML+JavaScript.
Often, the server-side Ajax toolkit downloads its own client-side Ajax library which communicates directly with the toolkit's server-side Ajax component.
Benefit:It allows the use of server-side languages for debugging, editing, and refactoring tools with which developers are already familiar, but at the price of dependence on a particular server-side technology.
In the typical web application, UI component runs on server and uses services provided in the server container in rendering page fragments
Example services: Identity Mgmt,Authentication & Authorization,Preferences/Personalization,UI Extension, etc.
In an Ajax application if the UI in the browser needs the same services, they must either be exposed remotely (server round trip to service), or else traditional-style rendering on server can be used for page fragments (server round trip for rendering UI)
This means that traditional container services used by portlets can be REST-enabled for use by AJAX and thick clients, and still be used by traditional web UI’s
The AJAX Toolkit Framework is a proposed open source project under the Eclipse Technology Project.http://www.eclipse.org/atf/
ATF will provide extensible frameworks and exemplary tools for building IDEs for the many different AJAX runtime offerings (Dojo, Zimbra, etc) in the market.
These frameworks will contain features for developing, deploying, debugging and testing AJAX applications.
ATF will provide for the development and incorporation of additional AJAX development tooling.
ATF will use existing Eclipse extensions for web application deployment so that the environment will be "server agnostic“
Initial adapters will include a J2EE / JSP adapter and an Apache / PHP adapter.
Grow Ajax adoption to the next phaseEvolve tools that significantly reduce the development costs & skills of incorporating Ajax into a broad range of web applications
Growing usage of Ajax in applications will foster innovation in open source frameworksThe community & applications produced will enable Ajax future functionality
Through the looking glass - innovation will lead to consolidation around a few Ajax personalities - i.e:
• Web Developers - rich(er) desktop interactions thru the browser
Open Ajax - Industry CollaborationThis group will support the development of open Ajax technologies & tooling
IBM is proposing to contribute a tooling framework & Eclipse plug-in for Ajax toolkits (Ajax Toolkit Framework)
• “…toolkits can be supported in less than 30 minutes…”
Zimbra is working with Apache on Kabuki - an Ajax toolkit; (Eclipse Ajax Toolkit Framework support included)
Dojo - an open source JavaScript/Ajax toolkit that enables users to create rich, lightweight UIs; (Eclipse Ajax Toolkit Framework support included)
Mozilla™ - IBM is proposing to contribute code to Mozilla™ to enable Eclipse developers to employ Mozilla™ & Mozilla's debugging capabilities within Eclipse
This group will support the development of open Ajax technologies & tooling
IBM is proposing to contribute a tooling framework & Eclipse plug-in for Ajax toolkits (Ajax Toolkit Framework)
• “…toolkits can be supported in less than 30 minutes…”
Zimbra is working with Apache on Kabuki - an Ajax toolkit; (Eclipse Ajax Toolkit Framework support included)
Dojo - an open source JavaScript/Ajax toolkit that enables users to create rich, lightweight UIs; (Eclipse Ajax Toolkit Framework support included)
Mozilla™ - IBM is proposing to contribute code to Mozilla™ to enable Eclipse developers to employ Mozilla™ & Mozilla's debugging capabilities within Eclipse
Simple and lightweight JavaScript library Central facility for different Ajax toolkits to:
prevent JavaScript and HTML/XML markup collisions and to provide appropriate bridging
The four main interoperability issues initially addressed are :1. JavaScript collision checking, 2. toolkit loading 3. markup mixing and 4. event management. OpenAjax Hub will consist of
detailed specifications and open source JavaScript code.
Hotel availability searchThis function tests the ‘autocomplete’ for entering a hotel location. After input of 2nd letter the server is contacted for suggestions and autocompletion of the entry.Subsequent db for hotel details can provide an undefined large number of result rows. This scenario will be used to validate various backend-access strategies
Show the location of hotel(s) on a map Drag & drop function for hotel search and display of Google map
Display Hotel DetailsIn ‘mouse-over’ on map details of hotels will be fetched from backend and displayed
Hotel Result Set sortSort strategy for various result sets will be evaluated
More productive end-users, lower bandwidth, and strong ROI In most businesses, decision makers are interested mainly in how information technology can increase revenue, reduce costs, or make better use of information assets. Among the factors that are considered:
1. Time spent waiting for data to be transmitted. Over many repetitions, the time employees spend waiting for pages to load can add up to significant costs. 2. Time spent completing a particular task. Inefficient user interfaces can translate into long periods of lowered end-user productivity. 3. Bandwidth consumed for the entire task. If repetitious tasks consume considerable bandwidth, IT costs can grow dramatically.
Different performance of browsers on datagrids (for the same Ajax toolkit)
Do or Don’t use browser caching ?
IE is much slower than Mozilla on –Have seen different performance on handling data grids – I.E. much slower than Mozilla, sometimes up to 2 times !!
Other observations:Zimbra
Has a different programming model than Dojo, might be preferential to some users with this backgroundHas many widgets - more than one can use, but ugly to modifyIs all JavaScript, much more difficult to find individual components within the JavaScript implementation
Difficulties with JavaScriptBrowser inconsistenciesPoor tool support for JavaScript and CSS Lack of established programming practices and design patternsSkillset: Web Developers != Java Programmers != COBOL Programmers
UI IssuesBack button doesn’t work as expectedBookmarking doesn’t workAccessibility & Internationalization
Performance IssuesLatency bigger problem when making multiple requestsIncreased load on browsers
IBM has contributed to the W3C Protocols and Formats group technology that allows the creation of fully accessible Web components.Two emerging standards from this roadmap
States and Adaptable Properties ModuleRole Taxonomy for Accessible Adaptable Applicationsare designed to address the accessibility of RIAs
IBM will be providing expertise to integrate Dynamic Web Accessibility (from W3C) into the Dojo Toolkit widget set. Dynamic Web Accessibility provides a mechanism for creating RIAsthat are:
fully accessible via the keyboard and when using assistive technologies