Until the late 1990s, most websites returned complete web pages when you visited a page on the site. To reload any data, you had to reload the complete page.This was an inefficient way of serving information to users and wasn't very good for the user experience. It also increased the load on servers and the bandwidth needed to serve data.
In 1996, Microsoft introduced the iframe tag to Internet Explorer, which allowed the browser to fetch data in the background asynchronously. This was a step in the right direction for modern web applications.
In 2004, Google added functionality to Gmail that allowed data to be fetched in the background, and in 2005, they did the same thing for Google Maps.
Both Google's and Microsoft's technologies allowed developers to fetch data from a web server using JavaScript without a page reload. This technology was labeled AJAX in 2005 by Jesse James Garrett when he described how Google was accomplishing this in an article he wrote. It quickly became the most popular way to build web applications.
Now that you know a little about AJAX's history, let's look at how it works.
What is AJAX ?
AJAX is a web development technique for creating interactive web applications. If you know JavaScript, HTML, CSS, and XML, then you need to spend just one hour to start with AJAX.Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.
Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.
Most JavaScript libraries that use AJAX wrap this object in custom code to make it simpler for developers to use, but we'll look at how AJAX works in regular JavaScript.