[Sommaire] [Imprimer]

   1  /**
   2   * JavaScript library for use with HTML_AJAX
   3   *
   4   * This library is free software; you can redistribute it and/or
   5   * modify it under the terms of the GNU Lesser General Public
   6   * License as published by the Free Software Foundation; either
   7   * version 2.1 of the License, or (at your option) any later version.
   8   *
   9   * This library is distributed in the hope that it will be useful,
  10   * but WITHOUT ANY WARRANTY; without even the implied warranty of
  11   * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  12   * Lesser General Public License for more details.
  13   *
  14   * You should have received a copy of the GNU Lesser General Public
  15   * License along with this library; if not, write to:
  16   * Free Software Foundation, Inc.,
  17   * 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
  18   *
  19   * @category    HTML
  20   * @package    Ajax
  21   * @author    Joshua Eichorn <josh@bluga.net>
  22   * @author    Arpad Ray <arpad@php.net>
  23   * @author    David Coallier <davidc@php.net>
  24   * @author    Elizabeth Smith <auroraeosrose@gmail.com>
  25   * @copyright    2005 Joshua Eichorn, Arpad Ray, David Coallier, Elizabeth Smith
  26   * @license    http://www.opensource.org/licenses/lgpl-license.php  LGPL
  27   */
  28  
  29  /**
  30   * HTML_AJAX static methods, this is the main proxyless api, it also handles global error and event handling
  31   */
  32  var HTML_AJAX = {
  33      defaultServerUrl: false,
  34      defaultEncoding: 'JSON',
  35      queues: false,
  36      clientPools: {},
  37      // get an HttpClient, supply a name to use the pool of that name or the default if it isn't found
  38      httpClient: function(name) {
  39          if (name) {
  40              if (this.clientPools[name]) {
  41                  return this.clientPools[name].getClient();
  42              }
  43          }
  44          return this.clientPools['default'].getClient();
  45      },
  46      // Pushing the given request to queue specified by it, in default operation this will immediately make a request
  47      // request might be delayed or never happen depending on the queue setup
  48      // making a sync request to a non immediate queue will cause you problems so just don't do it
  49      makeRequest: function(request) {
  50          if (!HTML_AJAX.queues[request.queue]) {
  51              var e = new Error('Unknown Queue: '+request.queue);
  52              if (HTML_AJAX.onError) {
  53                  HTML_AJAX.onError(e);
  54                  return false;
  55              }
  56              else {
  57                  throw(e);
  58              }
  59          }
  60          else {
  61              var qn = request.queue;
  62              var q = HTML_AJAX.queues[qn];
  63  
  64              HTML_AJAX.queues[request.queue].addRequest(request);
  65              return HTML_AJAX.queues[request.queue].processRequest();
  66          }
  67      },
  68      // get a serializer object for a specific encoding
  69      serializerForEncoding: function(encoding) {
  70          for(var i in HTML_AJAX.contentTypeMap) {
  71              if (encoding == HTML_AJAX.contentTypeMap[i] || encoding == i) {
  72                  return eval("new HTML_AJAX_Serialize_"+i+";");
  73              }
  74          }
  75          return new HTML_AJAX_Serialize_Null();
  76      },
  77      fullcall: function(url,encoding,className,method,callback,args, options) {
  78          var serializer = HTML_AJAX.serializerForEncoding(encoding);
  79  
  80          var request = new HTML_AJAX_Request(serializer);
  81          if (callback) {
  82              request.isAsync = true;
  83          }
  84          request.requestUrl = url;
  85          request.className = className;
  86          request.methodName = method;
  87          request.callback = callback;
  88          request.args = args;
  89          if (options) {
  90              for(var i in options) {
  91                  request[i] = options[i];
  92              }
  93              if (options.grab) {
  94                  if (!request.args || !request.args.length) {
  95                      request.requestType = 'GET';
  96                  }
  97              }
  98          }
  99  
 100          return HTML_AJAX.makeRequest(request);
 101      },
 102      callPhpCallback: function(phpCallback, jsCallback, url) {
 103          var args = new Array();
 104          for (var i = 3; i < arguments.length; i++) {
 105              args.push(arguments[i]);
 106          }
 107          if (HTML_AJAX_Util.getType(phpCallback[0]) == 'object') {
 108              jsCallback(phpCallback[0][phpCallback[1]](args));
 109              return;
 110          }
 111          if (!url) {
 112              url = HTML_AJAX.defaultServerUrl;
 113          }
 114          HTML_AJAX.fullcall(url, HTML_AJAX.defaultEncoding,
 115              false, false, jsCallback, args, {phpCallback: phpCallback});
 116      },
 117      call: function(className,method,callback) {
 118          var args = new Array();
 119          for(var i = 3; i < arguments.length; i++) {
 120              args.push(arguments[i]);
 121          }
 122          return HTML_AJAX.fullcall(HTML_AJAX.defaultServerUrl,HTML_AJAX.defaultEncoding,className,method,callback,args);
 123      },
 124      grab: function(url,callback,options) {
 125          if (!options) {
 126              options = {grab:true};
 127          }
 128          else {
 129              options['grab'] = true;
 130          }
 131          return HTML_AJAX.fullcall(url,'Null',false,null,callback, '', options);
 132      },
 133      post: function(url,payload,callback,options) {
 134          var serializer = 'Null';
 135          if (HTML_AJAX_Util.getType(payload) == 'object') {
 136              serializer = 'Urlencoded';
 137          }
 138          return HTML_AJAX.fullcall(url,serializer,false,null,callback, payload, options);
 139      },
 140      replace: function(id) {
 141          var callback = function(result) {
 142              HTML_AJAX_Util.setInnerHTML(document.getElementById(id),result);
 143          }
 144          if (arguments.length == 2) {
 145              // grab replacement
 146              HTML_AJAX.grab(arguments[1],callback);
 147          }
 148          else {
 149              // call replacement
 150              var args = new Array();
 151              for(var i = 3; i < arguments.length; i++) {
 152                  args.push(arguments[i]);
 153              }
 154              HTML_AJAX.fullcall(HTML_AJAX.defaultServerUrl,HTML_AJAX.defaultEncoding,arguments[1],arguments[2],callback,args, {grab:true});
 155          }
 156      },
 157      append: function(id) {
 158          var callback = function(result) {
 159              HTML_AJAX_Util.setInnerHTML(document.getElementById(id),result,'append');
 160          }
 161          if (arguments.length == 2) {
 162              // grab replacement
 163              HTML_AJAX.grab(arguments[1],callback);
 164          }
 165          else {
 166              // call replacement
 167              var args = new Array();
 168              for(var i = 3; i < arguments.length; i++) {
 169                  args.push(arguments[i]);
 170              }
 171              HTML_AJAX.fullcall(HTML_AJAX.defaultServerUrl,HTML_AJAX.defaultEncoding,arguments[1],arguments[2],callback,args, {grab:true});
 172          }
 173      }, 
 174      // override to add top level loading notification (start)
 175      Open: function(request) {
 176      },
 177      // override to add top level loading notification (finish)
 178      Load: function(request) {
 179      },
 180      /*
 181      // A really basic error handler 
 182      onError: function(e) {
 183          msg = "";
 184          for(var i in e) {
 185              msg += i+':'+e[i]+"\n";
 186          }
 187          alert(msg);
 188      },
 189      */
 190      // Class postfix to content-type map
 191      contentTypeMap: {
 192          'JSON':            'application/json',
 193          'Null':            'text/plain',
 194          'Error':        'application/error',
 195          'PHP':            'application/php-serialized',
 196          'HA' :            'application/html_ajax_action',
 197          'Urlencoded':    'application/x-www-form-urlencoded'
 198      },
 199      // used internally to make queues work, override Load or onError to perform custom events when a request is complete
 200      // fires on success and error
 201      requestComplete: function(request,error) {
 202          for(var i in HTML_AJAX.queues) {
 203              if (HTML_AJAX.queues[i].requestComplete) {
 204                  HTML_AJAX.queues[i].requestComplete(request,error);
 205              }
 206          }
 207      },
 208      
 209      // turns a form into a urlencoded string
 210      formEncode: function(form, array_format) {
 211          form = HTML_AJAX_Util.getElement(form);
 212          var el, inpType, value, name;
 213          var out = (array_format) ? {} : '';
 214          var inputTags = form.getElementsByTagName('INPUT');
 215          var selectTags = form.getElementsByTagName('SELECT');
 216          var buttonTags = form.getElementsByTagName('BUTTON');
 217          var textareaTags = form.getElementsByTagName('TEXTAREA');
 218          var arrayRegex = /(.+)%5B%5D/;
 219  
 220          var validElement = function (element) {
 221              if (!element || !element.getAttribute) {
 222                  return false;
 223              }
 224              el = element;
 225              name = HTML_AJAX_Util.encodeUrl(el.getAttribute('name'));
 226              if (!name) {
 227                  // no element name so skip
 228                  return false;
 229              }
 230              if (element.disabled) {
 231                  return false;
 232              }
 233              
 234              if (!array_format) {
 235                  value = HTML_AJAX_Util.encodeUrl(el.value);
 236              } else {
 237                  value = el.value;
 238              }
 239              
 240              inpType = el.getAttribute('type');
 241              return true;
 242          }
 243          
 244          inputLoop:
 245          for (var i=0; i < inputTags.length; i++) {
 246              if (!validElement(inputTags[i])) {
 247                  continue;
 248              }
 249              if (inpType == 'checkbox' || inpType == 'radio') {
 250                  if (!el.checked) {
 251                      // unchecked radios/checkboxes don't get submitted
 252                      continue inputLoop;
 253                  }
 254                  var arr_var = arrayRegex.exec(name); 
 255                  if (array_format && arr_var) {
 256                      if (!out[arr_var[1]]) {
 257                          out[arr_var[1]] = new Array();
 258                      }
 259                      out[arr_var[1]].push(value);
 260                      continue inputLoop;
 261                  }
 262              }
 263              // add element to output array
 264              if (array_format) {
 265                  out[name] = value;
 266              } else {
 267                  out += name + '=' + value + '&';
 268              }
 269          } // end inputLoop
 270  
 271          selectLoop:
 272          for (var i=0; i<selectTags.length; i++) {
 273              if (!validElement(selectTags[i])) {
 274                  continue selectLoop;
 275              }
 276              var options = el.options;
 277              for (var z=0; z<options.length; z++){
 278                  var option=options[z];
 279                  if(option.selected){
 280                      if (array_format) {
 281                          if (el.type == 'select-one') {
 282                              out[name] = option.value;
 283                              //only one item can be selected
 284                              continue selectLoop;
 285                          } else {
 286                              if (!out[name]) {
 287                                  out[name] = new Array();
 288                              }
 289                              out[name].push(option.value);
 290                          }
 291                      } else {
 292                          out += name + '=' + option.value + '&';
 293                          if (el.type == 'select-one') {
 294                              continue selectLoop;
 295                          }
 296                      }
 297                  }
 298              }
 299          } // end selectLoop
 300  
 301          buttonLoop:
 302          for (var i=0; i<buttonTags.length; i++) {
 303              if (!validElement(buttonTags[i])) {
 304                  continue;
 305              }
 306              // add element to output array
 307              if (array_format) {
 308                  out[name] = value;
 309              } else {
 310                  out += name + '=' + value + '&';
 311              }
 312          } // end buttonLoop
 313  
 314          textareaLoop:
 315          for (var i=0; i<textareaTags.length; i++) {
 316              if (!validElement(textareaTags[i])) {
 317                  continue;
 318              }
 319              // add element to output array
 320              if (array_format) {
 321                  out[name] = value;
 322              } else {
 323                  out += name + '=' + value + '&';
 324              }
 325          } // end textareaLoop
 326          
 327          return out;
 328      },
 329      // submits a form through ajax. both arguments can be either DOM nodes or IDs, if the target is omitted then the form is set to be the target
 330      formSubmit: function (form, target, options)
 331      {
 332          form = HTML_AJAX_Util.getElement(form);
 333          if (!form) {
 334          // let the submit be processed normally
 335              return false;
 336          }
 337  
 338          var out = HTML_AJAX.formEncode(form);
 339          target = HTML_AJAX_Util.getElement(target);
 340          if (!target) {
 341              target = form;
 342          }
 343          var action = form.attributes['action'].value;
 344          var callback = function(result) {
 345              HTML_AJAX_Util.setInnerHTML(target,result);
 346          }
 347  
 348          var serializer = HTML_AJAX.serializerForEncoding('Null');
 349          var request = new HTML_AJAX_Request(serializer);
 350          request.isAsync = true;
 351          request.callback = callback;
 352  
 353          switch (form.getAttribute('method').toLowerCase()) {
 354          case 'post':
 355              var headers = {};
 356              headers['Content-Type'] = 'application/x-www-form-urlencoded';
 357              request.customHeaders = headers;
 358              request.requestType = 'POST';
 359              request.requestUrl = action;
 360              request.args = out;
 361              break;
 362          default:
 363              if (action.indexOf('?') == -1) {
 364                  out = '?' + out.substr(0, out.length - 1);
 365              }
 366              request.requestUrl = action+out;
 367              request.requestType = 'GET';
 368          }
 369  
 370          if(options) {
 371              for(var i in options) {
 372                  request[i] = options[i];
 373              }
 374          }
 375          HTML_AJAX.makeRequest(request);
 376          return true;
 377      }, // end formSubmit()
 378      makeFormAJAX: function(form,target,options) {
 379          form = HTML_AJAX_Util.getElement(form);
 380          var preSubmit = false;
 381          if(typeof form.onsubmit != 'undefined') {
 382              preSubmit = form.onsubmit;
 383              form.onsubmit = function() {};
 384          }
 385          form.HAOptions = options;
 386          var handler = function(e) {
 387              var form = HTML_AJAX_Util.eventTarget(e);
 388  
 389              var valid = true;
 390              if (preSubmit) {
 391                  valid = preSubmit();
 392              }
 393              if (valid) {
 394                  HTML_AJAX.formSubmit(form,target,form.HAOptions);
 395              }
 396              // cancel submission in IE
 397              e.returnValue = false;
 398              // cancel submission in FF
 399              if (e.preventDefault) {
 400                  e.preventDefault();
 401              }
 402          }
 403          HTML_AJAX_Util.registerEvent(form,'submit',handler);
 404      }
 405  }
 406  
 407  
 408  
 409  
 410  // small classes that I don't want to put in there own file
 411  
 412  function HTML_AJAX_Serialize_Null() {}
 413  HTML_AJAX_Serialize_Null.prototype = {
 414      contentType: 'text/plain; charset=utf-8',
 415      serialize: function(input) {
 416          return new String(input).valueOf();
 417      },
 418      
 419      unserialize: function(input) {
 420          return new String(input).valueOf();    
 421      }
 422  }
 423  
 424  function HTML_AJAX_Serialize_XML() {}
 425  HTML_AJAX_Serialize_XML.prototype = {
 426      contentType: 'application/xml; charset=utf-8',
 427      serialize: function(input) {
 428          var xml = '';
 429          if(typeof(input) == 'object' && input)
 430          {
 431              for (var i = 0;i<input.length;i++)
 432              {
 433                  xml += new XMLSerializer().serializeToString(input[i]);
 434              }
 435          }
 436          return xml;
 437      },
 438  
 439      unserialize: function(input) {
 440          return input;
 441      }
 442  }
 443  
 444  // serialization class for JSON, wrapper for JSON.stringify in json.js
 445  function HTML_AJAX_Serialize_JSON() {}
 446  HTML_AJAX_Serialize_JSON.prototype = {
 447      contentType: 'application/json; charset=utf-8',
 448      serialize: function(input) {
 449          return HTML_AJAX_JSON.stringify(input);
 450      },
 451      unserialize: function(input) {
 452          try {
 453              return eval('('+input+')');
 454          } catch(e) {
 455              // sometimes JSON encoded input isn't created properly, if eval of it fails we use the more forgiving but slower parser so will at least get something
 456              return HTML_AJAX_JSON.parse(input);
 457          }
 458      }
 459  }
 460  
 461  function HTML_AJAX_Serialize_Error() {}
 462  HTML_AJAX_Serialize_Error.prototype = {
 463      contentType: 'application/error; charset=utf-8',
 464      serialize: function(input) {
 465          var ser = new HTML_AJAX_Serialize_JSON();
 466          return ser.serialize(input);
 467      },
 468      unserialize: function(input) {
 469          var ser = new HTML_AJAX_Serialize_JSON();
 470          var data = new ser.unserialize(input);
 471  
 472          var e = new Error('PHP Error: '+data.errStr);
 473          for(var i in data) {
 474              e[i] = data[i];
 475          }
 476          throw e;
 477      }
 478  }
 479  
 480  // Processing Queues
 481  
 482  // simple queue, just processes the request immediately
 483  function HTML_AJAX_Queue_Immediate() {}
 484  HTML_AJAX_Queue_Immediate.prototype = {
 485      request: false,
 486      addRequest: function(request) {
 487          this.request = request;
 488      },
 489      processRequest: function() {
 490          var client = HTML_AJAX.httpClient();
 491          client.request = this.request;
 492          return client.makeRequest();
 493      }
 494  }
 495  
 496  
 497  
 498  // create a default queue, has to happen after the Queue class has been defined
 499  HTML_AJAX.queues = new Object();
 500  HTML_AJAX.queues['default'] = new HTML_AJAX_Queue_Immediate();
 501