Introduction:
Ajax is shorthand for “Asynchronous JavaScript and XML”. It is a web development technique for creating interactive web application.
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.
Ajax is not a new technology but a new way to use existing standards it is basically a web development technique which uses existing technologies like JavaScript and XML.
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 behaviour of the existing page. Data can be retrieved using XmlHttpRequest object.
AJAX uses a group of technologies such as JavaScript, XML as well as HTML, CSS, XHTML also. JavaScript is mainly used to dynamically display and to allow the user to interact with the information presented (JavaScript and XmlHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads)
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.
JavaScript to make everything happen (Populating dynamically data)
Prerequisites Of AJAX:
HTML / CSS
XHTML
JavaScript / DOM
How AJAX Works:
When HTML page event occurred, it is served by a proxy component. In the most recent AJAX solutions, the proxy component is based on XMLHttpRequest object. The XMLHttpRequest object sends a regular HTTP request and waits for it to be fully served. When the response data is ready, the proxy invokes a user defined JavaScript call back function to refresh any portion of the page that needs updating.
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.
When user makes an initial request and in response the page with the AJAX engine is loaded, there after the user sends all requests to the AJAX engine through JavaScript call back function, while the AJAX engine forwards request to the server, parses the response, and displays the HTML in the browser.
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.
Note: When we are saying that browser does not support AJAX, it means the browser does not support creation of JavaScript object that is “XMLHttpRequest Object”.
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:
readyState: 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.
200: Ok
404: Page not found
statusText:
This property returns status message as a string. (e.g. “Page not found” or “Ok”)
onreadystatechange:
This property required event handler that fires when the state of the request object change. (Callback method assigned via this attribute)
responseText:
It holds the response data as a string of characters from the server.
responseXML:
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).
Send(“data”):
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.
ReadyState=1:
After you have called the open() method but the send().
ReadyState=2:
After we have called the send().
ReadyState=3:
After the browser has established a communication with the server but before the server has completed the response.
ReadyState=4:
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.