When working on advanced website projects for Dinkum clients, there are a few questions I’m almost guaranteed to get asked at some point in the development cycle:
- How can we improve the user experience? Make it slick, smooth, intuitive, engaging. . .
- How can we make the site faster and improve performance?
- How can we make the site look like all those “Web 2.0” sites? Or even “Web 3.0”!
Well one of the most important technologies (a group of technologies, in fact) to make all this possible is Ajax. But, what is Ajax?
Wikipedia says:
“is a group of interrelated web development methods used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not needed, and the requests need not be asynchronous.”
But what does that really mean in plain english? A very simple definition could be “It lets you, from the client view (browser) go to the server, process/get some information and show it to the user in a very quick and transparent way” (please, it is a very simple definition, it has a lot of others approaches).
Let’s see some cool examples of ajax sites.
Google Maps, I’m sure you know it! One of the coolest applications in the ‘net. It let’s you interact with the map in a very user friendly way and in “real time”. It is thanks to Ajax.
Google Search
There are thousands of examples. But what about employing Ajax on your brand new, SEO optimized, Dinkum-built WordPress website?
To give you a window into how we can use this presentation technology, we’ll do the most basic example I can think of: we’ll show the server time in a wordpress page. The reason this is relevant is because it shows how Ajax can help us get information about a process and show it to the user in a very easy way.
First, let’s create a page template with some html code
We have to create a javascript file, inside our theme, and copy/paste this code:
jQuery will let us use Ajax, in a very easy way (I’ll talk about jQuery in another post).
jQuery(function() {
jQuery("#get-time").click(function(){
jQuery.ajax({
url:"/wp-admin/admin-ajax.php",
type:'POST',
data:'action=get_time',
success:function(result)
{
jQuery("#time").html(result)
}
});
});
});
Next we’ll open the plugin file we have been working on and copy/paste this code
/**
* Server function which get and print the server time
*/
function dinkum_get_time(){
echo strftime('%c');
die();
}
/**
* Add the javascript file to our wordpress page
*/
function dinkum_add_scripts(){
wp_enqueue_script('dinkum_example', get_bloginfo('template_directory').'/dinkum.js', array('jquery'));
}
/**
* Register the hooks
*/
add_action('wp_print_scripts', 'dinkum_add_scripts');
add_action('wp_ajax_get_time', 'dinkum_get_time');
add_action('wp_ajax_nopriv_get_time', 'dinkum_get_time');//for users that are not logged in
The result!
So, the important lines here are
wp_enqueue_script: It lets add to javascript file
Register the ajax function
add_action(‘wp_ajax_get_time‘, ‘dinkum_get_time’);
add_action(‘wp_ajax_nopriv_get_time‘, ‘dinkum_get_time’);//for users that are not logged in
Pay attention to the action becase we need to use the same name as we use in the javascript file data: ‘action=get_time‘,
