Giới thiệu ví dụ đơn giản AJAX Example trong Drupal 6, Drupal 7

Step 1 Create A Module.

It should go without saying but I find many of those asking for help on ajax are not sure what to do with all the hooks and such necessary to implement an ajax callback. So here it is from the beginning. If you know how to create a module already, skip this step or copy the code for a fully functional example module.

Create a folder in the path “/sites/all/module/custom/” called “ajax_example”. All paths are relative to the Drupal installation root usually something like: /var/www/html/sitename

In that folder create an info file named “ajax_example.info” and paste the following code into that file exactly as listed:

name = AJAX Example

description = An ajax callback example.

project = Custom

core = 7.x

This information will be displayed in the Drupal modules page.

Create a couple empty files named “ajax_example.module” and “ajax_example.js”. Just leave them as empty files for now.

Step 2 Set up the menu hook

Open the ajax_example.module file in your favorite code editor.

Set up a url of the ajax callback by implementing Drupal's hook_menu. This is how Drupal will pass information to javascript. Create the menu hook by pasting this code into the ajax_example.module file:

/**
 * Implements hook_menu().
 */
function ajax_example_menu() {
// Ajax Callback. Returns telephone number for current region.
$items['ajax/username'] = array(
'title' => 'Get Current User Name',
'page callback' => 'ajax_example_get_username',
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
return $items;
}

Drupal’s hook_menu defines url’s for the system. The array offset ‘ajax/username’ is the actual url the ajax code will call. The page callback is the function that will retrieve the information. The rest of these options can be researched at api.drupal.org.

Step 3 Create the callback function

Next task is to return the information the ajax call wants. Still in our module file, create the function named in the page callback.

/**

 * AJAX function that returns the current logged in users name.

 */

function ajax_example_get_username() {


// Get currently logged in user.

global $user;

$user_name = $user->name;


// Drupal 7 Old School.

print $user_name;

drupal_exit();


// Drupal 7 New School.

drupal_json_output($user_name);


// Drupal 6.

print $user_name;

module_invoke_all('exit');

exit;

}

This function varies a bit from Drupal 6 and Drupal 7 so both are included. Only use the code that is associated with your version of Drupal.

First the function retrieves the information. In this example it’s just the currently logged in users name. But any information can obtained. The function can run raw queries, pull globals, generate entire pages, or just return some random text.

The return is the important piece. Do not try to send the data with a return statement. Drupal assumes that information called by a menu hook is a page. Any information returned will be wrapped with the default page template. This is usually not desired for an ajax function.

So instead pass the info to jQuery with a standard “print”. Also note that even if the function does not return a value if the function returns at all the page template will be printed to the screen by the menu system. In order to prevent the page template from being outputted the function should be exited stopping any further html generation. The exit is a little different in Drupal 6 and 7. Several clean-up tasks are good to perform before killing Drupal.  In Drupal 6 these clean-up tasks are signaled with a call to “module_invoke_all(‘exit’)”. This just calls any exit hooks implemented on the current Drupal system. The function drupal_exit in Drupal 7 calls the hook invoke and the php exit making the code a little cleaner and passing the responsibility of clean-up to Drupal’s core.

Step 4 Write your ajax function

Now for the actual ajax function. Here I am using jQuery as it makes ajax and javascript much easier to work with. Like the exit functions above Drupal 6 and 7 differ slightly in how they implement jQuery files. Paste the appropriate code snippet for your version of Drupal into the .js file created earlier.

Drupal 6

Drupal.behaviors.ajax_example = function (context) {
// If the site name is present set it to the username.
if ($('#site-name', context).length) {
$.ajax({
url: '/ajax/username',

success: function(data) {

// Change site name to current user name.

$('#site-name a span').html(data + '.com');

}

});

}

}

Drupal 7

(function ($) {
Drupal.behaviors.ajax_example = {
attach:function (context) {
// If the site name is present set it to the username.
if ($('#site-name', context).length) {
$.ajax({
url: '/ajax/username',
success: function(data) {
// Change site name to current user name.
$('#site-name a span').html(data + '.com');
}
});
}
}
}
})(jQuery)

Make sure the behavior name is unique. In this case the behavior name is the name of the module “ajax_example”. In Drupal 7 the “attach: function” is used instead of the “= function” syntax. Once inside these blocks the code is the same. This code simply checks if the site name is present. If so change the site name to the current users name. Not a very practical use of ajax but this is just meant as an example.

Step 5 Load the javascript file

Once the javascript file is finished it needs to be included in the appropriate pages. This can be done through a block hook, a page hook, a node api hook, or anything that determines a page's content. Since this specific example affects all pages on the site I’m going to make the rather poor choice of adding it in the init hook. If your ajax only affects one page use a hook that specifies that page as hook_init runs on every page load and can affect overall site performance.

/**

 * Implementation of hook_init().

 */

function ajax_example_init() {


// Drupal 6: Add our own CSS and JS to the site.

drupal_add_js(drupal_get_path('module', 'ajax_example') . '/ajax_example.js');


// Drupal 7: Add our own CSS and JS to the site.

drupal_add_js(drupal_get_path('module', 'ajax_example') . '/ajax_example.js', array('scope' => 'footer'));

}

The only difference between Drupal 6 and 7 is the scope parameter. It’s always a good idea to throw custom js in the footer. It makes sure if any 3rd party services being accessed by your callback are down the page will still loads. Also it ensures the content the js triggers on is also loaded.

Finish Up

And there you have it. Enable the module and watch your site name change to the current logged in user’s name. Of course with JavaScript you can trigger off of a button press, search box edit, select box choice, or any of the events supported in the language.