目標
(用語や考え方が間違っていたらすみません。)
XMLHttpRequest.readyState (0~4)の状態を画面表示したい
練度
基本的なHTMLとCSSが記述できるレベル
(静的な画面表示を依頼されているなかで問題に遭遇中)
現状
正常終了(XMLHttpRequest.status===200 && XMLHttpRequest.readyState===4)
のときのみ再描画される
Javascript
1 2Foo.OnCreateSuccess = function() { 3 4// nowLoading 表示 5dispLoading('NowLoading'); 6 7// POST値受取 8var hoge = new XMLHttpRequest(); 9hoge.open('POST', 'https://httpbin.org/post'); // ←適当にPOSTできるサイト 10hoge.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8'); 11var replaceData = POSTする各値をセット; 12hoge.send(replaceData); 13 14// 決済開始イベント 15hoge.onreadystatechange = function() { 16 try{ 17 if( hoge.status===200 ){ 18 switch( hoge.readyState ){ 19 case 2: 20 console.log("POST readyState 2/4"); 21 dispLoading('2/4'); 22 break; 23 case 3: 24 console.log("POST readyState 3/4"); 25 dispLoading('3/4'); 26 break; 27 case 4: 28 console.log("POST readyState 4/4"); 29 dispLoading('4/4'); 30 if(hoge.responseText.indexOf('success')>0){ 31 console.log("success"); 32 showPayinfo_after(); 33 } 34 break; 35 default: 36 dispLoading('connect'); 37 console.log("HTTP connection success"); 38 break; 39 } 40 }else{ 41 console.log('HTTP error status:' + hoge.status ); 42 showPayinfo_ng(hoge.status); 43 } 44 45 }catch(e){ 46 console.log('例外を捕捉: ' + e.description); 47 showPayinfo_ng('例外を捕捉: ' + e.description); 48 return; 49 } 50 } 51 52}
Javascript(Loading画面)
1 2/*------------------------------ 3Loading 画面表示 4------------------------------*/ 5function dispLoading(msg){ 6 7 // #loading があればいったん解除 8 removeLoading(); 9 10 if( msg == undefined ){ msg = ""; } 11 12 // 画面表示メッセージ 13 var dispMsg = "<div class='loadingMsg'>" + msg + "</div>"; 14 15 // ローディング画像が表示されていない場合のみ出力 16 if($("#loading").length == 0){ 17 $("body").append("<div id='loading'>" + dispMsg + "</div>"); 18 } 19} 20 21/*------------------------------ 22Loading 画面解除 23------------------------------*/ 24function removeLoading(){ 25 $("#loading").remove(); 26} 27
Javascript(終了後の画面)
1 2/*------------------------------ 3終了後の画面表示 4------------------------------*/ 5function showPayinfo_after() { 6removeLoading(); 7$('#dialog-box').hide(); 8$('#dialog-overlay').hide(); 9$('#message').hide(); 10$('#before_pay').hide(); 11$('#after_pay').show(); 12$('#ng_pay').hide(); 13} 14
回答2件
あなたの回答
tips
プレビュー