1 //{+xhr"XHR,XDR,MSXMLによる通信"(XMLHTTPRequest, XDomainRequest, ActiveX-MSXML を使った通信)[+net]
\r
3 // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
\r
4 // https://web.archive.org/web/20071101021832/http://web.paulownia.jp/script/ajax/xmlhttp4.html
\r
5 // https://web.archive.org/web/20091029170015/http://wiki.paulownia.jp/ajax/xmlhttprequest
\r
7 * http://ponpon-village.net/ajax/xmlhttp.htm
\r
8 * IE のバージョンによっては、ActiveXObject("Msxml2.XMLHTTP.5.0") , ActiveXObject("Msxml2.XMLHTTP.4.0") ,
\r
9 ActiveXObject("Msxml2.XMLHTTP.3.0") , ActiveXObject("Msxml2.XMLHTTP") なども使用出来る。
\r
11 http://vird2002.s8.xrea.com/javascript/XMLHttpRequest.html
\r
13 new ActiveXObject( 'Msxml2.XMLHTTP.3.0' ); // バージョン3.0 広範に利用されているので、今後も bugfix を行う
\r
14 new ActiveXObject( 'Msxml2.XMLHTTP.6.0' ); // バージョン6.0 は最新版なので bugfix を続ける
\r
16 // --- 使うべきではないオブジェクト
\r
17 new ActiveXObject( 'Microsoft.XMLHTTP' ); // Microsoft接頭辞は古いので指定すべきではない
\r
18 new ActiveXObject( 'Msxml.XMLHTTP' ); // Msxml2接頭辞を指定すべき
\r
19 new ActiveXObject( 'Msxml2.XMLHTTP' ); // バージョンを省略すると 3.0 として扱われるので、バージョンは明記すべき
\r
20 new ActiveXObject( 'Msxml2.XMLHTTP.4.0' ); // バージョン4.0 は bugfix が行われないので、3.0 か 6.0 を指定すべき
\r
21 new ActiveXObject( 'Msxml2.XMLHTTP.5.0' ); // バージョン5.0 は bugfix が行われないので、3.0 か 6.0 を指定すべき
\r
23 [IE][Javascript][Json] IE+Jsonではまった
\r
24 http://d.hatena.ne.jp/khiker/20081026/javascript_json
\r
25 > AddCharset utf-8 json
\r
26 > AddType text/javascript json
\r
28 JavaScriptでJSONをeval
\r
29 http://d.hatena.ne.jp/sshi/20060904/p1
\r
31 itozyun 2014-10-30 20:55:41
\r
32 basic 認証のかかったhtml を表示して、そのjsが xhr をすると Android1.6 では 401 error が返る。Android 2.3 では解決している。
\r
33 Android1.6- の XHR で 401 エラーが返った場合は、iframe に xml を表示させてその内容を取ればサーバ側の対応無しでいけるかも?
\r
34 Android2 にも xdomain な GET が一回しかできない問題 gears 使えない?
\r
36 IE9 で 画像バイナリの取得 VBA をかましている
\r
37 http://web.archive.org/web/20130808105151/http://gurimmer.lolipop.jp/daihakken/2012/05/22/javascriptajaxxmlhttprequest%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fajax%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89
\r
38 http://d.hatena.ne.jp/maachang/20130221/1361427565
\r
40 http://web.archive.org/web/20130531162446/http://gurimmer.lolipop.jp/daihakken/2012/06/25/ajaxjavascript%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96xmlhttp%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A8%E3%81%AF/
\r
42 IE8 以下で xhr の失敗率が高い問題
\r
43 http://tkengo-totoro.blogspot.jp/2011/11/iexmlhttprequest.html
\r
44 TODO クライアント側にもリトライ機構を入れてみる
\r
47 var // Opera7.6+, Safari1.2+, khtml3.?+, Gecko0.9.7+
\r
48 // ie9- ではローカルリソースには MSXML を使う
\r
49 X_XHR_createW3C = window[ 'XMLHttpRequest' ] && function(){ return X_XHR_w3c || ( X_XHR_w3c = new XMLHttpRequest() ); },
\r
50 X_XHR_w3c = X_XHR_createW3C && X_XHR_createW3C(),
\r
51 X_XHR_cors = X_XHR_w3c && X_XHR_w3c.withCredentials !== undefined,
\r
52 X_XHR_progress = X_XHR_w3c && X_XHR_w3c.onprogress !== undefined,
\r
53 X_XHR_upload = X_XHR_w3c && !!X_XHR_w3c.upload,
\r
55 X_XHR_createXDR = window[ 'XDomainRequest' ] && function(){ return X_XHR_xdr || ( X_XHR_xdr = new XDomainRequest() ); },
\r
56 X_XHR_xdr = X_XHR_createXDR && X_XHR_createXDR(),
\r
59 X_XHR_msXMLName = '',
\r
62 // ie11の互換モード(7,8)の msxml はいまいち動かない
\r
63 X_XHR_createMSXML = X_UA[ 'ActiveX' ] && ( X_UA[ 'IE5x' ] || X_UA[ 'IE6' ] || X_URL_IS_LOCAL ) &&
\r
64 function(){ return X_Script_createActiveXObjectSafty( X_XHR_msXMLName ); },
\r
68 X_XHR_neverReuse = X_UA[ 'IE' ] < 9, // ie7,8 の xhr はリユース不可。msxml はリユース可能。
\r
70 X_XHR_TYPE_FLASH = 8,
\r
71 X_XHR_TYPE_GADGET = 16;
\r
73 if( X_XHR_createMSXML ){
\r
77 n = [ m + ".6.0", m + ".3.0", m + ".5.0", m + ".4.0", m, "Microsoft" + x ],
\r
78 v = [ 6, 3, 5, 4, 2, 1 ],
\r
82 a = X_Script_createActiveXObjectSafty( n[ ++i ] );
\r
84 X_XHR_msXMLVer = v[ i ];
\r
85 X_XHR_msXMLName = n[ i ];
\r
90 X_XHR_createMSXML = null;
\r
96 'W3C' : X_XHR_createW3C ? 1 : 0,
\r
97 'MSXML' : X_XHR_createMSXML ? 2 : 0,
\r
98 'XDR' : X_XHR_createXDR ? 4 : 0,
\r
101 * http://hakuhin.jp/as/import.html
\r
102 * ファイルの読み込みについて(4 or 5 or 6+)
\r
103 * http://hakuhin.jp/as/javascript.html
\r
104 * Flash から JavaScript にアクセスする(3+)
\r
106 'FLASH' : X_Pulgin_FLASH_ENABLED && 4 <= X_Pulgin_FLASH_VERSION ? 8 : 0,
\r
108 'GADGET' : 5.5 <= X_UA[ 'IE' ] || !X_UA[ 'IE' ] ? 16 : 0,
\r
111 * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
\r
112 * Progress Events Chrome7, firefox3.5, ie10, opera12, Safari?, Chrome for Android 0.16
\r
114 'PROGRESS' : X_XHR_progress,
\r
116 'UPLOAD_PROGRESS' : X_XHR_upload,
\r
118 // or gadget proxy or flash
\r
119 'CORS' : X_XHR_xdr || X_XHR_cors,
\r
121 'BINARY' : X_Script_VBS_ENABLED
\r
124 if( X_XHR_msXMLVer ) X[ 'XHR' ][ 'MSXML_VERSION' ] = X_XHR_msXMLVer;
\r
126 if( X_XHR_w3c || X_XHR_msXML ){
\r
128 X_TEMP.X_XHR_init = function(){
\r
129 X_XHR = X_Class_override( X_EventDispatcher(), X_TEMP.X_XHR_params, true );
\r
131 delete X_TEMP.X_XHR_init;
\r
132 delete X_TEMP.X_XHR_params;
\r
137 X_TEMP.X_XHR_params = {
\r
139 '_rawType' : X_EventDispatcher_EVENT_TARGET_XHR,
\r
152 load : function( obj ){
\r
153 var raw = X_XHR[ '_rawObject' ],
\r
154 method = obj[ 'method' ],
\r
155 url = obj[ 'url' ],
\r
156 async = obj[ 'async' ] !== false,
\r
157 username = obj[ 'username' ],
\r
158 password = obj[ 'password' ],
\r
159 headers = obj[ 'headers' ] || {},
\r
160 postdata = obj[ 'postdata' ] || '',
\r
161 timeout = obj[ 'timeout' ] || 20000,
\r
162 noCache = obj[ 'cache' ] !== true,
\r
163 xDomain = !X_URL_isSameDomain( url ),
\r
164 isFile = X_URL_isLocal( url ),
\r
168 X_XHR._dataType = obj[ 'dataType' ];
\r
170 if( !raw || xDomain !== X_XHR._isXDR || ( X_XHR_createMSXML && isFile !== X_XHR._isMsXML ) ){
\r
171 raw && X_XHR[ 'unlisten' ]( [ 'load', 'readystatechange', 'progress', 'error', 'timeout' ] );
\r
173 X_XHR[ '_rawObject' ] = raw = xDomain ?
\r
175 X_XHR_createW3C() :
\r
179 ( X_XHR_createMSXML ?
\r
180 ( X_XHR_msXML = X_XHR_msXML || X_XHR_createMSXML() ):
\r
184 X_XHR_createW3C() :
\r
185 ( X_XHR_msXML = X_XHR_msXML || X_XHR_createMSXML() );
\r
187 // raw === XDR これは error になるのでフラグに控える
\r
188 X_XHR._isXDR = X_XHR_createXDR && xDomain;
\r
189 X_XHR._isMsXML = !X_XHR_createW3C || ( isFile && X_XHR_createMSXML );
\r
192 raw.open( method, url, async, username, password );
\r
194 if( raw.responseType !== undefined ){
\r
195 switch( X_XHR._dataType ){
\r
199 raw.responseType = 'text';
\r
201 case 'json' : // firefox9- は moz-json
\r
202 raw.responseType = X_UA[ 'Gecko' ] < 10 ? 'moz-json' : X_UA[ 'Gecko' ] ? X_XHR._dataType : ''; // Iron 37 でエラー
\r
209 raw.responseType = 'document';
\r
212 case 'arraybuffer' :
\r
213 // jpeg,jpg,png,gif,mp3,ogg...
\r
214 raw.responseType = X_XHR._dataType;
\r
219 // http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_notes_r_1.html
\r
220 if( !X_XHR._isMsXML && raw.overrideMimeType ){
\r
221 type = X_URL_getEXT( url ) || X_XHR._dataType;
\r
229 tmp = 'application/json';
\r
234 type = type || 'webm';
\r
236 type = type || 'ogg';
\r
240 tmp = 'audio/' + type;
\r
244 tmp = 'audio/x-' + type;
\r
247 if( tmp = obj[ 'mimeType' ] || tmp ) raw.overrideMimeType( tmp );
\r
250 if( !X_XHR._isXDR && ( X_XHR._isMsXML ? 3 <= X_XHR_msXMLVer : raw.setRequestHeader ) ){ // msxml は setRequestHeader getter がいけない
\r
254 headers[ 'Pragma' ] = 'no-cache';
\r
255 headers[ 'Cache-Control' ] = 'no-cache';
\r
256 headers[ 'If-Modified-Since' ] = 'Thu, 01 Jun 1970 00:00:00 GMT';
\r
259 // http://nakigao.sitemix.jp/blog/?p=2040
\r
260 // json 取得時に SafariでHTTP/412のエラー。但し相手が audio の場合この指定があるとロードに失敗する。 iOS8.2, iOS7.1 では遭遇せず
\r
261 if( X_XHR._dataType === 'json' ){
\r
262 headers[ 'If-Modified-Since' ] = ( new Date ).toUTCString();
\r
265 // http://boscono.hatenablog.com/entry/2013/12/23/152851
\r
266 if ( !xDomain && !headers[ 'X-Requested-With' ] ) {
\r
267 headers[ 'X-Requested-With' ] = 'XMLHttpRequest';
\r
270 if( method === 'POST' && !headers[ 'Content-Type' ] ){
\r
271 headers[ 'Content-Type' ] = 'application/x-www-form-urlencoded';
\r
275 for( p in headers ){
\r
276 //if( X_EMPTY_OBJECT[ p ] ) continue;
\r
277 //console.log( headers[ p ] );
\r
278 headers[ p ] !== undefined && raw.setRequestHeader( p, headers[ p ] + '' ); // Opera8.01+, MSXML3+
\r
282 if( !X_XHR._isMsXML && raw.timeout !== undefined ){
\r
283 raw.timeout = timeout;
\r
285 X_XHR._timerID = X_Timer_once( timeout, X_XHR.onTimeout );
\r
288 // send 前にフラグを立てる,回線が早いと raw.send() 内で onload -> _busy = false ののち、 _busy = true するため。
\r
289 X_XHR._busy = true;
\r
291 raw.send( X_Type_isString( postdata ) ? postdata : X_String_serialize( postdata ) );
\r
293 if( !async || raw.readyState === 4 ){
\r
294 X_Timer_once( 32, X_XHR, [ { type : 'readystatechange' } ] );
\r
297 if( X_XHR._isMsXML ){
\r
298 raw[ 'onreadystatechange' ] = X_XHR.handleEvent;
\r
300 if( X_XHR_progress || X_XHR._isXDR ){
\r
301 X_XHR[ 'listen' ]( [ 'load', 'progress', 'error', 'timeout' ] ); //, 'abort'
\r
303 if( X_UA[ 'IE8' ] ){
\r
304 X_XHR[ 'listen' ]( [ 'readystatechange', 'error', 'timeout' ] );
\r
306 if( X_UA[ 'IE7' ] ){
\r
307 X_XHR[ 'listen' ]( [ 'readystatechange', 'error' ] );
\r
309 X_XHR[ 'listen' ]( [ 'load', 'readystatechange', 'error', 'timeout' ] ); //, 'abort'
\r
312 if( X_XHR_upload ){
\r
313 raw.upload.addEventListener( 'progress', X_XHR.onUploadProgress );
\r
318 cancel : function(){
\r
319 /* X_XHR[ '_rawObject' ].abort && */ X_XHR[ '_rawObject' ].abort();
\r
320 X_XHR._canceled = true;
\r
323 reset : function(){
\r
325 X_XHR._method = X_XHR._dataType = '';
\r
326 X_XHR._canceled = X_XHR._busy = X_XHR._error = false;
\r
327 X_XHR._timerID && X_Timer_remove( X_XHR._timerID );
\r
328 X_XHR._percent = X_XHR._timerID = 0;
\r
330 // XMLHttpRequest の使い方
\r
331 // http://webos-goodies.jp/archives/50548720.html
\r
332 // XMLHttpRequest オブジェクトを再利用する際も、 abort メソッドを呼び出す必要があるようです。
\r
333 /* X_XHR[ '_rawObject' ].abort && */ X_XHR[ '_rawObject' ].abort();
\r
335 // XMLHttpRequest で順番にリソースを取得する
\r
336 // http://note.chiebukuro.yahoo.co.jp/detail/n16248
\r
337 // Opera 10.10 と Safari 4.1 はエラーが起きた XHR を再利用できないので毎回作る
\r
340 // domes.lingua.heliohost.org/dom-intro/load-save2.html
\r
341 // 規定上は open() を呼び出すと XMLHttpRequest オブジェクトが未送信状態に戻りますが、
\r
342 // Opera 10.10、Safari 4.1 では、同一オリジン制限に違反した XMLHttpRequest オブジェクトは再度 open() しても未送信状態に戻りません。
\r
344 // Timeout した Gecko の xhr.response に触るとエラー??
\r
346 if( X_XHR._error || ( X_XHR_neverReuse && !X_XHR._isMsXML ) ){
\r
348 if( X_XHR_upload ){
\r
349 X_XHR_w3c.upload.removeEventListener( 'progress', X_XHR.onUploadProgress );
\r
352 // ie7 は xhr object を再利用できない。但し send のあとに alert を挟むと動いた、、、
\r
353 // ie7モード(IE11) では再利用可能、、、
\r
355 X_EventDispatcher_toggleAllEvents( X_XHR, false );
\r
356 X_XHR[ '_rawObject' ] = null;
\r
358 if( X_XHR._isXDR ){
\r
360 delete X_XHR._isXDR;
\r
365 X_XHR[ 'unlisten' ]( [ 'load', 'readystatechange', 'progress', 'error', 'timeout' ] );
\r
369 handleEvent : function( e ){
\r
370 var raw = X_XHR[ '_rawObject' ],
\r
371 live = !X_XHR._canceled,
\r
372 headers, status, data;
\r
374 switch( e && e.type || 'readystatechange' ){
\r
376 * http://memopad.bitter.jp/w3c/ajax/ajax_xmlhttprequest_onreadystatechange.html
\r
377 readyState XMLHttpRequest のステータスを保持する。0 から 4 までに変化する:
\r
382 4: リクエストは終了してレスポンスの準備が完了
\r
384 404: Page not found
\r
386 If-Modified-Sinceヘッダを利用してWebページのキャッシュを行うXMLHttpRequestラッパー
\r
387 http://www.semblog.org/msano/archives/000407.html
\r
389 case 'readystatechange' :
\r
390 //if( !X.XHR.PROGRESS ){
\r
391 switch( raw.readyState ){
\r
395 case 2 : // 0% ajaxstart
\r
396 live && X_XHR[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : 0 } );
\r
399 live && X_XHR[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : X_XHR._percent < 99.9 ? 99.9 : ( X_XHR._percent + 100 ) / 2 } );
\r
403 if( X_XHR._percent === 100 ) return; // Opera8 readystatechange が2重に発生
\r
414 if( !X_XHR._busy ) return;
\r
416 X_XHR._percent = 100;
\r
417 X_XHR._busy = false;
\r
418 status = raw.status;
\r
420 // TODO GET_FULL_HEADERS
\r
421 // https://msdn.microsoft.com/en-us/library/ms766595%28v=vs.85%29.aspx
\r
422 // Implemented in: MSXML 3.0 and MSXML 6.0
\r
423 if( X_XHR._isXDR ){
\r
424 headers = { 'Content-Type' : raw.contentType };
\r
426 if( ( X_XHR._isMsXML ? 3 <= X_XHR_msXMLVer : raw.setRequestHeader ) && ( headers = raw.getAllResponseHeaders() ) ){
\r
427 headers = X_NET_XHR_parseResponseHeaders( headers );
\r
430 // https://code.google.com/p/fakeworker-js/source/browse/src/javascript/fakeworker.js
\r
432 ( !status && location.protocol === 'file:' ) ||
\r
433 // IE 6.0 でローカルファイルにアクセスした
\r
434 ( status < 100 && ( status = 200 ) ) ||
\r
435 ( 200 <= status && status < 400 ) ||
\r
436 //status === 304 ||
\r
437 ( status === 1223 && ( status = 204 ) ) ||
\r
438 ( X_UA[ 'Webkit' ] && status === undefined ) // safari: /webkit/.test(userAgent)
\r
441 * opera8, safari2, khtml3 で utf8 日本語文字列の文字化け
\r
444 // parse json, html, xml, text, script, css
\r
445 switch( X_XHR._dataType ){
\r
448 data = raw[ 'responseText' ];
\r
452 data = raw[ 'response' ] || raw[ 'responseText' ];
\r
453 // eval() を使っているけど JSON の無いブラウザは XDomain な XHR はできないのでよしとする。
\r
454 // XDomain な XHR の際は Flash 等で代替し、その中に Json parser も組み込む。
\r
455 // http://d.hatena.ne.jp/sshi/20060904/p1
\r
456 if( !X_Type_isObject( data ) ) data = X_JSON_parseTrustableString( data );
\r
462 // svg, vml, xaml, xul, mxml ??
\r
463 data = raw[ 'responseXML' ] || raw[ 'response' ] || raw[ 'responseText' ]; // とりあえず
\r
466 case 'arraybuffer' :
\r
467 data = raw[ 'response' ] || raw[ 'responseText' ]; // とりあえず
\r
470 X_XHR[ 'asyncDispatch' ]( 32, { type : X_EVENT_SUCCESS, status : status || 200, response : data, 'headers' : headers || null } );
\r
472 X_XHR[ 'asyncDispatch' ]( 32, { type : X_EVENT_ERROR, status : status || 400, 'headers' : headers || null } );
\r
477 if( e.lengthComputable ){
\r
478 X_XHR._percent = e.loaded / e.total * 100;
\r
479 live && X_XHR._percent < 100 && X_XHR[ 'asyncDispatch' ]( { type : X_EVENT_PROGRESS, 'percent' : X_XHR._percent } );
\r
484 //console.dir( e );
\r
485 X_XHR._busy = false;
\r
486 X_XHR._error = X_UA[ 'Opera' ] || X_UA[ 'Webkit' ] ;
\r
487 live && X_XHR[ 'asyncDispatch' ]( 32, { type : X_EVENT_ERROR, status : raw.status } );
\r
490 case 'timeout' : // Gecko 12.0 https://developer.mozilla.org/ja/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
\r
491 X_XHR._busy = false;
\r
492 X_XHR._error = !!X_UA[ 'Gecko' ];
\r
493 X_XHR[ 'asyncDispatch' ]( { type : X_EVENT_ERROR, 'timeout' : true, status : 408 } );
\r
498 onTimeout : function(){
\r
499 var raw = X_XHR[ '_rawObject' ],
\r
500 live = !X_XHR._canceled || !X_XHR._busy;
\r
502 if( live || raw.readyState < 3 ){
\r
503 X_XHR._busy = false;
\r
504 live && X_XHR[ 'asyncDispatch' ]( { type : X_EVENT_ERROR, 'timeout' : true, status : 408 } );
\r
506 X_XHR._timerID = 0;
\r
509 onUploadProgress : X_XHR_upload && function( e ){
\r
510 !X_XHR._canceled &&
\r
511 X_XHR[ 'asyncDispatch' ]( {
\r
512 type : X_EVENT_PROGRESS,
\r
513 'percent' : X_XHR._percent,
\r
514 'uploadPercent' : e.loaded / e.total * 100
\r
518 // 同期リクエストでなければならない場合, unload, beforeunload時
\r
521 * https://gist.github.com/mmazer/5404301
\r
523 * XmlHttpRequest's getAllResponseHeaders() method returns a string of response
\r
524 * headers according to the format described here:
\r
525 * http://www.w3.org/TR/XMLHttpRequest/#the-getallresponseheaders-method
\r
526 * This method parses that string into a user-friendly key/value pair object.
\r
528 * http://hakuhin.jp/js/xmlhttprequest.html#XHR_GET_ALL_RESPONSE_HEADERS
\r
529 * 複数の情報が存在する場合、改行で区切られています。
\r
532 function X_NET_XHR_parseResponseHeaders( headerStr ){
\r
533 var headers = {}, headerPairs, i = 0, l, headerPair, index, key, val;
\r
535 if( !headerStr ) return headers;
\r
537 headerPairs = headerStr.split( '\u000d\u000a' );
\r
538 for( l = headerPairs.length; i < l ; ++i ){
\r
539 headerPair = headerPairs[i];
\r
540 index = headerPair.indexOf( '\u003a\u0020' );
\r
542 key = headerPair.substring( 0, index );
\r
543 val = headerPair.substring( index + 2 );
\r
544 headers[ key ] = val.split( '\r\n' ).join( '\n' ).split( '\n' );
\r