In the past couple of years, AJAX has successfully paved its way into the website development. By using AJAX one can build dynamic, user-friendly and highly-responsive websites that will work as per the client’s requirement. AJAX is a technology which allows users to update the content of the page without actually having to reload the page in the browser.
For example, Google Docs utilizes this technology when saving your work.
There are plenty of methods by which you can integrate AJAX coding into the WordPress-based website. The best thing is that WordPress fully supports AJAX, it’s future-proof, very logical and gives a developer numerous customization options right out of the box. In this post, you will get to know more about AJAX and how it makes the WP sites dynamic and unique.
What is AJAX
If you are creating a page on your portal where users can modify their profile, then you can use AJAX to update the user’s profile without any need of reloading the page whenever they submit the information form. When the user clicks on the ‘Send’ button that data entered in the form will be sent via AJAX which will further process the info, save it and returns the string “data saved.” You can then output that data to the user by inserting it onto the page.
How AJAX Works In WordPress?
WordPress not only supports AJAX based coding but also comes loaded with this technology right out of the box. All you need to do is to use the available functions. There is a very simple process to get started with AJAX in WP.
Every AJAX request sent by the user goes through admin-ajax.php in the WordPress’s admin folder. This admin-ajax.php is usually used for the backend coding and the user only faces the clean version of AJAX.
Each request needs to be supplied with at least with a single piece of data (by using the GET or POST method) called the action. According to this action, the code in admin-ajax.php creates two hooks: wp_ajax_my_action & wp_ajax_nopriv_my_action, in which the my_action is the value of the GET or POST variable action.
By adding a function to the first hook indicates that the function will fire only if a logged-in user initiates this action or request. By using the second hook, you can cater the needs of logged-out users separately.