What is Ajax polling?
Ajax (Asynchronous JavaScript and XML) polling is a technique used in web development to achieve asynchronous communication between a web server and a web browser. Before we dive into the details of Ajax polling, it’s important to have a prior insight into what polling actually is.
Polling is a process in which a client, usually a web browser, repeatedly sends HTTP (Hypertext Transfer Protocol) requests at regular intervals to a server to retrieve new or updated information. The server responds to each request, providing any available data.
Note: The frequency of periodic requests in an Ajax polling setup depends on several factors such as user experience, network latency, and server load.
Process
As we know by now, the basic idea of Ajax polling is that the client repeatedly polls (or requests) a server for data. The client makes a request and waits for the server to respond with data. If no data is available, an empty response is returned by the server.
A step-by-step breakdown of how Ajax polling works is given below:
Initial page load: When a user accesses a web page utilizing Ajax polling, the initial page load occurs much like any standard web page. However, the key difference lies in the JavaScript code embedded in the page. This code is responsible for orchestrating the periodic requests to the server.
-
Periodic requests to the server: After the page loads, JavaScript on the webpage initiates a request to the server at regular intervals (for instance, every few seconds). This request is made via JavaScript functions such as the XMLHttpRequest or the Fetch API, which are designed for making asynchronous requests to the server.
-
Server response: The server receives the request made by JavaScript in the preceding step and processes it. If new data is available, the server sends back the updated information as a response.
Update at the client side: The JavaScript code on the webpage processes the response from the server and updates the relevant parts of the page with the new data sent back from the server request. This type of data can involve modifying the HTML content, updating visual elements, or displaying notifications.
Repeating the process: Steps 1 to 3 are repeated periodically and updates continue as long as the webpage remains open in the user’s browser. The interval between requests can be adjusted based on the desired frequency of updates and the nature of the content being retrieved. This is also known as the polling interval.
A diagram that illustrates the process explained above is shown below:
Code example
Here’s a simple React application that demonstrates the use of Ajax polling in which data is fetched from the server (App.js file) every three seconds to display a random number on the webpage (i.e index.html). Run it to see the magic happen!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Advantages
Ajax polling has proven to have a number of advantages that’ve made web applications more interactive and responsive. Some of these advantages are listed below:
- Simplicity: This type of polling is relatively easy to implement, making it a good starting point for developers who are new to asynchronous web communication.
- Wide support: Ajax polling is supported by most modern browsers, ensuring compatibility over a large range of user devices.
-
Dynamic updates: By dynamically making changes to specific parts of a web page, the need to reload the entire page is reduced, leading to a more seamless user experience.
-
Fallback option: In situations where more advanced real-time communication methods (like WebSockets) aren’t available to the user, Ajax polling can prove to be a fallback mechanism for achieving near real-time updates.
Predictable server load: Since polling is done at fixed intervals, server load is more predictable and manageable compared to sudden surges in traffic with other polling techniques.
Disadvantages
All polling mechanisms have certain drawbacks and Ajax polling is no different. The disadvantages of Ajax polling are listed below:
-
High server load and latency: Unnecessary server load can potentially be created as a result of this polling. This is due to frequent requests and delays in receiving real-time updates from the server.
-
Inefficiency: Even if no new data is being returned from the server, it must respond to each request. This situation can be wasteful in terms of bandwidth and processing power.
-
Stale data: In the case of the polling interval being large, users might receive outdated information, especially in rapidly changing scenarios.
-
Complex sync handling: In Ajax polling, synchronizing multiple clients’ requests can become complex, leading to issues like race conditions and duplicated data.
-
Battery Drain: Frequent polling in Ajax polling can drain battery life on mobile devices due to repeated network activity.
Note: More modern approaches like
and WebSockets WebSockets is an advanced technology that enables bidirectional real-time interactive communication between a client and a server. have been developed to address the listed limitations, providing more efficient real-time communication between clients and servers. Server-Sent Events (SSE) This is a technique that allows a client to receive automatic updates from a server, such as text-based event data, over a standard HTTP connection.
Conclusion
To conclude, Ajax polling is a straightforward technique to achieve dynamic updates in web applications despite having numerous limitations that can make it less desirable compared to other advanced techniques.
Free Resources