QA@IT
«回答へ戻る

回答を投稿

どういう環境で実行されているかわかりませんが(Safariかモバイルのブラウザですかね?)、
最近のブラウザですと現状抱えている問題以外に、表示しているページと別のドメインへのXMLHttpRequest経由アクセスということでブロックされるように思います。

その問題を除いて考えた場合、現在xhrStartの戻り値がundefinedなのは、
xhrStart関数がそもそも何かを返すような関数になっていないからです。
(具体的に言えばなにもreturnしていないからです)

xhr.onload のところに書いているreturnはあくまで xhr.onloadのreturnですのでxhrStartの戻り値にはなりません。

じゃぁ、xhr.onloadの戻り値をxhrStartに引き継げればいいんだねという話になるんですが、
もしそういうことをするのであれば、現在xhrは非同期で実行されていますのでこれを同期実行にしなくてはなりません。
(非同期実行と同期実行の違いはまずは調べてみてください)

で、その辺の諸々を解決すると以下の様なコードになるとは思うんですが、

function xhrStart(method,url,data,RequestHeader){
    var xhr = new XMLHttpRequest();

    var response = undefined;  // 値を引き取るための変数

    xhr.onload = function(){

        //console.log(xhr.response);
        // return xhr.response;
        response = xhr.response;  // 親ブロック(xhrStart)のresponse変数に引き継ぐ
    }   
    xhr.open(method,url,false); // 第三引数を指定して同期実行に
    if(RequestHeader != null){
        for(key in RequestHeader){
            xhr.setRequestHeader(key,RequestHeader[key]);
        }
    }
    // xhr.responseType = "document";  // 同期実行では指定できないのでコメントアウト
    if(method === 'GET')
        xhr.send(null);
    else
        xhr.send(data);

    console.log(response); // 同期実行ではxhr.sendが終わった後にここ以降が実行される。
    return response;
}

console.log(xhrStart('GET','http://www.yahoo.co.jp/'));

ちょっと私のブラウザだと、No 'Access-Control-Allow-Origin' headerエラーが出てしまい、すいませんが動作確認できてません。

xhrでアクセスできるようなサイトに使うにしても前述の同期/非同期の問題も出てくると思いますが、とりあえずサンプルとして上記を提示しておきます。

どういう環境で実行されているかわかりませんが(Safariかモバイルのブラウザですかね?)、
最近のブラウザですと現状抱えている問題以外に、表示しているページと別のドメインへのXMLHttpRequest経由アクセスということでブロックされるように思います。

その問題を除いて考えた場合、現在xhrStartの戻り値がundefinedなのは、
xhrStart関数がそもそも何かを返すような関数になっていないからです。
(具体的に言えばなにもreturnしていないからです)

xhr.onload のところに書いているreturnはあくまで xhr.onloadのreturnですのでxhrStartの戻り値にはなりません。

じゃぁ、xhr.onloadの戻り値をxhrStartに引き継げればいいんだねという話になるんですが、
もしそういうことをするのであれば、現在xhrは非同期で実行されていますのでこれを同期実行にしなくてはなりません。
(非同期実行と同期実行の違いはまずは調べてみてください)

で、その辺の諸々を解決すると以下の様なコードになるとは思うんですが、

```javascript
function xhrStart(method,url,data,RequestHeader){
	var xhr = new XMLHttpRequest();
    
	var response = undefined;  // 値を引き取るための変数

	xhr.onload = function(){

		//console.log(xhr.response);
		// return xhr.response;
		response = xhr.response;  // 親ブロック(xhrStart)のresponse変数に引き継ぐ
	}	
	xhr.open(method,url,false); // 第三引数を指定して同期実行に
	if(RequestHeader != null){
		for(key in RequestHeader){
			xhr.setRequestHeader(key,RequestHeader[key]);
		}
	}
	// xhr.responseType = "document";  // 同期実行では指定できないのでコメントアウト
	if(method === 'GET')
		xhr.send(null);
	else
		xhr.send(data);
    
	console.log(response); // 同期実行ではxhr.sendが終わった後にここ以降が実行される。
	return response;
}

console.log(xhrStart('GET','http://www.yahoo.co.jp/'));
```

ちょっと私のブラウザだと、`No 'Access-Control-Allow-Origin' header `エラーが出てしまい、すいませんが動作確認できてません。

xhrでアクセスできるようなサイトに使うにしても前述の同期/非同期の問題も出てくると思いますが、とりあえずサンプルとして上記を提示しておきます。