0.6.x/js/04_net/01_XNetXHR.js

   1 // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\r
   2 // https://web.archive.org/web/20071101021832/http://web.paulownia.jp/script/ajax/xmlhttp4.html\r
   3 // https://web.archive.org/web/20091029170015/http://wiki.paulownia.jp/ajax/xmlhttprequest\r
   4 /* \r
   5  * http://ponpon-village.net/ajax/xmlhttp.htm\r
   6  * IE のバージョンによっては、ActiveXObject("Msxml2.XMLHTTP.5.0") , ActiveXObject("Msxml2.XMLHTTP.4.0") ,\r
   7 ActiveXObject("Msxml2.XMLHTTP.3.0") , ActiveXObject("Msxml2.XMLHTTP") なども使用出来る。\r
   8 \r
   9 http://vird2002.s8.xrea.com/javascript/XMLHttpRequest.html\r
  10 // --- 使うべきオブジェクト\r
  11 new ActiveXObject( 'Msxml2.XMLHTTP.3.0' ); // バージョン3.0 広範に利用されているので、今後も bugfix を行う\r
  12 new ActiveXObject( 'Msxml2.XMLHTTP.6.0' ); // バージョン6.0 は最新版なので bugfix を続ける\r
  13 \r
  14 // --- 使うべきではないオブジェクト\r
  15 new ActiveXObject( 'Microsoft.XMLHTTP' );  // Microsoft接頭辞は古いので指定すべきではない\r
  16 new ActiveXObject( 'Msxml.XMLHTTP' );      // Msxml2接頭辞を指定すべき\r
  17 new ActiveXObject( 'Msxml2.XMLHTTP' );     // バージョンを省略すると 3.0 として扱われるので、バージョンは明記すべき\r
  18 new ActiveXObject( 'Msxml2.XMLHTTP.4.0' ); // バージョン4.0 は bugfix が行われないので、3.0 か 6.0 を指定すべき\r
  19 new ActiveXObject( 'Msxml2.XMLHTTP.5.0' ); // バージョン5.0 は bugfix が行われないので、3.0 か 6.0 を指定すべき\r
  20 \r
  21  */\r
  22 var X_Net_XHR_W3C      = window[ 'XMLHttpRequest' ] && new XMLHttpRequest(),\r
  23         X_Net_XHR_X_DOMAIN = window[ 'XDomainRequest' ] && new XDomainRequest(),\r
  24         X_Net_XHR_VERSION  = 0,\r
  25         X_Net_XHR_ACTIVE_X = !X.UA.IE4 && X.UA.IE < 8 && X.UA.ActiveX && ( new Function( [\r
  26                 'var x=".XMLHTTP",',\r
  27                         'm="MSXML2"+x,',\r
  28                         'n=[m+".6.0",m+".3.0",m+".5.0",m+".4.0",m,"Microsoft"+x],',\r
  29                         'v=[6,3,5,4,2,1],',\r
  30                         'i=-1;',\r
  31                 'for(;i<5;){',\r
  32                         'try{',\r
  33                                 'return[v[++i],new ActiveXObject(n[i])]',\r
  34                         '}catch(e){return false}',\r
  35                 '}'\r
  36         ].join( '' ) ) )();\r
  37 \r
  38 if( X_Net_XHR_ACTIVE_X ){\r
  39         X_Net_XHR_VERSION  = X_Net_XHR_ACTIVE_X[ 0 ];\r
  40         X_Net_XHR_ACTIVE_X = X_Net_XHR_ACTIVE_X[ 1 ];\r
  41 };\r
  42 \r
  43 X.Net.XHR = {\r
  44         // Opera7.6+, Safari1.2+, khtml3.?+, Gecko0.9.7+\r
  45         W3C         : !!X_Net_XHR_W3C,\r
  46 \r
  47         X_DOMAIN    : !!X_Net_XHR_X_DOMAIN,\r
  48 \r
  49         ACTIVE_X    : !!X_Net_XHR_ACTIVE_X,\r
  50 \r
  51 /*\r
  52  * http://hakuhin.jp/as/import.html\r
  53  * ファイルの読み込みについて\r
  54  * http://hakuhin.jp/as/javascript.html\r
  55  * Flash から JavaScript にアクセスする\r
  56  */\r
  57         FLASH       : false,\r
  58         \r
  59 \r
  60 // ie7 ではローカルリソースには ActiveX の XHR を使う\r
  61 \r
  62 // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\r
  63 // Progress Events      Chrome7, firefox3.5, ie10, opera12, Safari?, Chrome for Android 0.16\r
  64         PROGRESS    : false, //\r
  65 \r
  66         UL_PROGRESS : false,\r
  67 \r
  68         CANCELABLE  : false,\r
  69         \r
  70         TIMEOUT     : false\r
  71 \r
  72 };\r
  73 \r
  74 if( X.Net.XHR.W3C || X_Net_XHR_ACTIVE_X ){\r
  75         \r
  76         X_NET_XHRWrapper = X.Class._override(\r
  77                 new X.EventDispatcher(),\r
  78                 {\r
  79                                                 \r
  80                         _rawObject : X_Net_XHR_W3C || X_Net_XHR_ACTIVE_X,\r
  81                         _isXHR     : true,  // X.EventDispatcher で使用 for ie8-\r
  82                         _isXDR     : false, // for ie8\r
  83                         \r
  84                         _method    : '',\r
  85                         _type      : '',\r
  86                         _busy      : false,\r
  87                         _canceled  : false,\r
  88                         _percent   : 0,\r
  89                         \r
  90                         load : function( obj ){\r
  91                                 var raw      = this._rawObject,\r
  92                                         method   = obj[ 'method' ],\r
  93                                         url      = obj[ 'url' ],\r
  94                                         async    = obj[ 'async' ],\r
  95                                         user     = obj[ 'user' ],\r
  96                                         password = obj[ 'password' ],\r
  97                                         headers  = obj[ 'headers' ],\r
  98                                         postbody = obj[ 'postbody' ],\r
  99                                         timeout  = obj[ 'timeout' ],\r
 100                                         temp;\r
 101                                 \r
 102                                 if( obj[ 'type' ] ){\r
 103                                         this._type = obj[ 'type' ];\r
 104                                 } else {\r
 105                                         temp = url.split( '#' )[ 0 ].split( '?' )[ 0 ].split( '.' );\r
 106                                         if( 2 <= temp.length ){\r
 107                                                 this._type = temp[ temp.length - 1 ].toLowerCase();\r
 108                                         };\r
 109                                 };\r
 110                                 \r
 111                                 // TODO ie7 http://127.0.0.1 に対しては ActiveX を使う, onerror は不可\r
 112                                 \r
 113                                 if( X_Net_XHR_X_DOMAIN ){\r
 114                                         if( false /* isXDomain( url ) */ ){ // isXDomain\r
 115                                                 if( !this._isXDR ){\r
 116                                                         X_EventDispatcher_toggleAllEvents( this, false );\r
 117                                                         this._rawObject = X_Net_XHR_X_DOMAIN;\r
 118                                                         X_EventDispatcher_toggleAllEvents( this, true );\r
 119                                                         this._isXDR = true;\r
 120                                                 };\r
 121                                         } else {\r
 122                                                 if( this._isXDR ){\r
 123                                                         X_EventDispatcher_toggleAllEvents( this, false );\r
 124                                                         this._rawObject = X_Net_XHR_W3C || X_Net_XHR_ACTIVE_X;\r
 125                                                         X_EventDispatcher_toggleAllEvents( this, true );\r
 126                                                         this._isXDR = false;\r
 127                                                 };\r
 128                                         };\r
 129                                 };\r
 130                                 //if( raw.timeout !== undefined ) raw.timeout = timeout || -1;\r
 131                                 raw.open( method, url, false );\r
 132                                 \r
 133                                 // http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_notes_r_1.html\r
 134                                 // raw.overrideMimeType()\r
 135                                 if( !X_Net_XHR_ACTIVE_X && X.Type.isFunction( raw.setRequestHeader ) ){\r
 136                                         for( p in headers ){\r
 137                                                 raw.setRequestHeader( p, headers[ p ] ); // Opera8.01+, MSXML3+\r
 138                                         };              \r
 139                                 };\r
 140                                 \r
 141                                 // send 前にフラグを立てる,回線が早いと raw.send() 内で onload -> _busy = false ののち、 _busy = true するため。\r
 142                                 this._busy = true;\r
 143                                 \r
 144                                 // http://allabout.co.jp/gm/gc/24097/#1\r
 145                                 // sendをonreadystatechangeの前に記述すると、ieでは動作しなくなります、、、。\r
 146                                 // konquerorでエラーが発生するのでここでは、とりあえず、send('') としました。\r
 147                                 raw.send( postbody || '' );\r
 148                         },\r
 149                         \r
 150                         cancel : function(){\r
 151                                 X.Net.XHR.CANCELABLE && this._rawObject.abort();\r
 152                                 this._canceled = true;\r
 153                         },\r
 154                         \r
 155                         reset : function(){\r
 156                                 this._method   = this._type = '';\r
 157                                 this._canceled = this._busy = false;\r
 158                                 this._percent  = 0;\r
 159                         },\r
 160                         \r
 161                         handleEvent : function( e ){\r
 162                                 var raw  = this._rawObject,\r
 163                                         live = !this._canceled,\r
 164                                         status, data;\r
 165 \r
 166                                 switch( e.type ){\r
 167                                         /*\r
 168                                          * http://memopad.bitter.jp/w3c/ajax/ajax_xmlhttprequest_onreadystatechange.html\r
 169                                         readyState      XMLHttpRequest のステータスを保持する。0 から 4 までに変化する:\r
 170                                         0: リクエストは初期化されていない\r
 171                                         1: サーバ接続は確立した\r
 172                                         2: リクエストを受信した\r
 173                                         3: リクエストの処理中\r
 174                                         4: リクエストは終了してレスポンスの準備が完了\r
 175                                         status  200: "OK"\r
 176                                         404: Page not found\r
 177                                         \r
 178                                         If-Modified-Sinceヘッダを利用してWebページのキャッシュを行うXMLHttpRequestラッパー\r
 179                                         http://www.semblog.org/msano/archives/000407.html\r
 180                                         * */            \r
 181                                         case 'readystatechange' :\r
 182                                                 //if( !X.Net.XHR.PROGRESS ){\r
 183                                                         switch( raw.readyState ){\r
 184                                                                 case 0 :\r
 185                                                                 case 1 :\r
 186                                                                         return;\r
 187                                                                 case 2 : // 0% ajaxstart\r
 188                                                                         live && this.asyncDispatch( 0, { type : X.Event.PROGRESS, percent : 0 } );\r
 189                                                                         return;\r
 190                                                                 case 3 :\r
 191                                                                         live && this.asyncDispatch( 0, { type : X.Event.PROGRESS, percent : this._percent < 99.9 ? 99.9 : ( this._percent + 100 ) / 2 } );\r
 192                                                                         // 99.9%\r
 193                                                                         return;\r
 194                                                                 case 4 :\r
 195                                                                         if( this._percent === 100 ) return; // Opera8 readystatechange が2重に発生\r
 196                                                                         // 100%\r
 197                                                                         break; // load へ\r
 198                                                                 default :\r
 199                                                                         // error\r
 200                                                                         return;\r
 201                                                         };                                              \r
 202                                                 //};\r
 203         \r
 204                                         case 'load' :\r
 205                                                 \r
 206                                                 if( !live ) return this.reset();\r
 207                                                 if( this._percent === 100 ) return;\r
 208                                                 \r
 209                                                 \r
 210                                                 this._percent = 100;\r
 211                                                 this._busy    = false;\r
 212                                                 status        = raw.status;\r
 213                                                 \r
 214                                                 // https://code.google.com/p/fakeworker-js/source/browse/src/javascript/fakeworker.js\r
 215                                                 if(\r
 216                                                         ( !status && location.protocol === 'file:' ) ||\r
 217                                             ( 200 <= status && status < 300 ) ||\r
 218                                             status === 304 ||\r
 219                                             status === 1223 ||\r
 220                                             ( X.UA.Webkit && status === undefined ) // safari: /webkit/.test(userAgent)\r
 221                                                 ){\r
 222                                                         /*\r
 223                                                          * opera8, safari2, khtml3 で utf8 日本語文字列の文字化け\r
 224                                                          */\r
 225                                                         // raw.getAllResponseHeaders();\r
 226                                                         \r
 227                                                         // parse json, html, xml, text, script, css\r
 228                                                         switch( this._type ){\r
 229                                                                 case '' :\r
 230                                                                 case 'text' :\r
 231                                                                         data = raw[ 'responseText' ];\r
 232                                                                         break;\r
 233                                                                 case 'json' :\r
 234                                                                 case 'moz-json' :\r
 235                                                                         data = raw[ 'response' ] || raw[ 'responseText' ]; // とりあえず\r
 236                                                                         break;\r
 237                                                                 case 'document' :\r
 238                                                                 case 'xml' :\r
 239                                                                 case 'html' :\r
 240                                                                 case 'htm' :\r
 241                                                                         data = raw[ 'responseXML' ];\r
 242                                                                         break;\r
 243                                                                 case 'blob' :\r
 244                                                                 case 'arraybuffer' :\r
 245                                                                         data = raw[ 'response' ] || raw[ 'responseText' ]; // とりあえず\r
 246                                                                         break;\r
 247                                                         };\r
 248 \r
 249                                                         this.asyncDispatch( 0, { type : X.Event.SUCCESS, status : status || 200, data : data } );                                                       \r
 250                                                 } else {\r
 251                                                         live && this.asyncDispatch( 0, { type : X.Event.ERROR, status : raw.status || 0, percent : 100 } );\r
 252                                                 };\r
 253                                                 break;\r
 254                                         \r
 255                                         case 'progress' :\r
 256                                                 // TODO X.Dom.Event でコピーしていないのでまだ動かない、、、\r
 257                                                 if( e.lengthComputable ){\r
 258                                                         this._percent = e.loaded / e.total;\r
 259                                                         live && this.asyncDispatch( 0, { type : X.Event.PROGRESS, percent : this._percent } );\r
 260                                                 };\r
 261                                                 break;\r
 262                                         \r
 263                                         case 'error' :\r
 264                                         //console.dir( e );\r
 265                                                 this._busy = false;\r
 266                                                 live && this.asyncDispatch( 0, { type : X.Event.ERROR, status : raw.status } );\r
 267                                                 break;\r
 268                                         \r
 269                                         //case 'abort' :\r
 270                                         //      this._busy = false;\r
 271                                         //      this.asyncDispatch( 0, { type : X.Event.ERROR, status : raw.status } );\r
 272                                         //      break;\r
 273                                         case 'timeout' : // Gecko 12.0 https://developer.mozilla.org/ja/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests\r
 274                                                 this._busy = false;\r
 275                                                 live && this.asyncDispatch( 0, { type : X.Event.ERROR, status : raw.status } );\r
 276                                                 break;\r
 277                                 };\r
 278                         },\r
 279                         \r
 280                         onUploadProgress : X.Net.XHR.UL_PROGRESS && function( e ){\r
 281                                 var raw  = X_NET_XHRWrapper._rawObject.upload,\r
 282                                         live = !X_NET_XHRWrapper._canceled,\r
 283                                         states, data;\r
 284                         }\r
 285                 },\r
 286                 true\r
 287         );\r
 288         // 同期リクエストでなければならない場合, unload, beforeunload時\r
 289 \r
 290 \r
 291         // ie8 では timeout が有効, MSXML のバージョンは関係なさそう、、、\r
 292         if( X.UA.IE8 ){\r
 293                 X_NET_XHRWrapper.listen( [ 'readystatechange', 'error', 'abort', 'timeout' ] );\r
 294         } else\r
 295         if( X.UA.IE7 ){\r
 296                 X_NET_XHRWrapper.listen( [ 'readystatechange', 'error' ] ); // ie7 ActiveX の場合、error は不可\r
 297         } else\r
 298         if( X_Net_XHR_ACTIVE_X ){ // win ie5-6\r
 299                 X_NET_XHRWrapper.listen( 'readystatechange' );\r
 300         } else \r
 301         if( X.Net.XHR.PROGRESS ){\r
 302                 X_NET_XHRWrapper.listen( [ 'load', 'progress', 'error', 'abort', 'timeout' ] );\r
 303         } else {\r
 304                 X_NET_XHRWrapper.listen( [ 'load', 'readystatechange', 'error', 'abort', 'timeout' ] );\r
 305         };\r
 306         \r
 307         if( X.Net.XHR.UL_PROGRESS ){\r
 308                 X_NET_XHRWrapper._rawObject.upload.addEventListener( 'progress', X.Net.XHR.xhr.onUploadProgress );\r
 309         };\r
 310 };\r
 311 \r