Using AJAX to dynamically update partial page contents

When WordPress users create complex sites with lots of dynamic content, such as Twitter widgets or other third-party embedded components, navigation can become a grueling experience for visitors. This happens since the browser needs to refresh all page elements and fetch external data every time a user interacts with the website.

In such situations, using Asynchronous JavaScript and XML (AJAX) can greatly accelerate user navigation by displaying subsets of data and dynamically retrieving updates for isolated sections on request. More specifically, AJAX allows the browser to send requests to a web server and insert an HTML content response back in the web page, replacing or augmenting the original content.

Getting ready

You should have already followed the Displaying custom post type data in shortcodes recipe in Chapter 4, The Power of Custom Post Types, to have a starting point for this recipe. Alternatively, you can get...