What is AJAX?
Ajax stands for Asynchronous JavaScript And XML. It is a web development technique used for creating interactive web applications and the logical next step in the services-oriented architecture revolution. With Ajax, user interfaces from within the browser can use web services as their data source to store and retrieve information.
Ajax is a group of interrelated web development techniques used for creating interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behaviour of the existing page. Data is retrieved using the XMLHttpRequest object or through the use of Remote Scripting in browsers that do not support it. Despite the name, the use of JavaScript, XML, and Asynchrony is not required.
With AJAX you can:
- Parse and work with XML documents.
- Make requests to the server without reloading the page.
- Create next-generation interfaces with reusable AJAX components.
- Enhance existing pages using powerful AJAX controls with support for all modern browsers.
- Access remote services and data from the browser without tons of complicated script.
- Take advantage of the improved efficiency and ease of use in Visual Studio 2008, with its built-in support for ASP.NET AJAX, improved JavaScript support, and a new Web page designer interface.
AJAX History.
The first use of the term in pubic was by Jesse James Garrett in February 2005. Garrett thought of the term when he realized the need for a shorthand term to represent the suite of technologies he was proposing to a client.
Although the term “Ajax” was coined in 2005, most histories of the technologies that enable Ajax start a decade earlier with Microsoft’s initiatives in developing Remote Scripting. Techniques for the asynchronous loading of content on an existing Web page without requiring a full reload date back as far as the IFRAME element type (introduced in Internet Explorer 3 in 1996) and the LAYER element type (introduced in Netscape 4 in 1997, abandoned during early development of Mozilla).
Microsoft’s Remote Scripting or MSRS, introduced in 1998 acted as a more elegant replacement for these techniques, with data being pulled in by a Java applet with which the client side could communicate using JavaScript.
This technique worked on both Internet Explorer version 4 and Netscape Navigator version 4 onwards. Microsoft then created the XMLHttpRequest object in Internet Explorer version 5 and first took advantage of these techniques using XMLHttpRequest in Outlook Web Access supplied with the Microsoft Exchange Server 2000 release.
Asynchronously in AJAX.
Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Object Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML (Ajax) has emerged recently to describe this interaction model.
XMLHTTPRequest
The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.
XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent connection channel between a web page’s Client-Side and Server-Side.
Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. Engineers on the Mozilla project implemented a compatible native version for Mozilla 1.0 (and Netscape 7). Apple has done the same starting with Safari 1.2.
XMLHTTPRequest in IE.
With the XMLHttpRequest object, Internet Explorer clients can retrieve and submit XML data directly to a Web server without reloading the page. To convert XML data into renderable HTML content, use the client-side XML DOM or Extensible Stylesheet Language Transformations (XSLT) to compose HTML elements for presentation.
if (window.XMLHttpRequest)
{
var oReq = new XMLHttpRequest();
oReq.open("GET", "http://localhost/test.xml");
oReq.send();
alert(oReq.statusText);
}
XMLHTTPRequest in Firefox.
On Firefox, there is one request that very predictably breaks things.
But the way things break is odd. That request works flawlessly; but
then *any* call to XMLHttpRequest’s “open” method after that throws an
exception; control never reaches the server-side code that’s being
called. Creating a new XMLHttpRequest object solves the problem.
var req = new XMLHttpRequest();
req.open(‘GET’, ‘file:///home/user/file.json’, false);
req.send(null);
if(req.status == 0)
dump(req.responseText);
ReadyState Role in HttpRequest
The readyState property indicates the current state of the request. It returns a 4-byte integer.
This property is read-only and has the following defined values
- UNINITIALIZED(0)
The object has been created, but has not been initialized (the open method has not been called). - LOADING(1)
The object has been created but the send method has not been called. - LOADED(2)
The send method has been called and the status and headers are available, but the response is not. - INTERACTIVE(3)
some data has been received. You can get the partial results using the responseBody and the responseText properties. - COMPLETED(4)
All the data has been received, and is available.
Benefits of XMLHttpRequest:
- It has the abort () function.
- It is faster and easier then IFrame.
- Can set/get all HTTP headers.
- Numerous frameworks are dedicated to Ajax.
- Can make requests to pages not set up for AJAX.
- Can make HTTP requests using any type (GET, POST, PROPFIND, and so on).
- Supports full control over POST requests, allowing for any type of data encoding.
- It allows exchanging XML file with the server, that become accessible with the DOM interface, IFrame doesn’t.
