AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. With that said you could use Javascript in conjunction with PHP or other languages (in this case of course it will be PHP) 🙂
Before starting to making a call to ajax we might need to understand a little bit of:
-
How are you making the Ajax calls?
- How are the files involves in WordPress that can be update and how is the process.
Ajax calls.
In this post i will assume that we all know the existence of jQuery. Which will allow us to make things a little easier to understand.
With jQuery you have one function that can be called like this:
$.ajax({
type : 'post',
url : ajaxloading.ajaxurl,
data : {
action : 'sort_results',
parameter1: $value1
},
beforeSend : function() {
//some logic that will prevent for example execute twice the button
// you can disabled the button or showing a loading gif.
},
success : function( response ) {
// display the button again or hide the loading gif.
}
});
In this example we call ajax method which perform an asynchronous HTTP (Ajax) request. In this case we will do a ‘POST’ call.
We can pass parameters in the data array, which will be handled by the called method.
. One of this parameter needs to be the ‘action’ will be explaining later the purpose of this.
Lastly, we setup a ‘success’ method that will be the one which handles the return of the call and do some logic in the page.
WordPress files
WordPress themes use functions.php or the theme functions file as a template. It acts as a plugin and loads automatically on both admin and front-end pages of a WordPress site. This file defines the method called from the JavaScript function.
//function to sort results on resources page via AJAX
function sort_results() {
$param1 = $_POST['parameter1'];
ob_start();
.....
$content = ob_get_clean();
echo $content;
die();
}
}
add_action( 'wp_ajax_sort_results', 'sort_results' );
add_action( 'wp_ajax_nopriv_sort_results', 'sort_results' );
In this code snippet we have two importants things.
- the call add_action which will be registering in wordpress that we have and wp_ajax_sort_results which will execute or tie to sort_results function.
- The actual function that handles the logic, get the parameters and echo the output.
- If you don’t,
admin-ajax.phpwill execute it’s own die(0) code, echoing an additional zero in your response.
It is important that you realize that the name of the action will be the same as the wp_ajax_XXXX. The function can be named anything, I just used the same string as the action name for consistency.
Conclusion
Ajax is a powerful tool in a developers tool belt to add interactivity and to lower server strain. This can opens a lot of doors, but if you do not make the things in a right way your code could messy and hard to mantain. WordPress give you the possibility to use his framework to use it so it will be a good change to take advantage of it!, so send us an email to us to work together!
Related Posts:
Posted in Javascript, PHP, Software Development, Wordpress
