Ajax is a latest boom in the web development world (Either we develop web application using classic ASP, or PHP, or Servlet / JSP, or ASP.NET). Ajax can be used in these all web technologies to create interactive web applications.
Ajax meant to increase the web pages interactivity, speed, and usability.
Ajax can be used for creating rich web based applications that look and works like a desktop applications (Standalone application).
Ajax is a group of interrelated web development techniques used on the client side to create asynchronous web applications.
Ajax is of the most important technology for the development of highly interactive web application and due to its features it has become extremely popular in web development world.
In traditional ASP.NET web application, when user submits a form (web form), they have to wait around for the page to reload before seeing the results.
With AJAX our application can dynamically populate a page (For ex. Retrieve data from a database) without having to reload the whole page.
With AJAX web application can send data to and retrieve data from a server asynchronously (In the background) without interfering with the display and behavior of the existing page. Data can be retrieved using XmlHttpRequest object.
AJAX can be used to make RIA (Rich Internet Application) technologies.
AJAX is a web browser technology independent of web server software.
AJAX Is Based On Open Standards:
Browser based presentation using HTML and CSS.
Data stored in XML format and fetched from the server.
Data fetches using XmlHttpRequest objects in the browser.
Prerequisites Of AJAX:
HTML / CSS
How AJAX Works:
The AJAX Core Engine:
The AJAX is not a particular technology it refers to a number of client features and related development techniques that make web applications look like desktop applications.
AJAX does not require any plug-in.
Virtually any browser released in the past five to six years can serve as great host for AJAX based applications because these all browsers have support for XMLHttpRequest object.
The XMLHttpRequest object originally introduced with Internet Explorer with 5.0. It is an internal object that the browser publishes to its scripting engine.
This object allows script code to send HTTTRequest and handle their response.
The XMLHttpRequest object created by Microsoft and adopted soon thereafter by Mozilla. (This object is supported by majority of web browser today in the real world)
AJAX Browser Support: All the available browsers cannot support AJAX. These are the following major browsers with support AJAX:
Mozilla Firefox 1.0 and above
Netscape version 7.1 and above
Apple Safari 1.2 and above
Microsoft Internet Explorer 5.0 and above
Opera 7.6 and above.
AJAX can run in on type of common browsers but there is a conflict in older (Such as IE5, IE6) and newer browsers (Such as Mozilla, Netscape, IE7+, Chrome, Safari, Opera etc). So in order to avoid this problem, we must create an object of XMLHttpRequest based on different browsers.
For new browsers:
var xmlhttp; xmlhttp=new XMLHttpRequest();
For older browsers:
var xmlhttp; xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
The XMLHttpRequest Object Provides Following Properties And Methods: Properties:
ready State: This property returns values that indicate a current state of the object. These values from 0 to 4 during a request cycle:
0: The request is not initialised.
1: The request has been setup. (Connection established)
2: The request has been sent. (Request received)
3: The request is in process. (Request processing)
4: The request is completed. (Finished and response is ready)
status: This property provides status code of the response from the server.
404: Page not found
This property returns status message as a string. (e.g. “Page not found” or “Ok”)
This property required event handler that fires when the state of the request object change. (Callback method assigned via this attribute)
It holds the response data as a string of characters from the server.
It holds the response data as XML data from the server.
Methods:open(mode, url, boolean):
mode: Type of request either using GET or POST.
url: The location of the file.
Boolean: true (asynchronous), or false (synchronous).
This method is used to sends an HTTP request to the server and receives response. When we use to make request using GET command, then send method should be used with null parameter because data to be send via QueryString.
When we used to make a request using POST command, then data to be send using send method only with specified parameter.
Readystate Property Values Of XMLHttpRequest Object To Be Used In Following Sequence:ReadyState=0:
After you have created the XMLHttpRequest object but before the open() method.
After you have called the open() method but the send().
After we have called the send().
After the browser has established a communication with the server but before the server has completed the response.
After the request has been completed and the response data have been completely received from the server.
These Are The Following Steps Which We Follow While Writing AJAX Program:
A client event occurs.
An XMLHttpRequest object is created.
The XMLHttpRequest object is configured.
The XMLHttpRequest object makes an asynchronous request.
Web server returns the result containing text or XML document.
The XMLHttpRequest object calls the callback() function and the HTML DOM is updated.