質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

8264閲覧

2つのXMLHttpRequestで受け取った値を出力する

seri

総合スコア422

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/05/06 15:35

編集2022/01/12 10:55

以下のようなXMLHttpRequestがあるとします

function Receive(){ var xhr = new XMLHttpRequest(); xhr.open("POST","http://",false); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.addEventListener("load", function(e){ var res1=xhrtex.responseText; if(res2!=undefined){Out();} }; var data ="name="+$name; xhr.send(data); var xhr2 = new XMLHttpRequest(); xhr2.open("POST","http://",false); xhr2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr2.addEventListener("load", function(e){ var res2=xhrtex.responseText; if(res1!=undefined){Out();} }; var data2 ="memo="+$memo; xhr2.send(data2); } function Out(){ console.log(res1+res2) }

これら二つのレスポンスを同時に出力したいと思っています。しかしこのままでは
if(res2!=undefined){Out();}の箇所に出力されるのは全てUndfinedです。

Loadした後に同期的に処理を行うにはどうしたらいいのでしょうか

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

こういうものは非同期に処理をしてpromiseで待つのが妥当です。

まず、IEへ対応が必要なら以下ライブラリを読み込んでおきます

javascript

1<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>

その上で以下で処理します

javascript

1var prm=[]; 2var res1,res2; 3prm[0]= new Promise(function(resolver){ 4 var xhr = new XMLHttpRequest(); 5 var data=new FormData(); 6 data.append("name","xxx"); 7 xhr.open("POST","http:exsample.com/targe1.php"); 8 xhr.onload=function(e){ 9 res1=this.responseText; 10 resolver(this); 11 }; 12 xhr.send(data); 13}); 14prm[1]= new Promise(function(resolver){ 15 var xhr = new XMLHttpRequest(); 16 var data=new FormData(); 17 data.append("memo","yyy"); 18 xhr.open("POST","http:exsample.com/targe2.php"); 19 xhr.onload=function(e){ 20 res2=this.responseText; 21 resolver(this); 22 }; 23 xhr.send(data); 24}); 25Promise.all( prm ).then(function(){ 26 console.log(res1+res2); 27}); 28

さらに多くのページへの同時接続が必要でしたら配列を利用して共通化してもよいでしょう

投稿2017/05/08 01:20

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

xhr.openの第3引数がfalseなので同期呼び出しになってると思いますが・・。res2のスコープはxhr2.addEventListenerの第二引数の関数内なので1つめのxhrの方からは参照できません。ですからundefinedになります。ですのでこの場合、同期か非同期かは関係なくて、JavaScriptのスコープについて理解しておくべきだと思います。

また同期呼び出しだと警告がでるので、1回目のXHRのコールバックで2回目のXHRを呼び出して、それぞれonreadystatechangeに登録した関数内でreadyStateの値が4(完了)のときに次の処理を行えば良いと思います。
loadのタイミングで実行したいならばreceiveをwindonw.onloadに入れれば良いです。

冗長ですがサンプルコードを書いて見ました。ブラウザのコンソールに貼り付けてreceiveを呼び出すと動くと思います。

javascript

1 2 function receive(){ 3 xhr1(xhr2); 4 } 5 6 function xhr1(callback){ 7 var xhr = new XMLHttpRequest(); 8 xhr.open("POST", "https://httpbin.org/post"); 9 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 10 xhr.onreadystatechange = function(){ 11 if(xhr.readyState === 4){ 12 callback(xhr.responseText); 13 } 14 }; 15 var data ="name=foo"; 16 xhr.send(data); 17 } 18 19 function xhr2(res){ 20 var xhr = new XMLHttpRequest(); 21 xhr.open("POST", "https://httpbin.org/post"); 22 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 23 xhr.onreadystatechange = function(){ 24 if(xhr.readyState === 4){ 25 console.log(res + xhr.responseText); 26 } 27 }; 28 var data ="memo=bar"; 29 xhr.send(data); 30 } 31

質問とは関係ありませんが最初が大文字から始まる関数名は一般的にコンストラクタとして使われるので、そうでないものは避けた方がいいと思います。

あと、よほどの理由がないと今時XMLHttpRequestは使わないのと思うのでFetchAPI(ブラウザによってはpolyfillが必要)かjQuery(XHRのためだけに入れるのは微妙ですが)やSuperAgentなどのライブラリを使うのがいいかと思います。

投稿2017/05/07 02:16

t_tonchim

総合スコア96

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問