What is Ajax?
Ajax(shorthand for asynchronous JavaScript and XML) is a group of interrelated web development methods used on the client-side to create interactive web applications. With Ajax,web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.
W3Schools explains ajax as follows:
AJAX stands for Asynchronous JavaScript and XML. AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and update parts of a web page -without reloading the whole page.
History:
In 1990’s most websites were based on complete HTML. Quiet often, each user action required the entire page be reloaded to show the resulted page. This was quiet inefficient method and was causing excessive load on the server and excessive bandwidth usage.
Milestones
1995: Java applets were introduced in the first version of java, allowing compiled client side code to be loaded asynchronously from the web server after the page is loaded.
1996: iframe tag was introduced by internet explorer to load content asynchronously.
1999: XMLHTTP ActiveX control was created& developed by Microsoft. This was later adopted by Mozilla, Safari, Opera as XHMLHttpRequest Object. Later Microsoft adopted the XMLHttpRequest Model, in internet Explorer 7.
The Utility of background HTTP Request remained obscure until it started appearing in full scale online application. Outlook WebAccess(2000), OddPost(2002), gmail(2004), google Maps(2005).
2005: “Ajax” the term was coined by Jesse James Garrett on 18thFebruary 2005 in his article, A New Approach to Web Applications.
Technologies in Ajax:
- HTML or XHTML and CSS for presentation.
- The Document Object Model (DOM) for dynamic display of and interaction with data.
- XML for the interchange of data, and XSLT for its manipulation (Not Mandatory).
- The XMLHttpRequest object for asynchronous communication.
- JavaScript to bring these technologies together JSON, Text, etc.
Advantages:
- Make asynchronous requests.
- Reduced bandwidth usage.
- Reduced waiting time
- Can do both GET and POST methods.
- Supported in most of the modern browsers.
- Dynamic content can be loaded easily.
- Can improve the page loading time.
- Can be used to build rich web applications.
Disadvantages:
- No history: Since the content loads dynamically after the page load, it does not get saved in the browser history. Hence browser “back” button will not show the content loaded with Ajax.
- Bookmarking: it is difficult to bookmark dynamically loaded content.
- Poor experience in unstable Internet connection: The response will be slow and causes unexpected results.
- Not Friendly to Search Engine crawlers: Most of the crawlers do not execute JavaScript code.
- Browser without XHR object support: It does not work if the browser does not support XHR object.
- Same origin Policy: the Ajax requests have only same domain support. Of course, there are workarounds using JSONP.
- Increased no of requests: Ajax can trigger more number of requests to the server; hence server might experience capacity issues.
- Accessibility Issues: unless addressed, the dynamic content generated by Ajax may prevent accessibility features like, screen reading, etc.