AjaxIt is one of the dynamic technology from sun microsystems used to develop dynamic interactive web applications.Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is meant to increase the web page's interactivity, speed, and usability.The Ajax technique uses a combination of: - XHTML (or HTML) and CSS, for marking up and styling information.
- The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.
- The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttp Request object to exchange data with the web server, and in other implementations, dynamically added <script> tags may be used.
- XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text, JSON and even EBML. These files may be created dynamically by some form of server-side scripting.
Like DHTML, LAMP and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies. The acronym AJAX is relatively new, but the behind-the-scenes technologies are not. Recently, AJAX technologies have gained attention, thanks to popular implementations such as Gmail, Google Maps, and Google Suggest. The key enabler of AJAX is the XMLHttpRequest object, first implemented by Microsoft as an ActiveX object in Internet Explorer 5 for Windows. A compatible native version was integrated into Mozilla 1.0, Netscape 7, and Apple's Safari 1.2 browsers. Using the XMLHttpRequest Object When used within a JavaScript on an HTML page, the XMLHttpRequest object can make asynchronous calls to the same HTTP server for other content by performing these two steps: HISTORY:The first use of the term in public was by Jesse James Garrett in February 2005[1]. Garrett thought of the term when he realised the need for a shorthand term to represent the suite of technologies he was proposing to a client[2].Although the term "Ajax" was coined in 2005, most of the technologies that enable Ajax started a decade earlier with Microsoft's initiatives in developing Remote Scripting. Techniques for the asynchronous loading of content on an existing Web page without requiring a full reload date back as far as the IFRAME element type (introduced in Internet Explorer 3 in 1996) and the LAYER element type (introduced in Netscape 4 in 1997, abandoned during early development of Mozilla). Both element types had a src attribute that could take any external URL, and by loading a page containing JavaScript that manipulated the parent page, Ajax-like effects could be attained. This set of client-side technologies was usually grouped together under the generic term of DHTML. Macromedia's Flash could also, from version 4, load XML and CSV files from a remote server without requiring a browser refresh.Microsoft's Remote Scripting (or MSRS, introduced in 1998) acted as a more elegant replacement for these techniques, with data being pulled in by a Java applet with which the client side could communicate using JavaScript. This technique worked on both Internet Explorer version 4 and Netscape Navigator version 4 onwards. Microsoft then created the XMLHttpRequest object in Internet Explorer version 5 and first took advantage of these techniques using XMLHttp. Request in Outlook Web Access supplied with the Microsoft Exchange Server 2000 release.The Web development community, first collaborating via the microsoft.public.scripting.remote newsgroup and later through aggregation, subsequently developed a range of techniques for remote scripting in order to enable consistent results across different browsers. In 2002, a user-community modification[3] to Microsoft Remote Scripting was made to replace the Java applet with XMLHttpRequest.Remote Scripting Frameworks such as ARSCIF[4] surfaced in 2003 not long before Microsoft introduced Callbacks in ASP.NET[5].In addition, the World Wide Web Consortium has several Recommendations that also allow for dynamic communication between a server and user agent, though few of them are well supported. These would include: - The object element defined in HTML 4 for embedding arbitrary content types into documents, (replaces inline frames under XHTML 1.1)
- The Document Object Model (DOM) Level 3 Load and Save Specification [1]
So Where Does Java Technology Fit In? Java technology and AJAX work well together. Java technology provides the server-side processing for AJAX interactions. It can provide this through servlets, JavaServer Pages (JSP) technology, JavaServer Faces (JSF) technology, and web services. The programming model for handling AJAX requests uses the same APIs that you would use for conventional web applications. JSF technology can be used to create reusable components that generate the client-side JavaScript and corresponding server-side AJAX processing code. Let's look at an example that uses AJAX and servlets. JUSTIFICATION:The core justification for Ajax style programming is to overcome the page loading requirements of HTML/HTTP-mediated web pages. Ajax creates the necessary initial conditions for the evolution of complex, intuitive, dynamic, data-centric user interfaces in web pages - the realization of that goal is still a work in progress.Web pages, unlike native applications, are loosely coupled, meaning that the data they display are not tightly bound to data sources and must be first marshalled into an HTML page format before they can be presented to a user agent on the client machine. For this reason, web pages have to be re-loaded each time a user needs to view different datasets. By using the Xml Http Request object to request and return data without a re-load, a programmer by-passes this requirement and makes the loosely coupled web page behave much like a tightly coupled application, but with a more variable lag time for the data to pass through a longer "wire" to the remote web browser.For example, in a classic desktop application, a programmer has the choice of populating a tree view control with all the data needed when the form initially loads, or with just the top-most level of data - which would load quicker, especially when the dataset is very large. In the second case, the application would fetch additional data into the tree control depending on which item the user selects. This functionality is difficult to achieve in a web page without Ajax. To update the tree based on a user's selection would require the entire page to re-load, leading to a very jerky, non-intuitive feel for the web user who is browsing the data in the tree.
Pros and cons
Pros:User interface:The most obvious reason for using Ajax is an improvement to the user experience. Pages using Ajax behave more like a standalone application than a typical web page. Clicking on links that cause the entire page to refresh feels like a "heavy" operation. With Ajax, the page often can be updated dynamically, allowing a faster response to the user's interaction. While the full potential of Ajax has yet to be determined, some believe it will prove to be an important technology, helping make the Web even more interactive and popular than it currently is. Bandwidth utilization:By generating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data, Ajax web pages can appear to load relatively quickly since the payload coming down is much smaller in size. An example of this technique is a large result set where multiple pages of data exist. With Ajax, the HTML of the page, e.g., a table structure with related TD and TR tags can be produced locally in the browser and not brought down with the first page of the document.In addition to "load on demand" of contents, some web based applications load stubs of event handlers and then load the functions on the fly. This technique significantly cuts down the bandwidth consumption for web applications that have complex logic and functionality. Separation of data, format, style and function:A less specific benefit of the Ajax approach is that it tends to encourage programmers to clearly separate the methods and formats used for the different aspects of information delivery via the web. Although Ajax can appear to be a jumble of languages and techniques, and programmers are free to adopt and adapt whatever works for them, they are generally propelled by the development motif itself to adopt separation between: (1) The raw data or content to be delivered - which is normally embedded in XML and sometimes derived from a server-side database; (2) The format or structure of the webpage - which is almost always built in HTML (or better, XHTML) and is then reflected and made available to dynamic manipulation in the DOM; (3) The style elements of the webpage - everything from fonts to picture placement - are derived by reference to embedded or referenced CSS; (4) The functionality of the web page is provided by a combination of (A) Javascript on the client browser (also called DHTML), (B) Standard HTTP and XMLHttp for client-to-server communication, and (C) server-side scripting and/or programs utilizing any suitable language preferred by the programmer to receive the client's specific requests and respond appropriately. Cons:Browser integration:The dynamically created page does not register itself with the browser history engine, so triggering the "Back" function of the users' browser might not bring the desired result.Developers have implemented various solutions to this problem. These solutions can involve using invisible IFRAMEs to invoke changes that populate the history used by a browser's back button. Google Maps, for example, performs searches in an invisible IFRAME and then pulls results back into an element on the visible web page. The World Wide Web Consortium (W3C) did not include an iframe element in its XHTML 1.1 Recommendation; the Consortium recommends the object element instead.Another issue is that dynamic web page updates make it difficult for a user to bookmark a particular state of the application. Solutions to this problem exist, many of which use the URL fragment identifier (the portion of a URL after the '#' [6] [7]) to keep track of, and allow users to return to, the application in a given state. This is possible because many browsers allow JavaScript to update the fragment identifier of the URL dynamically, so that Ajax applications can maintain it as the user changes the application's state. This solution also improves back-button support. It is, however, not a complete solution. JavaScript reliability:Ajax relies on JavaScript, which may be implemented differently by different browsers or versions of a particular browser. Because of this, sites that use JavaScript may need to be tested in multiple browsers to check for compatibility issues. It's not uncommon to see a JavaScript code written twice, a part for IE, a part for Mozilla compatibles. (see also Cross-platform web design).The level of IDE support for JavaScript has also been very poor in the past, though this is improving.An issue also arises if the user has switched off JavaScript support in the browser, thus disabling the functionality of the page. Accessibility:Using without incurring the cost of re-rendering the entire page in the web browser. Non-Ajax users would ideally continue to load and manipulate the whole page as a fallback, allowing the developers to preserve the experience of users in non-Ajax environments (including all relevant accessibility concerns) while giving those with capable browsers a much more responsive experience. Real-time form data validation: Form data such as user IDs, serial numbers, postal codes, or even special coupon codes that require server-side validation can be validated in a form before the user submits a form. See Realtime Form Validation for details. Autocompletion: A specific portion of form data such as an email address, name, or city name may be autocompleted as the user types. Load on demand: Based on a client event, an HTML page can fetch more data in the background, allowing the browser to load pages more quickly. Sophisticated user interface controls and effects: Controls such as trees, menus, data tables, rich text editors, calendars, and progress bars allow for better user interaction and interaction with HTML pages, generally without requiring the user to reload the page. Refreshing data and server push: HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data. A client may use AJAX techniques to get a set of current data without reloading a full page. Polling is not the most effecient means of ensuring that data on a page is the most current. Emerging techniques such as Comet are being developed to provide true server-side push over HTTP by keeping a persistent connection between the client and server. See this blog entry on Comet using Grizzly for more on the development of server push with Java technology. JavaScript technology implementations: AJAX interactions depend heavily on JavaScript technology, which has subtle differences depending on the client. See QuirksMode.org for more details on browser-specific differences. Consider using a library such as Dojo, which addresses many of the differences.
Debugging: AJAX applications are also difficult to debug because the processing logic is embedded both in the client and on the server. Browser add-ons such as Mozilla Firebug have emerged to make debuging easier. Frameworks such as the Google Web Toolkit have emerged to allow for client and server round-trip debugging. Securing resources and protecting your data: You can view client-side JavaScript technology simply by selecting View Source from an AJAX-enabled HTML page. A poorly designed AJAX-based application could open itself up to hackers or plagiarism. When providing AJAX services, you should take care to make sure that those services are made available only to those intended. See Restricting Access to Your AJAX Services for more information on protecting your services. We have seen that AJAX interactions can solve many problems. Java technology provides a good base to develop and deploy AJAX-based applications with APIs for tying in HTTP processing, databases, web services, XML processing, and business objects. With a better understanding of this interaction model, today's applications can become more interactive, providing the end user with a better experience. Using AJAX requires that you use the latest browser versions that support the XMLHttpRequest object needed for AJAX interactions. Using AJAX also requires a great deal of client-side JavaScript technology and CSS. As an application architect or developer, you will need to weigh the needs of having a rich application against browser support, architecture complexity, and developer training. As the AJAX programming model evolves, existing technologies and frameworks will make this transition easier. Er. R.Guru Yaadav M.Tech., MCSD., SCJP |
