OSDN Git Service

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