AJAX calls, which represent Asynchronous JavaScript And XML, are becoming more and more popular as web applications seek to provide custom elements dynamically. AJAX calls are a method of loading custom content separately from the rest of the HTML document, which allows the entire HTML document to be cached, which improves main load time.
AJAX calls have a wide range of applications but are especially useful for websites that have a large amount of personal information, which can prevent complete caching of HTML documents. E-commerce websites are among those that can use AJAX calls to load cart content, account information, and product recommendations without directly embedding this information in a page’s HTML. Platforms such as Magento have adopted AJAX calls, Magento 2 using AJAX for all personalized information. At Win Infoway, we regularly use AJAX calls combined with Varnish Cache to allow caching of dynamic content without sharing personalized information between users.
How AJAX calls work
AJAX uses both an XMLHttpRequest object built into the browser to obtain data from the Web server and JavaScript and HTML DOM to display this content to the user. Despite the name “AJAX”, these calls can also transport data in plain text or JSON instead of XML.
AJAX calls use JavaScript snippet to load dynamic content. As a basic example, you can configure a page counter that changes each time a page is reloaded by scheduling a snippet that is loaded after the main content:
<script> $ .getJSON (‘/ pagecount’, function (data) {console.log (data); $ (‘# p’). html (data.pagecount);});}); </ script>
Since this is called following the rest of the page, you can cache the entire HTML document on the page without worrying about the dynamic content being broken.
AJAX calls are beneficial for several reasons. Unlike Edge Side includes, another method of adding custom content to a web page, AJAX does not depend on an ESI processor to run, so you can create and test an AJAX call locally without having to run Varnish Cache or another ESI processor locally. Since JavaScript and AJAX are common in development, it can also be easier to get started with AJAX than with ESI. AJAX is also a good solution for handling failures, because you can program custom error messages to send if, for example, a user’s account or cart information. You can find more information on setting up your own AJAX calls here.
AJAX vs Edge Side includes
Another method of adding custom information to a page without loading it directly into the HTML document is to use Edge Side Include.
Edge Side Include can tell Varnish Cache to cache a page but fill in the blank dynamic content by retrieving that content from the origin server. To do this, add an ESI line such as <esi: include src = ’/ pagecount-esi’ /> for the number of pages.
Using ESI, you can cache the entire HTML document with dynamic content and you don’t need to use JavaScript. A key point of ESI is that Varnish Cache will start sending the HTML document immediately even as it retrieves dynamic content from the origin – this will keep the total loading time of your HTML document about the same but will improve considerably the time to the first byte which is an important metric for the ranking of search engines and the perception of loading time.
With ESI, you need an ESI processor such as Varnish Cache. Some advantages of ESI are that it allows you to program specifically in the Varnish Cache layer and does not require the use of JavaScript. This can be beneficial if your users’ devices / browsers do not support JavaScript. ESI is also a good solution for API calls that generally do not execute JavaScript.
Leave A Comment