What is AJAX?
Overview
AJAX is not a programming language or a tool, it is a concept. It is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh. The best definition I’ve read for AJAX is “the method of exchanging data with a server, and updating parts of a web page – without reloading the entire page.” AJAX itself is mostly a generic term for various JavaScript techniques used to connect to a web server dynamically without necessarily loading multiple pages. In a more narrowly-defined sense, it refers to the use of XmlHttpRequest objects to interact with a web server dynamically via JavaScript.
Benefits of AJAX
There are 4 main benefits of using AJAX in web applications:
- Callbacks: AJAX is used to perform a callback, making a quick round trip to and from the server to retrieve and/or save data without posting the entire page back to the server. By not performing a full postback and sending all form data to the server, network utilization is minimized and quicker operations occur. In sites and locations with restricted bandwidth, this can greatly improve network performance. Most of the time, the data being sent to and from the server is minimal. By using callbacks, the server is not required to process all form elements. By sending only the necessary data, there is limited processing on the server. There is no need to process all form elements, process the ViewState, send images back to the client, or send a full page back to the client.
- Making Asynchronous Calls: AJAX allows you to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more.
- User-Friendly: Because a page postback is being eliminated, AJAX enabled applications will always be more responsive, faster and more user-friendly.
- Increased Speed: The main purpose of AJAX is to improve the speed, performance and usability of a web application. A great example of AJAX is the movie rating feature on Netflix. The user rates a movie and their personal rating for that movie will be saved to their database without waiting for the page to refresh or reload. These movie ratings are being saved to their database without posting the entire page back to the server.
How AJAX Works
- An event occurs in a web page (the page is loaded, a button is clicked)
- An XMLHttpRequest object is created by JavaScript
- The XMLHttpRequest object sends a request to a web server
- The server processes the request
- The server sends a response back to the web page
- The response is read by JavaScript
- Proper action (like page update) is performed by JavaScript
Things To Know
- AJAX = Asynchronous JavaScript And XML.AJAX is not a programming language.
- AJAX just uses a combination of:
- A browser built-in XMLHttpRequest object (to request data from a web server)
- JavaScript and HTML DOM (to display or use the data)
- AJAX is a developer’s dream, because you can:
- Update a web page without reloading the page
- Request data from a server – after the page has loaded
- Receive data from a server – after the page has loaded
- Send data to a server – in the background
- AJAX uses XHTML for content, CSS for presentation, along with DOM and JS for dynamic content display.
- Conventional web applications transmit information to and from the server using synchronous requests – being directed to a new page with new information from the server.
- With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
- AJAX is a web browser technology independent of web server software.
- A user can continue to use the application while the client program requests information from the server in the background.
- Allows a developer to create an intuitive and natural user interaction.
- With AJAX clicking is not required, mouse movement is a sufficient event trigger.
- AJAX is data-driven as opposed to page-driven