Ajax

Ajax stands for Asynchronous Javascript And XML. Although strictly speaking Ajax itself is not a technology, it mixes well-known programming techniques in an uncommon way to enable web developers to build Internet applications with much more appealing user interfaces than those to which we have become accustomed. When using popular desktop applications, we expect the results of our work to be made available immediately, without fuss, and without us having to wait for the whole screen to be redrawn by the program.

Unfortunately, this sort of interaction has seldom been available to users of web-based applications. Much more common is the experience of entering data into form fields, clicking on a button or link, and then sitting back while the page slowly reloads to exhibit the results of the request. In addition, we often find that the majority of the reloaded page consists of elements that are identical to those of the previous page and that have therefore been reloaded unnecessarily; background images, logos, and menus are frequent offenders.

Ajax promises us a solution to this problem. By working as an extra layer between the user's browser and the web server, Ajax handles server communications in the background, submitting server requests and processing the returned data. The results may then be integrated seamlessly into the page being viewed, without that page needing to be refreshed or a new one loaded.

In short,

  • AJAX = Asynchronous JavaScript and XML.
  • AJAX is based on JavaScript and HTTP requests.
  • AJAX is a type of programming made popular in 2005 by Google (with Google Suggest).
  • AJAX is not a new programming language, but a new way to use existing standards.

Before continuing, you should have a basic understanding of HTML / XHTML and JavaScript

With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page.AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.The AJAX technique makes Internet applications smaller, faster and more user-friendly.

To get or send information from/to a database or a file on the server with traditional JavaScript, you will have to make an HTML form, and a user will have to click the "Submit" button to send/get the information, wait for the server to respond, then a new page will load with the results. Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.With the XMLHttpRequest object, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

To improve the user's experience,we need to add some extra capabilities to the traditional page-based interface design. We want your user's page to be interactive, responding to the user's actions with revised content, and be updated without any interruptions for page loads or screen refreshes. To achieve this, Ajax builds an extra layer of processing between the web page and the server.

This layer, often referred to as an Ajax Engine or Ajax Framework, intercepts requests from the user and in the background handles server communications quietly, unobtrusively, and asynchronously. By this we mean that server requests and responses no longer need to coincide with particular user actions but may happen at any time convenient to the user and to the correct operation of the application. The browser does not freeze and await the completion by the server of the last request but instead lets the user carry on scrolling, clicking, and typing in the current page.

To see an example of an Ajax application in action, let's have a look at Google Suggest. This application extends the familiar Google search engine interface to offer the user suggestions for suitable search terms, based on what he has so far typed.

Ajax is, in itself, a combination of existing technologies. These include the following:

  • XMLHttpRequest object
  • JavaScript
  • DHTML
  • CSS
  • DOM
  • XML

JavaScript is a scripting language developed initially by Netscape, but having the capability to be used on all known browsers. It is an interpreted language that can be used both on the client and server side as a scripting language. JavaScript can be easily used to interact with the HTML elements, validate user input, and manage your settings, such as the color and background color of different controls on a form. Like any other programming language, JavaScript contains variables, arrays, loops, functions, operators, exception handling in the form of "try" and "catch" statements, and so on. You can place your JavaScript code directly on the same HTML page or even in a separate .js file and link your web page with it.

DHTML is the acronym for Dynamic Hypertext Markup Language, a technology that you can use to make your web page dynamic with the use of JavaScript. The word "dynamic" implies the capability of the browser to alter the look and style of HTML elements after the document has been loaded onto the browser.

CSS, or Cascading Style Sheets, are files that store the styles of your web page HTML elements. These files typically have the .css extension. CSS is basically used to provide a customized look and feel to your HTML elements.

Benefits of using Ajax in web-based applications include the following:

  • Improved user experience
  • Asynchronous processing
  • Platform and architecture neutrality
  • Multibrowser support
  • Faster page renders and improved response times

The major drawback is its massive usage and dependency on JavaScript. It should be noted that JavaScript is implemented differently for various browsers, such as Internet Explorer, Netscape, Mozilla, and so on. This becomes a constraint especially when you need to make Ajax work across browsers.

Added to this, you do not have support for JavaScript in mobile browsers. So, taking Ajax’s dependency on JavaScript into consideration, Ajax might not be well suited for designing mobile applications.

ASP.NET Ajax, formerly known as Atlas, is an extension of ASP.NET 2.0. It allows you to leverage the power of Ajax while developing ASP.NET Ajax web applications.ASP.NET Ajax is a set of technologies to add Ajax support to ASP.NET. It consists of a client-side script framework,server controls, and more. Although Ajax is essentially a client-side technique, most of its real-world deployments call for server-side processing.

Moreover, ASP.NET Ajax has come up with several server controls—namely, ScriptManager, UpdatePanel, UpdateProgress, and Timer—that enable a faster response. These controls are responsible for faster updates, better resp onse times,and improved performance and efficiency.

Reference Articles

  • SAMS Teach YoursSelf Ajax in 10 Minutes
  • Teach Yourself ASP.NET Ajax in 24 Hours
  • www.w3schools.com