Remote/Ajax.js

   1 /*
   2 Script: Ajax.js
   3         Contains the <Ajax> class. Also contains methods to generate querystings from forms and Objects.
   4
   5 Credits:
   6         Loosely based on the version from prototype.js <http://prototype.conio.net>
   7
   8 License:
   9         MIT-style license.
  10 */
  11
  12 /*
  13 Class: Ajax
  14         An Ajax class, For all your asynchronous needs. Inherits methods, properties and options from <XHR>.
  15
  16 Arguments:
  17         url - the url pointing to the server-side script.
  18         options - optional, an object containing options.
  19
  20 Options:
  21         data - you can write parameters here. Can be a querystring, an object or a Form element.
  22         onComplete - function to execute when the ajax request completes.
  23         update - $(element) to insert the response text of the XHR into, upon completion of the request.
  24         evalScripts - boolean; default is false. Execute scripts in the response text onComplete. When the response is javascript the whole response is evaluated.
  25         evalResponse - boolean; default is false. Force global evalulation of the whole response, no matter what content-type it is.
  26
  27 Example:
  28         >var myAjax = new Ajax(url, {method: 'get'}).request();
  29 */
  30
  31 var Ajax = XHR.extend({
  32
  33         options: {
  34                 data: null,
  35                 update: null,
  36                 onComplete: Class.empty,
  37                 evalScripts: false,
  38                 evalResponse: false
  39         },
  40
  41         initialize: function(url, options){
  42                 this.addEvent('onSuccess', this.onComplete);
  43                 this.setOptions(options);
  44                 this.options.data = this.options.data || this.options.postBody;
  45                 if (!['post', 'get'].contains(this.options.method)){
  46                         this._method = '_method=' + this.options.method;
  47                         this.options.method = 'post';
  48                 }
  49                 this.parent();
  50                 this.setHeader('X-Requested-With', 'XMLHttpRequest');
  51                 this.setHeader('Accept', 'text/javascript, text/html, application/xml, text/xml, */*');
  52                 this.url = url;
  53         },
  54
  55         onComplete: function(){
  56                 if (this.options.update) $(this.options.update).empty().setHTML(this.response.text);
  57                 if (this.options.evalScripts || this.options.evalResponse) this.evalScripts();
  58                 this.fireEvent('onComplete', [this.response.text, this.response.xml], 20);
  59         },
  60
  61         /*
  62         Property: request
  63                 Executes the ajax request.
  64
  65         Example:
  66                 >var myAjax = new Ajax(url, {method: 'get'});
  67                 >myAjax.request();
  68
  69                 OR
  70
  71                 >new Ajax(url, {method: 'get'}).request();
  72         */
  73
  74         request: function(data){
  75                 data = data || this.options.data;
  76                 switch($type(data)){
  77                         case 'element': data = $(data).toQueryString(); break;
  78                         case 'object': data = Object.toQueryString(data);
  79                 }
  80                 if (this._method) data = (data) ? [this._method, data].join('&') : this._method;
  81                 return this.send(this.url, data);
  82         },
  83
  84         /*
  85         Property: evalScripts
  86                 Executes scripts in the response text
  87         */
  88
  89         evalScripts: function(){
  90                 if (this.options.evalResponse || /(ecma|java)script/.test(this.getHeader('Content-type'))) var scripts = this.response.text;
  91                 else {
  92                         var script, scripts = [], regexp = /<script[^>]*>([\s\S]*?)<\/script>/gi;
  93                         while ((script = regexp.exec(this.response.text))) scripts.push(script[1]);
  94                         scripts = scripts.join('\n');
  95                 }
  96                 if (scripts) (window.execScript) ? window.execScript(scripts) : window.setTimeout(scripts, 0);
  97         },
  98
  99         /*
 100         Property: getHeader
 101                 Returns the given response header or null
 102         */
 103
 104         getHeader: function(name) {
 105                 try {return this.transport.getResponseHeader(name);} catch(e){};
 106                 return null;
 107         }
 108
 109 });
 110
 111 /* Section: Object related Functions */
 112
 113 /*
 114 Function: Object.toQueryString
 115         Generates a querystring from key/pair values in an object
 116
 117 Arguments:
 118         source - the object to generate the querystring from.
 119
 120 Returns:
 121         the query string.
 122
 123 Example:
 124         >Object.toQueryString({apple: "red", lemon: "yellow"}); //returns "apple=red&lemon=yellow"
 125 */
 126
 127 Object.toQueryString = function(source){
 128         var queryString = [];
 129         for (var property in source) queryString.push(encodeURIComponent(property) + '=' + encodeURIComponent(source[property]));
 130         return queryString.join('&');
 131 };
 132
 133 /*
 134 Class: Element
 135         Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
 136 */
 137
 138 Element.extend({
 139
 140         /*
 141         Property: send
 142                 Sends a form with an ajax post request
 143
 144         Arguments:
 145                 options - option collection for ajax request. See <Ajax> for the options list.
 146
 147         Returns:
 148                 The Ajax Class Instance
 149
 150         Example:
 151                 (start code)
 152                 <form id="myForm" action="submit.php">
 153                 <input name="email" value="bob@bob.com">
 154                 <input name="zipCode" value="90210">
 155                 </form>
 156                 <script>
 157                 $('myForm').send()
 158                 </script>
 159                 (end)
 160         */
 161
 162         send: function(options){
 163                 return new Ajax(this.getProperty('action'), $merge({postBody: this.toQueryString()}, options, {method: 'post'})).request();
 164         }
 165
 166 });