0.6.x/js/06_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 [IE][Javascript][Json] IE+JsonではまったAdd Star\r
  22 http://d.hatena.ne.jp/khiker/20081026/javascript_json\r
  23 > AddCharset utf-8 json\r
  24 > AddType text/javascript json\r
  25 \r
  26 JavaScriptでJSONをeval\r
  27 http://d.hatena.ne.jp/sshi/20060904/p1\r
  28 \r
  29 itozyun 2014-10-30 20:55:41\r
  30 basic 認証のかかったhtml を表示して、そのjsが xhr をすると Android1.6 では 401 error が返る。Android 2.3 では解決している。\r
  31 Android1.6- の XHR で 401 エラーが返った場合は、iframe に xml を表示させてその内容を取ればサーバ側の対応無しでいけるかも？\r
  32  */\r
  33 var // Opera7.6+, Safari1.2+, khtml3.?+, Gecko0.9.7+\r
  34         // ie7 ではローカルリソースには ActiveX の XHR を使う\r
  35         X_Net_XHR_W3C      = ( !X_UA[ 'IE7' ] || !X_URL_IS_LOCAL ) && window[ 'XMLHttpRequest' ] && new XMLHttpRequest(),\r
  36         \r
  37         X_Net_XHR_X_DOMAIN = window[ 'XDomainRequest' ] && new XDomainRequest(),\r
  38         X_Net_XHR_VERSION  = 0,\r
  39         X_Net_XHR_ACTIVE_X = !X_UA[ 'IE4' ] && X_UA[ 'IE' ] < 8 && X_UA[ 'ActiveX' ] && ( new Function( [\r
  40                 'var x=".XMLHTTP",',\r
  41                         'm="MSXML2"+x,',\r
  42                         'n=[m+".6.0",m+".3.0",m+".5.0",m+".4.0",m,"Microsoft"+x],',\r
  43                         'v=[6,3,5,4,2,1],',\r
  44                         'i=-1;',\r
  45                 'for(;i<5;){',\r
  46                         'try{',\r
  47                                 'return[v[++i],new ActiveXObject(n[i])]',\r
  48                         '}catch(e){}',\r
  49                 '}'\r
  50         ].join( '' ) ) )();\r
  51 \r
  52 if( X_Net_XHR_ACTIVE_X ){\r
  53         X_Net_XHR_VERSION  = X_Net_XHR_ACTIVE_X[ 0 ];\r
  54         X_Net_XHR_ACTIVE_X = X_Net_XHR_ACTIVE_X[ 1 ];\r
  55 };\r
  56 \r
  57 X[ 'Net' ][ 'XHR' ] = {\r
  58 \r
  59 /*\r
  60  * http://hakuhin.jp/as/import.html\r
  61  * ファイルの読み込みについて(4 or 5 or 6+)\r
  62  * http://hakuhin.jp/as/javascript.html\r
  63  * Flash から JavaScript にアクセスする(3+)\r
  64  */\r
  65         'FLASH'       : false,\r
  66 \r
  67 // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\r
  68 // Progress Events      Chrome7, firefox3.5, ie10, opera12, Safari?, Chrome for Android 0.16\r
  69         'PROGRESS'    : false, //\r
  70 \r
  71         'UL_PROGRESS' : false\r
  72 \r
  73 };\r
  74 \r
  75 if( X_Net_XHR_W3C || X_Net_XHR_ACTIVE_X ){\r
  76         \r
  77         X_NET_XHRWrapper = X_Class_override(\r
  78                 X_EventDispatcher(),\r
  79                 {\r
  80                         \r
  81                         '_rawType'   : X_EventDispatcher_EVENT_TARGET_TYPE.XHR,\r
  82                         '_rawObject' : X_Net_XHR_W3C || X_Net_XHR_ACTIVE_X,\r
  83                         \r
  84                         _isXDR     : false, // for ie8\r
  85                         \r
  86                         _method    : '',\r
  87                         _type      : '',\r
  88                         _busy      : false,\r
  89                         _canceled  : false,\r
  90                         _error     : false,\r
  91                         _percent   : 0,\r
  92                         _timerID   : 0,\r
  93                         \r
  94                         load : function( obj ){\r
  95                                 var raw      = this[ '_rawObject' ],\r
  96                                         method   = obj[ 'method' ],\r
  97                                         url      = obj[ 'url' ],\r
  98                                         async    = obj[ 'async' ],\r
  99                                         username = obj[ 'username' ],\r
 100                                         password = obj[ 'password' ],\r
 101                                         headers  = obj[ 'headers' ] || {},\r
 102                                         postbody = obj[ 'postbody' ],\r
 103                                         timeout  = obj[ 'timeout' ] || 20000,\r
 104                                         tmp;\r
 105                                 \r
 106                                 this._type = obj[ 'type' ] || X_URL_getEXT( url );\r
 107                                 \r
 108                                 if( X_Net_XHR_X_DOMAIN ){\r
 109                                         if( X_URL_isSameDomain( url ) ){ // isXDomain\r
 110                                                 if( this._isXDR ){\r
 111                                                         X_EventDispatcher_toggleAllEvents( this, false );\r
 112                                                         this[ '_rawObject' ] = X_Net_XHR_W3C || X_Net_XHR_ACTIVE_X;\r
 113                                                         X_EventDispatcher_toggleAllEvents( this, true );\r
 114                                                         this._isXDR = false;                                                    \r
 115                                                 };\r
 116                                         } else {\r
 117                                                 if( !this._isXDR ){\r
 118                                                         X_EventDispatcher_toggleAllEvents( this, false );\r
 119                                                         this[ '_rawObject' ] = X_Net_XHR_X_DOMAIN;\r
 120                                                         X_EventDispatcher_toggleAllEvents( this, true );\r
 121                                                         this._isXDR = true;                                                     \r
 122                                                 };\r
 123                                         };\r
 124                                 };\r
 125                                 \r
 126                                 raw.open( method, url, true, username, password );\r
 127                                 \r
 128                                 if( raw.responseType !== undefined ){\r
 129                                         switch( this._type ){\r
 130                                                 case '' :\r
 131                                                 case 'text' :\r
 132                                                 // js, css\r
 133                                                         raw.responseType = 'text';\r
 134                                                         break;\r
 135                                                 case 'json' :\r
 136                                                 case 'moz-json' :\r
 137                                                         raw.responseType = X_UA[ 'Gecko' ] ? this._type : ''; // Iron 37 でエラー\r
 138                                                         break;\r
 139                                                 case 'document' :\r
 140                                                 case 'xml' :\r
 141                                                 case 'html' :\r
 142                                                 case 'htm' :\r
 143                                                 // svg\r
 144                                                         raw.responseType = 'document';\r
 145                                                         break;\r
 146                                                 case 'blob' :\r
 147                                                 case 'arraybuffer' :\r
 148                                                 // jpeg,jpg,png,gif,mp3,ogg...\r
 149                                                         raw.responseType = this._type;\r
 150                                                         break;\r
 151                                         };\r
 152                                 };\r
 153                                 \r
 154                                 // http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_notes_r_1.html\r
 155                                 if( !X_Net_XHR_ACTIVE_X && X_Type_isFunction( raw.overrideMimeType ) ){\r
 156                                         switch( X_URL_getEXT( url ) ){\r
 157                                                 case 'html' :\r
 158                                                 case 'xml' :\r
 159                                                         tmp = 'text/xml';\r
 160                                                         break;\r
 161 \r
 162                                                 case 'mp3' :\r
 163                                                         tmp = 'audio/mpeg';\r
 164                                                         break;\r
 165                                                 case 'opus' :\r
 166                                                 case 'ogg' :\r
 167                                                         tmp = 'audio/ogg';\r
 168                                                         break;\r
 169                                                 case 'wav' :\r
 170                                                         tmp = 'audio/wav';\r
 171                                                         break;                                                  \r
 172                                                 case 'aac' :\r
 173                                                         tmp = 'audio/aac';\r
 174                                                         break;\r
 175                                                 case 'm4a' :\r
 176                                                         tmp = 'audio/x-m4a"';\r
 177                                                         break;  \r
 178                                                 case 'mp4' :\r
 179                                                         tmp = 'audio/x-mp4';\r
 180                                                         break;  \r
 181                                                 case 'weba' :\r
 182                                                         tmp = 'audio/webm';\r
 183                                                         break;\r
 184                                         };\r
 185                                         if( obj[ 'mimeType' ] || tmp ) raw.overrideMimeType( obj[ 'mimeType' ] || tmp );\r
 186                                         console.log( this._type );\r
 187                                         console.log( obj[ 'mimeType' ] || tmp );\r
 188                                 };\r
 189 \r
 190                                 if( !X_Net_XHR_ACTIVE_X && X_Type_isFunction( raw.setRequestHeader ) ){\r
 191                                         \r
 192                                         // http://nakigao.sitemix.jp/blog/?p=2040\r
 193                                         // SafariでHTTP/412のエラー\r
 194                                         // headers[ 'If-Modified-Since' ] = ( new Date ).toUTCString();\r
 195                                         \r
 196                                         for( p in headers ){\r
 197                                                 if( X_EMPTY_OBJECT[ p ] ) continue;\r
 198                                                 raw.setRequestHeader( p, headers[ p ] ); // Opera8.01+, MSXML3+\r
 199                                         };              \r
 200                                 };\r
 201                                 \r
 202                                 if( raw.timeout !== undefined ){\r
 203                                         raw.timeout = timeout;\r
 204                                 } else {\r
 205                                         this._timerID = X_Timer_once( timeout, this, this.onTimeout );\r
 206                                 };      \r
 207                                 \r
 208                                 // send 前にフラグを立てる,回線が早いと raw.send() 内で onload -> _busy = false ののち、 _busy = true するため。\r
 209                                 this._busy = true;\r
 210                                 \r
 211 \r
 212                                 raw.send( postbody || '' );\r
 213                                 //this._timerID = X_Timer_once( 16, this, this._lazySend, [ postbody || '', timeout ] );\r
 214                         },\r
 215                         /*\r
 216                         // send() 内で onload するケースがあり、そのときはイベントリスナが間に合わないので、タイマーをかませる。\r
 217                         _lazySend : function( postbody, timeout ){\r
 218                                 if( this[ '_rawObject' ].timeout === undefined ){\r
 219                                         this._timerID = X_Timer_once( timeout, this, this.onTimeout );\r
 220                                 } else {\r
 221                                         this._timerID = 0;\r
 222                                 };\r
 223                                 \r
 224                                 // http://allabout.co.jp/gm/gc/24097/#1\r
 225                                 // sendをonreadystatechangeの前に記述すると、ieでは動作しなくなります、、、。\r
 226                                 // konquerorでエラーが発生するのでここでは、とりあえず、send('') としました。\r
 227                                 this[ '_rawObject' ].send( postbody );                          \r
 228                         }, */\r
 229                         \r
 230                         cancel : function(){\r
 231                                 /* X.Net.XHR.CANCELABLE && */ this[ '_rawObject' ].abort && this[ '_rawObject' ].abort();\r
 232                                 this._canceled = true;\r
 233                                 this[ 'asyncDispatch' ]( X_EVENT_CANCELED );\r
 234                         },\r
 235                         \r
 236                         reset : function(){\r
 237                                 // XMLHttpRequest で順番にリソースを取得する\r
 238                                 // http://note.chiebukuro.yahoo.co.jp/detail/n16248\r
 239                                 // TODO Opera 10.10 と Safari 4.1 はエラーが起きた XHR を再利用できないので毎回作る\r
 240                                 \r
 241                                 // \r
 242                                 // domes.lingua.heliohost.org/dom-intro/load-save2.html\r
 243                                 // 規定上は open() を呼び出すと XMLHttpRequest オブジェクトが未送信状態に戻りますが、\r
 244                                 // Opera 10.10、Safari 4.1 では、同一オリジン制限に違反した XMLHttpRequest オブジェクトは再度 open() しても未送信状態に戻りません。\r
 245                                 \r
 246                                 // Timeout した Gecko の xhr.response に触るとエラー??\r
 247                                 if( X_UA[ 'Opera' ] || X_UA[ 'Webkit' ]  || X_UA[ 'Gecko' ] ){\r
 248                                         if( this._error ){\r
 249                                                 X_EventDispatcher_toggleAllEvents( this, false );\r
 250                                                 this[ '_rawObject' ] = new XMLHttpRequest();\r
 251                                                 X_EventDispatcher_toggleAllEvents( this, true );\r
 252                                         };\r
 253                                 };\r
 254 \r
 255                                 // XMLHttpRequest の使い方\r
 256                                 // http://webos-goodies.jp/archives/50548720.html\r
 257                                 // XMLHttpRequest オブジェクトを再利用する際も、 abort メソッドを呼び出す必要があるようです。\r
 258                                 this[ '_rawObject' ].abort && this[ '_rawObject' ].abort();\r
 259 \r
 260                                 this._method   = this._type = '';\r
 261                                 this._canceled = this._busy = this._error = false;\r
 262                                 this._timerID && X_Timer_remove( this._timerID );\r
 263                                 this._percent  = this._timerID = 0;\r
 264                         },\r
 265                         \r
 266                         handleEvent : function( e ){\r
 267                                 var raw  = this[ '_rawObject' ],\r
 268                                         live = !this._canceled,\r
 269                                         status, data;\r
 270 \r
 271                                 switch( e.type ){\r
 272                                         /*\r
 273                                          * http://memopad.bitter.jp/w3c/ajax/ajax_xmlhttprequest_onreadystatechange.html\r
 274                                         readyState      XMLHttpRequest のステータスを保持する。0 から 4 までに変化する:\r
 275                                         0: リクエストは初期化されていない\r
 276                                         1: サーバ接続は確立した\r
 277                                         2: リクエストを受信した\r
 278                                         3: リクエストの処理中\r
 279                                         4: リクエストは終了してレスポンスの準備が完了\r
 280                                         status  200: "OK"\r
 281                                         404: Page not found\r
 282                                         \r
 283                                         If-Modified-Sinceヘッダを利用してWebページのキャッシュを行うXMLHttpRequestラッパー\r
 284                                         http://www.semblog.org/msano/archives/000407.html\r
 285                                         * */            \r
 286                                         case 'readystatechange' :\r
 287                                                 //if( !X.Net.XHR.PROGRESS ){\r
 288                                                         switch( raw.readyState ){\r
 289                                                                 case 0 :\r
 290                                                                 case 1 :\r
 291                                                                         return;\r
 292                                                                 case 2 : // 0% ajaxstart\r
 293                                                                         live && this[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : 0 } );\r
 294                                                                         return;\r
 295                                                                 case 3 :\r
 296                                                                         live && this[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : this._percent < 99.9 ? 99.9 : ( this._percent + 100 ) / 2 } );\r
 297                                                                         // 99.9%\r
 298                                                                         return;\r
 299                                                                 case 4 :\r
 300                                                                         if( this._percent === 100 ) return; // Opera8 readystatechange が2重に発生\r
 301                                                                         // 100%\r
 302                                                                         break; // load へ\r
 303                                                                 default :\r
 304                                                                         // error\r
 305                                                                         return;\r
 306                                                         };                                              \r
 307                                                 //};\r
 308         \r
 309                                         case 'load' :\r
 310                                                 \r
 311                                                 if( !live ) return this.reset();\r
 312                                                 if( !this._busy ) return;\r
 313                                                 \r
 314                                                 \r
 315                                                 this._percent = 100;\r
 316                                                 this._busy    = false;\r
 317                                                 status        = raw.status;\r
 318                                                 \r
 319                                                 // https://code.google.com/p/fakeworker-js/source/browse/src/javascript/fakeworker.js\r
 320                                                 if(\r
 321                                                         ( !status && location.protocol === 'file:' ) ||\r
 322                                                         // IE 6.0 でローカルファイルにアクセスした\r
 323                                                         ( status < 100 ) ||\r
 324                                             ( 200 <= status && status < 400 ) ||\r
 325                                             //status === 304 ||\r
 326                                             status === 1223 ||\r
 327                                             ( X_UA[ 'Webkit' ]  && status === undefined ) // safari: /webkit/.test(userAgent)\r
 328                                                 ){\r
 329                                                         /*\r
 330                                                          * opera8, safari2, khtml3 で utf8 日本語文字列の文字化け\r
 331                                                          */\r
 332                                                         // raw.getAllResponseHeaders();\r
 333                                                         \r
 334                                                         // parse json, html, xml, text, script, css\r
 335                                                         switch( this._type ){\r
 336                                                                 case '' :\r
 337                                                                 case 'text' :\r
 338                                                                         data = raw[ 'responseText' ];\r
 339                                                                         break;\r
 340                                                                 case 'json' :\r
 341                                                                 case 'moz-json' :\r
 342                                                                         data = raw[ 'response' ] || raw[ 'responseText' ];\r
 343                                                                         // eval() を使っているけど JSON の無いブラウザは XDomain な XHR はできないのでよしとする。\r
 344                                                                         // XDomain な XHR の際は Flash 等で代替し、その中に Json parser も組み込む。\r
 345                                                                         // http://d.hatena.ne.jp/sshi/20060904/p1\r
 346                                                                         if( !X_Type_isObject( data ) ) data = window.JSON ? JSON.parse( data ) : eval( '(' + data + ')' );\r
 347                                                                         break;\r
 348                                                                 case 'document' :\r
 349                                                                 case 'xml' :\r
 350                                                                 case 'html' :\r
 351                                                                 case 'htm' :\r
 352                                                                 // svg, vml, xaml, xul, mxml ??\r
 353                                                                         data = raw[ 'responseXML' ] || raw[ 'response' ] || raw[ 'responseText' ]; // とりあえず\r
 354                                                                         break;\r
 355                                                                 case 'blob' :\r
 356                                                                 case 'arraybuffer' :\r
 357                                                                         data = raw[ 'response' ] || raw[ 'responseText' ]; // とりあえず\r
 358                                                                         break;\r
 359                                                         };\r
 360 \r
 361                                                         this[ 'asyncDispatch' ]( 32, { type : X_EVENT_SUCCESS, status : status || 200, data : data } );\r
 362                                                 } else {\r
 363                                                         live && this[ 'asyncDispatch' ]( 32, { type : X_EVENT_ERROR, status : raw.status || 0, 'percent' : 100 } );\r
 364                                                 };\r
 365                                                 break;\r
 366                                         \r
 367                                         case 'progress' :\r
 368                                                 if( e.lengthComputable ){\r
 369                                                         this._percent = e.loaded / e.total;\r
 370                                                         live && this[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : this._percent } );\r
 371                                                 };\r
 372                                                 break;\r
 373                                         \r
 374                                         case 'error' :\r
 375                                         //console.dir( e );\r
 376                                                 this._busy  = false;\r
 377                                                 this._error = X_UA[ 'Opera' ] || X_UA[ 'Webkit' ] ;\r
 378                                                 live && this[ 'asyncDispatch' ]( 32, { type : X_EVENT_ERROR, status : raw.status } );\r
 379                                                 break;\r
 380 \r
 381                                         case 'timeout' : // Gecko 12.0 https://developer.mozilla.org/ja/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests\r
 382                                                 this._busy  = false;\r
 383                                                 this._error = !!X_UA[ 'Gecko' ];\r
 384                                                 this[ 'asyncDispatch' ]( X_EVENT_TIMEOUT );\r
 385                                                 break;\r
 386                                 };\r
 387                         },\r
 388                         \r
 389                         onTimeout : function(){\r
 390                                 var raw  = this[ '_rawObject' ],\r
 391                                         live = !X_NET_XHRWrapper._canceled || !this._busy;\r
 392 \r
 393                                 if( raw.readyState < 3 ){\r
 394                                         this._busy = false;\r
 395                                         live && this[ 'asyncDispatch' ]( X_EVENT_TIMEOUT );\r
 396                                 };\r
 397                                 this._timerID = 0;\r
 398                         },\r
 399                         \r
 400                         onUploadProgress : X[ 'Net' ][ 'XHR' ][ 'UL_PROGRESS' ] && function( e ){\r
 401                                 var raw  = X_NET_XHRWrapper[ '_rawObject' ].upload,\r
 402                                         live = !X_NET_XHRWrapper._canceled,\r
 403                                         states, data;\r
 404                         }\r
 405                 },\r
 406                 true\r
 407         );\r
 408         // 同期リクエストでなければならない場合, unload, beforeunload時\r
 409 \r
 410         if( X_UA[ 'IE8' ] ){\r
 411                 X_NET_XHRWrapper[ 'listen' ]( [ 'readystatechange', 'error', 'timeout' ] ); //, 'abort'\r
 412         } else\r
 413         if( X_UA[ 'IE7' ] ){\r
 414                 if( X_URL_IS_LOCAL ){\r
 415                         X_NET_XHRWrapper[ 'listen' ]( 'readystatechange' ); // ie7 ActiveX の場合、error は不可\r
 416                 } else {\r
 417                         X_NET_XHRWrapper[ 'listen' ]( [ 'readystatechange', 'error' ] );\r
 418                 };\r
 419         } else\r
 420         if( X_Net_XHR_ACTIVE_X ){ // win ie5-6\r
 421                 X_NET_XHRWrapper[ 'listen' ]( 'readystatechange' );\r
 422         } else \r
 423         if( X[ 'Net' ][ 'XHR' ][ 'PROGRESS' ] ){\r
 424                 X_NET_XHRWrapper[ 'listen' ]( [ 'load', 'progress', 'error', 'timeout' ] ); //, 'abort'\r
 425         } else {\r
 426                 X_NET_XHRWrapper[ 'listen' ]( [ 'load', 'readystatechange', 'error', 'timeout' ] ); //, 'abort'\r
 427         };\r
 428         \r
 429         if( X_NET_XHRWrapper.onUploadProgress ){\r
 430                 X_NET_XHRWrapper[ '_rawObject' ].upload.addEventListener( 'progress', X_NET_XHRWrapper.onUploadProgress );\r
 431         };\r
 432 };\r
 433 \r