AJAX by shanti12


Details Covered:
What is AJAX? Where does it fit in to CWS Bureau Holding Area application?


Hands On

Context Sensitive Help Search Filter Very Responsive Solution with Ajax - "Auto-Complete". Popular Example from Google. Locking Nice to have feature with AJAX Sample Application

1. What is AJAX? AJAX, short for Asynchronous JavaScript And XML, isn't a technology but rather a grouping of technologies. AJAX uses a communication technology (typically SOAP and XML) to send and receive an asynchronous request/response to the server, and then leverages presentation technologies (JavaScript, DOM, HTML, and CSS) to process the response. Actually, it executes a server-side method through a JavaScript call, without requiring a browser refresh. This is some thing like a mini request/response that happens behind the scenes from the user. Advantages Traditionally, a response to a user's input could only be retrieved by submitting a new request to the Web server. In some cases, developers could load all responses on the client (using JavaScript) and provide a better user experience. A common example of this technique is to dynamically load a list of states or provinces, based on a selected country. Unfortunately, in many cases, neither posting back nor loading everything into JavaScript felt correct. Either posting back created too much of a UI disconnect, or an unmanageable amount of data was required on the client (which often resulted in less-than-readable JavaScript). AJAX provides a new in-between alternative, capable of leveraging the server-based application while maintaining a esponsive feel. It provides an easy maintenance of the Application. It improves the usability of the website drastically by creating more responsiveinterfaces.

The complexity and hardness in writing, testing, debugging JavaScript is no more required for implementing a responsive interface.

2. Where does it fit in to CWS Bureau Holding Area? 2.1 Context Sensitive Help Current Approach 1. When the user clicks on a field, the page should be posted back to retrieve the corresponding help text from an xml file\Cache object and the help text should be set. 2. Load all the help text in to the webpage at client side and extract the required help text through Java Script functions when the user click on a screen element\field. Ajax Approach 1. When the User clicks on a field, a server side method call will be made to retrieve the help text from an xml file\Cache objectand would be set with out refreshing or posting the page to the server.

2.2 Search Filter The requirement A.50.10.20 says that "The search should operate on an exact match and on a ‘starts with‘ basis where items are returned if they start with the character string entered in the search criteria field." Very Responsive Solution with Ajax - "Auto-Complete". Auto-Complete behave much like the auto-complete feature of IE and many other desktop applications. It takes the user's partial input as he or she is typing it and queries the database result for matching results, presenting these results to the user. This allows the user to partially type a word and select from a list of possible choices. As the page does not get refreshed, it appears to the user as if the results are retrieved from the local box. Popular Example from Google. Please go through the Google implementation of AJAX for the above feature at the following link for better clarity. http://www.google.com/webhp?complete=1&hl=en We can also perform a Select distinct operation on the database and stored the results in Cache to avoid the database call frequently and provide faster response. The Cache could be refreshed on a pre determined basis.

2.3 Locking The requirement A.50.20.35 and A.50.20.40 says that: A.50.20.35 When a detail item is opened it should be locked to prevent two users accessing a message at the same time. A.50.20.40 When attempting to open a locked message/advice the user should be advised that the message is locked and given the name of the user locking the message. A Nice to have feature easily possible for the above requirements with AJAX. When the user selects a record in the Summary page that is being viewed by another user we display a message to the user saying that it is locked. This message could be displayed in the Context Sensitive Help section or by using a DIV tag. All the records that are requested by the current user, but being used by other users will be queued for the current user. We could use a polling system to see if any queued documents are available. Basically, this means we'll keep calling the server-side method through AJAX, with a delay, and display the results. The whole logic for implementing this could be placed in a User Control and this could be placed in all the required pages. 3. Hands On Sample Application A sample application that implements Context Sensitive Help is attached. The application is mainly meant for testing the AJAX usage, so it does not follow any standards or efficient ways of doing the same. It has just got a single webpage containing only the header\filter part. When the user clicks on the field name, it makes a call to the server method through AJAX with out refreshing the page and provide a message box with the help text.

To top