Introduction:

Ajax is not a programming language or a tool, but a concept. Ajax is a client-side script that communicates to and fro from a server/database without the need for a postback or a complete page refresh. The best definition I have read for Ajax is “the method of exchanging data with a server, and updating parts of a web page – without reloading the entire page.” Ajax itself is mostly a generic term for various JavaScript techniques used to connect to a web server dynamically without necessarily loading multiple pages. In a more narrowly-defined sense, it refers to the use of XmlHttpRequest objects to interact with a web server dynamically via JavaScript.

Classic VS Ajax used Web application:

Benefits of Ajax:

There are 4 main benefits of using Ajax in web applications:

1. Callbacks: Ajax is used to perform a callback, making a quick round trip to and from the server to retrieve and/or save data without posting the entire page back to the server. By not performing a full postback and sending all form data to the server, network utilization is minimized and quicker operations occur. In sites and locations with restricted bandwidth, this can greatly improve network performance. Most of the time, the data being sent to and from the server is minimal. By using callbacks, the server is not required to process all form elements. By sending only the necessary data, there is limited processing on the server. There is no need to process all form elements, process the ViewState, send images back to the client, or send a full page back to the client.
2. Making Asynchronous Calls: Ajax allows you to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more.
3. User-Friendly: Because a page postback is being eliminated, Ajax enabled applications will always be more responsive, faster and more user-friendly.
4. Increased Speed: The main purpose of Ajax is to improve the speed, performance and usability of a web application. A great example of Ajax is the google auto complete suggestions.

Technical aspects of Ajax:

Ajax callbacks can be done by instantiating an XMLHttpRequest object in the client-side JavaScript. The XMLHttpRequest object can be used to directly call server-side objects like pages and web services. These pages and web services will either save and/or return data.

Ajax was originally an acronym for Asynchronous JavaScript and XML. “Asynchronous” means that multiple events are happening independently of one another. Once a client initializes an Ajax callback to the server, the client need not to wait for a response and can continue to use the web application while the request is being processed. Once done, the server will send a response back to the client and the client will process it as necessary.

Updates:

JavaScript is the client-side programming language and XML is a markup language to define data. JSON is another markup language to define data. JSON (JavaScript Object Notation) is much easier to use with JavaScript than XML. When it comes to Ajax and JavaScript, JSON Web Services are replacing XML Web Services.

Another major advance to JavaScript and Ajax is the JavaScript object library called jQuery. This free, open-source software is a wrapper around JavaScript. jQuery is used to easily write client-side JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.

By using jQuery and JSON Web Services, Ajax callbacks have become standard programming practices for designing and developing web applications.

The Ajax Control Toolkit is a suite of controls created by Microsoft that is integrated into Visual Studio and can be dragged and dropped onto web forms just like html and server controls. These controls are intended to be used for Ajax callbacks. However, they can also be used as normal client and or server controls. For example, Asp.Net does not come with the Tabs controls. However, the Ajax Control Toolkit does. The Tab control can postback to the server just like server controls.

Where should Ajax used:

• Voting, Yes/No boxes, Ratings submissions.
• Filtering and involved data manipulation.
• Commonly entered text hints/auto completion.

Ajax should be used anywhere in a web application where small amount of information could be saved or retrieved from the server without posting back the entire pages. A good example of this is data validation on save actions. Another example would be to change the values in a drop down list-box based on other inputs, such as state and college list boxes. When the user selects a state, the college list box will re-populate with only colleges and universities in that state.

Another great example is when the client needs to save or retrieve session values from the server, based on a user preference such as the height, width or position of an object. Adjusting the width could make a callback to the server to set the session variable for the new width. This way, whenever the page is refreshed, the server can adjust the object’s width based on this session variable. Otherwise, the object would go back to its initial default width.

Other features include text hints and autocomplete text boxes. The client types in a couple of letters and a list of all values that start with those letters appear below. A callback is made to a web service that will retrieve all values that begin with these characters. This is a fantastic feature that would be impossible without Ajax and is also part of the Ajax Control Toolkit.

Segue recently used Ajax to support a client application that had problems due to limited bandwidth and page size. The combination caused the application to take too long to retrieve data and display it on the page. Sometimes, the web server would simply not have the resources to handle the request and timeout. The best solution for this issue was Ajax.

To solve this problem, we created JSON Web Services on the web server in order to retrieve the details about the selected item. The JSON web service would retrieve the data and convert into JSON and return a JSON string. Instead of posting back to the server, the client would call the web service when an item was selected from the list box. We used jQuery to make an asynchronous Ajax call to the web service. Once the client retrieved the data back from the web service, more client side processing was done to display the information on the page. The time it took to display the details on the page after the item was selected was instantaneous. There was no page flicker, refresh or postback involved.