Ajax是一種用于創建快速動態網頁的技術,這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新,jQuery提供了幾個不同的Ajax命令,本文來講講Drupal中的JQuery和Ajax.

下面是使用jQuery,最簡單的Ajax調用:

$('#someDiv').load(url);

上面代碼的意思是:先查找一個ID為“someDiv”的div,再加載設定的url 的HTML內容，并插入到這個div中。其實,這個例子實際上是AHAH而不是Ajax,因為它直接返回HTML,并不需要解析,另一方面,在嚴格意義上，Ajax從服務器返回的資源是XML數據,在您的網頁上顯示之前需要解析,但事實上,只有極少數的Ajax應用程序返回XML數據,一種更常見的數據（服務器返回數據）格式是JSON,這也是我們正在Drupal中使用的.

當你需要處理(分析)來自服務器返回的數據時,下面的jQuery的工具函數提供強大的靈活性,代碼如下:

1. $.get(url, parameters, callback); 
2. $.post(url, parameters, callback); 
3. $.ajax(options); 

$.get 和 $.post之間唯一的區別:http請求將參數發送到服務器（傳遞數組的第二個參數）的方法。在Drupal中，大多數情況下，你不需要發送任何參數，因為你將調用的URL（菜單回調）中已經設置了，例如，“ajax/get/ node_details”需要一個參數“nid”,所以在菜單回調中你只需調用“ajax/get/node_details/123”，不需要把nid作為第二個變量的參數來傳遞。

現在來看一個很簡單的例子了解它是如何工作的。假設在您的網站上有一個幻燈片頁，類似于常見的新聞網站：圖片底下有數字按鈕，點擊這些數字按鈕將改變顯示的圖像，而不需要重新加載頁面。好了，要完成這個例子，你首先要設置頁面，使第一張圖片輸出到一個容器（在這個例子，我們將假定正常加載的第一張圖片;所有圖片都是節點），再輸出所有必需的數字按鈕。然后，添加一些sjax的操作，你將需要建立一個模塊定義你的Ajax回調。在模塊中設置菜單回調，具體的代碼如下:

1. /** 
2. * Implementation of hook_menu(). 
3. */ 
4. function myModule_menu() { 
5.   $items['photos/get/photos'] = array( 
6.     'page callback' => 'mymodule_get_photos_ajax', 
7.     'type' => MENU_CALLBACK, 
8.     'access arguments' => array('access content'), 
9.   ); //開源軟件:Vevb.com 
10.   return $items; 
11. } 
12.     
13. function mymodule_get_photos_ajax($nid) { 
14.   $photo = mymodule_get_photo($nid); // returns the filepath of my photo 
15.   $image = theme('image', $photo); 
16.   drupal_json(array('status' => 0, 'data' => $image)); 
17. } 

我們的JavaScript請求的路徑為photos/get/photos/123，其中123是要尋找照片的nid，mymodule_get_photos_ajax（）函數利用 nid，將要返回圖像的路徑放在一個JSON對象中。

下面是我們的JavaScript代碼:

1. Drupal.behaviors.myModule = function(context) { 
2.   $('a.photo_button:not(.mymodule-processed)', context).addClass('mymodule-processed') 
3.   .bind('click', function(){ 
4.     $.get('/photos/get/photos/'+ parseInt(this.id, 10), null, imageDetails); 
5.     return false; 
6.   }); 
7. } 
8.  
9. var imageDetails = function(response) { 
10.   var result = Drupal.parseJson(response); // 使用Drupal.parseJson 解析返回的 json 數據 
11.   $('div.field-type-image div.field-item').html(result.data); 
12. }