Drupal7 ajax 应用研究以及invoke方法BUG解决

Drupal AJAX 系统表单处理流程

1. 设置

   DRUPAL7 AJAX form 的作用域通常为：

   1. 按钮， 例如各类 button, 和 submit等，可以响应事件。
   2. FORM 各类元素，包含input, textarea, options 等，都可以相应AJAX事件。

   AJAX form 的有效性设置

   
$form['submit'] = array(
'#type' => 'submit',
'#value' => 'Submit',
'#ajax' => array(
'event' => 'click',
'callback' => 'sample_ajax_render',
'method' => 'replace'
)
);


   AJAX所请求path 需要设置 'delivery callback' => 'ajax_deliver' 如下：

   function SAMPLE_menu(){
   return array(
   'register/%' => array(
   'title' => t('Register'),
   'type' => MENU_CALLBACK,
   'page callback' => 'frontend_register',
   'access arguments' => array('access content'),
   'file' => 'register.page.inc',
   'delivery callback' => 'ajax_deliver'
   )
   );
   }
   注： 该设置标明，该页面的输出需要由ajax_deliver控制，通常输出ajax commands(@see includes/ajax.inc)格式的json字符串，
   并会附加一些其它系统默认操作。

   AJAX元素所设置的callback函数格式：

   function sample_ajax_render(&$form, &$form_state){

   $commands = array();
   
   $commands[] = ajax_command_[REPLACE](....);
   /*
       D7系统内置支持的AJAX命令全部在 includes/ajax.inc 文件中。这里ajax_command_? 设置，是由服务器端设置客户端AJAX响应命令。
       也就是说，这里设置的命令客户端ajax.js 会有响应的操作。比如置换 replace, 附加 append等等。
       注意，这里ajax_command_invoke，默认只支持jQuery内建的方法，如果是你自己开发的方法，通过如下代码加载到jQuery:
       var a=function(){
          this.b = 'hello,world'
       };
       //-- 这里只是申请一个jquery名字空间，并不是实际的设置。
       jQuery.fn.extend(jQuery, a);
       //-- 下面的语句会使jQuery对象化a函数，例如, 在如下语句执行后， 你可以通过 alert(a.b); 得到 “hello,world”输出结果。
       jQuery.a = a;
   
       回到D7 ajax.js, 如上所述，此时如果你在服务器端：
       ajax_command_invoke(NULL, 'a', array(...));
   
       ajax.js 并不能真的调用 a 对象，但是如果这里的 a 是 'addClass'等 jQuery内建对象，则可以正常使用，解决的办法是修改ajax.js源码如下：
   
       //-- Fixed by GloolsGuan@glools.com at 2013-1-6
   
       //-- original drupal7 ajax.js code --
       $element[response.method].apply($element, response.arguments);
       //-----------------------------------
   
       //-- new code for fixing personal jQuery object invoke
       if (undefined==$element[response.method]) {
           $[response.method](response.arguments);
       }else{
           $element[response.method].apply($element, response.arguments);
       }
       //------------------------------------
       将以上原始ajax.js 604行左右， 代码换成新代码即可。
       invoke: function (ajax, response, status)；
   */
   
   return array(
       '#type' => 'ajax',
       '#commands' => $ajaxCommands
   );
   

   }

2. AJAX form的处理流程
   -- PHP 端设置 --

   1. drupal系统根据表单AJAX项设置，会自动加载ajax.inc 文件，包含ajax.js程序。
      -- DRUPAL系统自动处理部分 --
   2. drupal系统会修改表单，在添加有 #ajax项目的FORM 元素上，添加 HTML 节点属性
      class='ajax-processed', 以此标明该节点相应需要AJAX处理。
      -- 客户端相应部分--
   3. 当用户点击或触发AJAX标注的FORM元素时，一个AJAX请求会由ajax.js 建立，并根据设置请求服务器响应。
      -- 服务器端相应部分 --
   4. 服务器接收到AJAX请求依次处理顺序如下：
      1. 处理表单 即 [FORM_ID]_validate, [FORM_ID]_submit等，会先执行。
      2. 调用sample_ajax_render，处理表单输出结果。
         -- D7系统操作部分
      3. 处理sample_ajax_render返回值，并附加系统AJAX相关参数生成JSON字符串，由 ajax_deliver负责最终输出结果。
         换句话说，在sample_ajax_render 中，如果你 直接 print 'hello,world'; AJAX客户端也可以接收，并且服务器端正常运行。
         但是客户端AJAX表示崩溃，因为无法识别数据，当然如果客户端操作你自己写的，另当别论。
   5. 客户端ajax.js根据服务器端返回json格式的drupal7 ajax 命令，依次执行。
   6. 一次AJAX请求流程结束。

3. 自己调用Drupal.ajax js 对象可以的，注意事项如下，且意义不大：

   1. ajaxInstance = new Drupal.ajax(base, element, element_settings);
   2. base 参数是form表单父级节点。
      element 是当前操作的html元素对象。
      element_settings 是ajax请求相关参数设置，具体参考 ajax.js 这里ajax.js说明很不清楚，得自己研究代码。