AJAX в UMI.CMS. Часть 2

Некоторое время назад я рассматривал яваскриптовый класс для ajax-отправки запросов в среде UMI.CMS. За прошедшее время пришел к мысли, что класс неплохо бы доработать...

Что хочется от яваскрипта:

• задавать адрес обработчика
• задавать параметры поштучно или массивом
• по получении данных с ними, обычно, что-то требуется сделать. Будем передавать callback-функцию в наш класс

Пишем класс. Как всегда, я рассчитываю на использование фреймворка Mootools, в данном случае версии 1.2.5.1.  Версия 1.3 очень хороша, но напрочь лишена совместимости; посему пока воздерживаюсь от ее использования. Если вы фанат jquery, то рецепт здесь.

Это код для mootools 1.2

var umiRequest = new Class({
      Implements: [Events, Options],
     options: {
          url: '/content/get_ajax_content/',
          method: 'post',
         callback:  function(text){return text},
          params: new Hash,
         mode: 'update'  //update or result
     },
      initialize: function (){
         var  params = Array.link(arguments, {options: Object.type, elements: $defined});
          this.setOptions(params.options || null);
     },
      setValue: function(key, value){
          this.options.params.set(key,value);
     },
      setValues: function(values){//must be an object
          this.options.params.extend(values);
     },
      send: function (request){
          this.cook = document.cookie;//получаем все куки
          request.setHeader('Cookie', this.cook);
          request.send();
     },
    commit:  function(){
         if(!this.options.url)  alert('Не указан целевой адрес!');//здесь бы хорошо сделать более умную  обработку ошибки
         var _self =  this;
         var data =  this.options.params.toQueryString();
         
          var request = new Request({
              method: this.options.method,
              url: this.options.url,
              data: data,
              evalScripts: true,
              onComplete: function(text){
                  if(_self.options.mode == 'result') return text;
                  else _self.options.callback(text);
          }
         });
          this.send(request);
     }
 }); 

Это код для mootools 1.3

var umiRequest = new Class({
     Implements: [Events, Options],
     options: {
         url: '/content/get_ajax_content/',
         method: 'post',
         callback: function(text){return text},
         params: new Object({}),
         mode: 'update' //update or result
     },
     initialize: function (){
         var params = Array.link(arguments, {options: Object.type, elements: $defined});
         this.setOptions(params.options || null);
     },
     setValue: function(key, value){
         this.options.params[key] = value;
     },
     setValues: function(values){//must be an object
         this.options.params.append(values);
     },
     send: function (request){
         this.cook = document.cookie;//получаем все куки
         request.setHeader('Cookie', this.cook);
         request.send();
     },
     commit: function(){
         if(!this.options.url) alert('Не указан целевой адрес!');
         var _self = this;
         var data = Object.toQueryString(this.options.params);
 
         var request = new Request({
             method: this.options.method,
             url: this.options.url,
             data: data,
             evalScripts: true,
             onComplete: function(text){
                 if(_self.options.mode == 'result') return text;
                 else _self.options.callback(text);
             }
         });
         this.send(request);
     }
 });

Параметры:

• url - адрес server-side обработчика
• method - метод передачи данных
• callback - функция обратного вызова
• params - хеш параметров, из которых будет сформирована QUERY_STRING (объект Hash в терминологии Mootools)
• mode - указывает, следует ли вернуть результат в чистом виде или что-то с ним сделать; предусмотрен был на этапе создания, но пока не использовался.

Методы:

• setValue - задать пару ключ-значение, которые будут добавлены в QUERY_STRING.
• setValues - то же, но передается Hash. Удобно использовать, когда данные берутся из формы
• send - отправка формы. Только для совместимости с более ранними версиями
• commit - отправка формы

 

Пример использования

Допустим, имеем форму

<div id="form_container">
     <form onsubmit="return  false;">
         <input type="text"  name="value1">
         <input type="text"  name="value2">
         <input type="submit"  name="submit" onclick="ajax_send(this)">
     </form>
 </div>

function ajax_send(el){
     var form =  $(el).getParent('form'); 
 
     var callback =  function(text){
          $('form_container').empty().set('html',text);
          //по получении ответа удалить код формы 
          //и полученный ответ вставить на ее место как html
     }
 
      var request = new umiRequest({
          url: '/content/query/',
          callback: callback
     });
      request.setValue('mode','mail');//задаем некий дополнительный параметр
 
      //получаем данные из формы; 
     //столь длинная запись -  чтобы получить на выходе корректный Hash. 
     //В идеале,  надо бы перенести это в класс. Доработайте;)
      request.setValues(form.toQueryString().parseQueryString());
 
      request.commit();
 }