Technical Case Study
Ajax
Ajax or AJAX – abbreviated form of ‘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 is accessed with a client-side scripting language especially ECMA Script implementations such as JavaScript and JScript to dynamically display and interact with the information presented.
- The XML Http Request 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 XML Http 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. Some form of server-side scripting may create these files dynamically.
It is the use of the nonstandard XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events.
The two features in question are:
The two features in question are:
- Make requests to the server without reloading the page
- Parse and work with XML documents
hai
A brief history of AJAX
The main drawback with web applications in comparison to thick client Windows applications is the constant need to refresh a page when new content is available. Often, only certain sections of a web page need to be refreshed. But the application refreshes the whole web page to ensure that all the data is presented. If an application could avoid these page refreshes, the end user’s experience of web-based applications would be enhanced immensely. Avoiding constant refreshes also provides better application performance as full post backs are avoided.
Developers have tried various techniques over the years to achieve the goal of avoiding or reducing page refreshes. Realizing the importance of such a feature, Microsoft provided Microsoft Remote Scripting, which required the programmer to use a Java applet to achieve the capability. As technology evolved, Microsoft then introduced the ‘XML HTTP Request’ object as part of its MSXML object library, which is Microsoft’s API for processing XML-based data. The implementation of the ‘XML HTTP Request’ object was a joint development effort between the Outlook Web Access (OWA) Team and the Web Data team for SQL Server at Microsoft.
Figure 2: The traditional model for web applications (left) compared to the Ajax model
How Ajax is Different
An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.
Figure3: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).
Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.
An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.
Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something..
Figure3: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).
High-level facts and features about Ajax:
- It is a collection of mature, web-oriented programming technologies.
- It is a cross-browser and cross-platform opportunity to write web applications.
- Ajax works with most standard web browsers and web servers.
- A web site delivered using Ajax can exhibit similar behavior to thick-client applications, improving usability.
- Ajax delivers additional information to a browser on button or mouse activity without the need to refresh the entire web page through a component.
- Ajax is difficult to code out-of-the-box (es) as it uses disparate components. This is a major barrier to the wide deployment of Ajax-based applications.
- ASP.NET AJAX enables you to take full advantage of the capabilities of the browser to deliver richer web experiences that work on any modern browser
- ASP.NET AJAX enables ASP.NET developers to enrich their existing web applications with incredible ease
- ASP.NET AJAX includes a rich client-side JavaScript framework that enables easy creation and reuse of script components and rich client-side behaviors.
- ASP.NET AJAX makes it easy to consume services from ASP.NET and to build composite applications from services on the programmable web.
- Enables AJAX for ASP.NET controls without using any additional panels or controls placed on the ASP.NET form.
- Supports all browsers which lack required features owing to a graceful automatic degradation to the classic ASP.NET mode. Thus, Ajaxium-powered sites work even when JavaScript is disabled or the browser doesn't support the XmlHttpRequest object.
- Ajaxium-powered sites are indexed by all search engines. This is achieved by a graceful degradation to the classic ASP.NET mode performed automatically for all remote clients who have no JavaScript support. Since search engines ignore all JavaScript code, they do not see Ajaxium at all. Being invisible and leaving HTML source untouched, Ajaxium helps search engines to index the website.
- There is no need for developers to define explicitly which panels must be updated even for optimization purposes. Ajaxium automatically detects changed regions and performs an optimal update of single panels, multiply panels or the whole ASP.NET form. Ajaxium even automatically rewrites the entire document content if changes occur outside the form and document body (for example, in the document header).
- Even if additional panels are used to reduce page flickering in old browsers, Ajaxium always analyzes the whole content of the web page. If updates must be applied outside all defined panels, Ajaxium applies them for the ASP.NET main form or rewrites the entire document.
- Supports transition from one ASP.NET page to another.
- Allows you to use traditional ASP.NET postbacks with AJAX in any combinations.
- If a server-side error occurs or if the server returns an unexpected response (for example, a default error page), Ajaxium replaces the current document with a returned response, making the response accessible to the developer.
- Supports all ASP.NET server-side features and technologies, including data binding, session states, authorization, etc.
- Supports ASP.NET cookie less sessions. As a result, applications that do not use cookies can be just as well AJAX-enabled.
- Capable to revert to a traditional ASP.NET - both at run-time and during each separate session.
- While storing required information in the session state, Ajaxium gracefully handles session timeouts and all related pitfalls.
- Compresses view state and reduce HTML traffic.
Ajax is an engine that uses JavaScript proxies to call server-side Web Service methods.
- Use AJAX with Web Services.
- Built upon JavaScript client proxy methods for standard web services. (Just call a regular JavaScript method to call a method on the server).
- Standard SOAP and WSDL is reused for the communication between client and server.
- No need for special implementations in Web Services.
- Multiple types, Arrays and XML objects are supported as parameters and return values.
- Caching on the client and server.
- Queuing actions.
- Delaying actions.
- Many AJAX Controls available that integrate in standard ASP.NET Web Forms.
ASP.NET programming while offering AJAX features.
- Internally ComfortASP.NET is using AJAX (DHTML, JavaScript, XMLHTTP) to implement these features - but the Web Developer only implements pure Server Side ASP.NET!
- Automatically transfers only changes between ASP.NET postbacks, this leads to:
- Significant faster response for low bandwidth connections
- Reduce HTML traffic (up to 90%, depending on new post back data)
- Reduce page reloads and use hidden postbacks instead
- AJAX / DHTML-like client experience (but without programming any AJAX / DHTML directly)
- Keep browser history free of post back entries ("Back Button" no more irritates your users)
- Auto disable form and prevent user input while post back or multiple form postbacks
- Control web client scroll position and focus from server side code
- Switch back at all times to original ASP.NET when you need it -- even dynamically at runtime
- Not supported by Mono
Ajax-enabled web server controls that act as replacements for most standard Microsoft ASP.NET controls
- Design-time and runtime model and interfaces of Live Controls match the standard Microsoft controls to reduce the learning curve for incorporating Ajax into an ASP.NET application
- Supports Visual Studio 2002, 2003 and 2005 as well as .NET Framework 1.x and 2.0
- Additional controls such as Live Timer and Live Sound extend the Windows control model to the ASP.NET platform
- Includes a Live Callback control for advanced or custom integration with other 3rd party products and libraries
- Commercial product shipping since December 2004.
MagicAjax.NET is an open-source framework designed to make it easier and more intuitive for developers to integrate AJAX technology into their web pages, without replacing the ASP.NET controls and/or writing JavaScript code.
- Just make the initial setup, put the controls you want to Ajax-enable inside an Ajax Panel and you're done!
- Many other features also available if you really want the advanced features as well.
- Open-source license (LGPL) by various contributors.
- Version 0.2.2 worked with mono; version 0.3.0 does not appear to.
- Version 0.3.0 works with .NET 1.1 and .NET 2.0.
- Toolbox support in Visual Studio 2003 and 2005.
Outpost hijacks the form post back event and
- tells the server to execute the post back locally on the server,
- an optimized DHTML-response is sent back to the client,
- the page is updated using cross-browser DHTML and
- Page reloads and flickers are thereby eliminated.
Bandwidth usage is minimized by
- diff-comparing two consecutive responses,
- keeping state on server,
- keeping is framework light,
- compressing the response,
- sending optimized DHTML and
- Not using Xml or JSON.
Features
- No custom controls needed
- No update panels required
- No JavaScript/DOM skills required
- Write ASP.NET like you are used to
- Design your page like you are used to
- Internal HTTP-compression
- Multiple flakes on same page
- One line of code enables Ajax
- Pages can be included in other pages
- Add form using client-scripting
- Cross-form posting
Supports
- ASP.NET 1.1 & 2.0 controls
- Session state
- View State
- Caching
- Uri redirects
- Server events
- Most browsers
- Form authentication
- HTTPS
Options
- Simulate onload event on postbacks
- Simulate onunload event on postbacks
- Simulate onbeforeunload event on postbacks
- Keep/reset client-side events on postbacks
- Show/hide View State
- Show/hide Event Validation
- Turn compression on/off
Examples: We used the Ajax technology in the web site www.cms.c-support.com. Some pages are:
In the above screen(image2) we implemented Ajax for changing the favorite status of name and projects, delete a to do, delete a note and select appointments in today, this week, this month etc.
Here we implemented Ajax for editing name, show as, groups, settings, job title and to create a new note/call, contacts.
Ajax technology used here to create/edit a todo. The pop ups are also presented in a new style using this technology.
Here Ajax technology for creating a new appointment. User can select the and ‘appointment’ repeating tab without post back.
