Remote/XHR.js

   1 /*
   2 Script: XHR.js
   3         Contains the basic XMLHttpRequest Class Wrapper.
   4
   5 License:
   6         MIT-style license.
   7 */
   8
   9 /*
  10 Class: XHR
  11         Basic XMLHttpRequest Wrapper.
  12
  13 Arguments:
  14         options - an object with options names as keys. See options below.
  15
  16 Options:
  17         method - 'post' or 'get' - the protocol for the request; optional, defaults to 'post'.
  18         async - boolean: asynchronous option; true uses asynchronous requests. Defaults to true.
  19         onRequest - function to execute when the XHR request is fired.
  20         onSuccess - function to execute when the XHR request completes.
  21         onStateChange - function to execute when the state of the XMLHttpRequest changes.
  22         onFailure - function to execute when the state of the XMLHttpRequest changes.
  23         encoding - the encoding, defaults to utf-8.
  24         autoCancel - cancels the already running request if another one is sent. defaults to false.
  25         headers - accepts an object, that will be set to request headers.
  26
  27 Properties:
  28         running - true if the request is running.
  29         response - object, text and xml as keys. You can access this property in the onSuccess event.
  30
  31 Example:
  32         >var myXHR = new XHR({method: 'get'}).send('http://site.com/requestHandler.php', 'name=john&lastname=dorian');
  33 */
  34
  35 var XHR = new Class({
  36
  37         options: {
  38                 method: 'post',
  39                 async: true,
  40                 onRequest: Class.empty,
  41                 onSuccess: Class.empty,
  42                 onFailure: Class.empty,
  43                 urlEncoded: true,
  44                 encoding: 'utf-8',
  45                 autoCancel: false,
  46                 headers: {}
  47         },
  48
  49         setTransport: function(){
  50                 this.transport = (window.XMLHttpRequest) ? new XMLHttpRequest() : (window.ie ? new ActiveXObject('Microsoft.XMLHTTP') : false);
  51                 return this;
  52         },
  53
  54         initialize: function(options){
  55                 this.setTransport().setOptions(options);
  56                 this.options.isSuccess = this.options.isSuccess || this.isSuccess;
  57                 this.headers = {};
  58                 if (this.options.urlEncoded && this.options.method == 'post'){
  59                         var encoding = (this.options.encoding) ? '; charset=' + this.options.encoding : '';
  60                         this.setHeader('Content-type', 'application/x-www-form-urlencoded' + encoding);
  61                 }
  62                 if (this.options.initialize) this.options.initialize.call(this);
  63         },
  64
  65         onStateChange: function(){
  66                 if (this.transport.readyState != 4 || !this.running) return;
  67                 this.running = false;
  68                 var status = 0;
  69                 try {status = this.transport.status} catch(e){};
  70                 if (this.options.isSuccess.call(this, status)) this.onSuccess();
  71                 else this.onFailure();
  72                 this.transport.onreadystatechange = Class.empty;
  73         },
  74
  75         isSuccess: function(status){
  76                 return ((status >= 200) && (status < 300));
  77         },
  78
  79         onSuccess: function(){
  80                 this.response = {
  81                         'text': this.transport.responseText,
  82                         'xml': this.transport.responseXML
  83                 };
  84                 this.fireEvent('onSuccess', [this.response.text, this.response.xml]);
  85                 this.callChain();
  86         },
  87
  88         onFailure: function(){
  89                 this.fireEvent('onFailure', this.transport);
  90         },
  91
  92         /*
  93         Property: setHeader
  94                 Add/modify an header for the request. It will not override headers from the options.
  95
  96         Example:
  97                 >var myAjax = new Ajax(url, {method: 'get', headers: {'X-Request': 'JSON'}});
  98                 >myAjax.setHeader('Last-Modified','Sat, 1 Jan 2005 05:00:00 GMT');
  99         */
 100
 101         setHeader: function(name, value){
 102                 this.headers[name] = value;
 103                 return this;
 104         },
 105
 106         /*
 107         Property: send
 108                 Opens the XHR connection and sends the data. Data has to be null or a string.
 109
 110         Example:
 111                 >var myXhr = new XHR({method: 'post'});
 112                 >myXhr.send(url, querystring);
 113                 >
 114                 >var syncXhr = new XHR({async: false, method: 'post'});
 115                 >syncXhr.send(url, null);
 116                 >
 117         */
 118
 119         send: function(url, data){
 120                 if (this.options.autoCancel) this.cancel();
 121                 else if (this.running) return this;
 122                 this.running = true;
 123                 if (data && this.options.method == 'get') url = url + (url.contains('?') ? '&' : '?') + data, data = null;
 124                 this.transport.open(this.options.method, url, this.options.async);
 125                 this.transport.onreadystatechange = this.onStateChange.bind(this);
 126                 if ((this.options.method == 'post') && this.transport.overrideMimeType) this.setHeader('Connection', 'close');
 127                 $extend(this.headers, this.options.headers);
 128                 for (var type in this.headers) try {this.transport.setRequestHeader(type, this.headers[type]);} catch(e){};
 129                 this.fireEvent('onRequest');
 130                 this.transport.send($pick(data, null));
 131                 return this;
 132         },
 133
 134         /*
 135         Property: cancel
 136                 Cancels the running request. No effect if the request is not running.
 137
 138         Example:
 139                 >var myXhr = new XHR({method: 'get'}).send(url);
 140                 >myXhr.cancel();
 141         */
 142
 143         cancel: function(){
 144                 if (!this.running) return this;
 145                 this.running = false;
 146                 this.transport.abort();
 147                 this.transport.onreadystatechange = Class.empty;
 148                 this.setTransport();
 149                 this.fireEvent('onCancel');
 150                 return this;
 151         }
 152
 153 });
 154
 155 XHR.implement(new Chain, new Events, new Options);