MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

XMLHttpRequestが機能しない。
https://forums.mozillazine.jp/viewtopic.php?f=26&t=16427		 ページ 1 ／ 1
作成者:  mitsugu [ 2016年12月21日(水) 13:40 ]
記事の件名:  XMLHttpRequestが機能しない。
　WebExtensions で拡張を書いています。

　以下のように main.html で JavaScript main.js を呼び出しています。コードのように main.js 内で XMLHttpRequest を使っているのですが、コンテンツを取得することができません。具体的には hutteNippon.weatherXMLData.status が 0 となり、console.log() が実行されていません ( デバッガでチェックしました )。取得することができるようにするにはどうすればよいのでしょうか。
　ちなみに XUL で拡張を書いていた時はコンテンツを取得できています。

main.html
コード:
<!DOCTYPE html>
<html>
　　<head>
　　　　<title>Hütte Nippon 2</title>
　　　　<meta charset="UTF-8">
　　　　<script src="main.js"></script>
　　　　<link rel="stylesheet" type="text/css" href="main.css">
　　</head>
　　<body id="main_box">

　　　　[略]

　　</body>
</html>


main.js
コード:
(function(){
　　var global=this; // this は window
　　global.hutteNippon={}; // Global Scope
　　global.hutteNippon.prefecture="", // 都道府県
　　global.hutteNippon.region="", // 一次細分区域
　　global.hutteNippon.weatherXMLData={}; // 週間天気予報 RSS

　　　　[略]

　　function getWeatherXMLFile(){
　　　　var uri=endPointRss+hutteNippon.hLocationCode[hutteNippon.region];
　　　　hutteNippon.weatherXMLData=new XMLHttpRequest();
　　　　hutteNippon.weatherXMLData.open('GET',uri);
　　　　hutteNippon.weatherXMLData.onreadystatechange=function(){
　　　　　　if (hutteNippon.weatherXMLData.readyState === 4 && hutteNippon.weatherXMLData.status === 200){
　　　　　　　　console.log(hutteNippon.weatherXMLData.responseText);
　　　　　　}
　　　　}
　　　　hutteNippon.weatherXMLData.send(null);
　　}

　　　　[略]

　　function getLocation() {
　　　　var gettingLocation=browser.storage.local.get("location");
　　　　var location;
　　　　gettingLocation.then(results => {
　　　　　　if(results["location"]!=undefined){
　　　　　　　　location=results["location"];
　　　　　　　　hutteNippon.prefecture=location["prefecture"];
　　　　　　　　hutteNippon.region=location["region"];
　　　　　　　　console.log(hutteNippon.prefecture);
　　　　　　　　console.log(hutteNippon.region);
　　　　　　　　dispLocationButtonLavel();
　　　　　　　　getWeatherXMLFile();
　　　　　　}else{
　　　　　　　　console.log('not found location');
　　　　　　　　selectLocation();
　　　　　　}
　　　　});
　　}

　　　　[略]

　　function init() {
　　　　browser.windows.onRemoved.addListener((windowId) => {
　　　　　　browser.windows.onRemoved.removeListener(function(){
　　　　　　　　console.log('remove window remove lisener');
　　　　　　});
　　　　　　console.log("Closed window: "+windowId);
　　　　　　if(windowId==idWinLocation) getLocation();
　　　　});
　　　　console.log('init Main Window');
　　　　document.getElementById('close_button').addEventListener('click',closeWin);
　　　　document.getElementById('locationButton').addEventListener('click',selectLocation);
　　　　getLocation();
　　}
　　window.addEventListener('DOMContentLoaded',init);
})();
作成者:  WADA [ 2016年12月21日(水) 18:32 ]
記事の件名:  Re: XMLHttpRequestが機能しない。
問題の、期待通りに実行されないconsole.logのある、main.js内で定義されているfunction getWeatherXMLFile()がどこでどうやって呼ばれているか不明なので、何とも言えませんが。

(1) <head>内の<script>でアノニモスな「(function(){...」を実行しているように見受けられます。
「main.html で JavaScript main.js を呼び出し」ているわけですが、それは、<head>内の<script>であることを理解されていますか？

viewtopic.php?f=26&t=16419 と同じ間違いをしていませんか？
あっちではロードイベントのeventListnerで実行することで、要素ができてからアクセスしたようですけど、
HTMLだと、<body onload="ほげほで();">で行う、あるいは、必要な要素の後ろの<script>で行う、というのが、普通の手法です。

[追記]
<head>内の<script>で何かを行う、というのは、自分の混乱の元になります。
<head>内の<script>では、functionやobjectの定義だけにとどめ、実行するのは、必要なオブジェクトの初期化だけ、にしておかないと、自分の混乱を招くだけ、になりがちです。
全ては、onloadで必要なことを実行した後で、というのが、自分の混乱を招かない方法になります。
[追記おわり]

(2) 「(function(){ var global=this;」とやっているんですが、ここでのthisって何になるか、ちゃんと理解して書いていますか？
HTMLの中だから、thisが何であれ、未定義の変数は、大抵は、順番に親の関数の変数を探しに行って結局はグローバルスコープのwindowまで探しに行くんだけど、いい加減に書いていると、碌なことがありません。
thisは、オブジェクトメソッドの中で、オブジェクトメソッドが実行されるオブジェクトを参照する時だけにとどめておかないと、自分の混乱を招くだけですから、ご注意を。

[追記]
自分でjsmモジュールを作ってimportして遊んでいたら、それが作るXXXという変数が、window.XXXになってしまっていて、下手をするとシステムや他の拡張のwindow.XXXを壊すのであせったのですが、それも「スコープ」などをきちんと理解していないためでした。
ちゃんと、let MyObj;import(...jsm,MyObj);として、自分のローカルの変数・objectに入れなきゃ、windowまで漏れ出して当然、ということでした。
[追記おわり]
作成者:  mar [ 2016年12月21日(水) 21:09 ]
記事の件名:  Re: XMLHttpRequestが機能しない。
コード:
hutteNippon.weatherXMLData.open('GET',uri);

この uri はどこからでしょうか？

追記：
この uri が参照するデータのオリジンはどこか、uri 変数はどこで定義されているか、の両方の意味で確認です。
作成者:  mitsugu [ 2016年12月22日(木) 08:56 ]
記事の件名:  Re: XMLHttpRequestが機能しない。
mar さんが書きました:
コード:
hutteNippon.weatherXMLData.open('GET',uri);

この uri はどこからでしょうか？

追記：
この uri が参照するデータのオリジンはどこか、uri 変数はどこで定義されているか、の両方の意味で確認です。


コード:
　　global.hutteNippon.weatherXMLData={}; // 週間天気予報 RSS

と
コード:
　　function getWeatherXMLFile(){


の間に

コード:
　　// 一次細分区域コードハッシュテーブル
　　global.hutteNippon.hLocationCode={
　　　　'宗谷地方（稚内）':"1100",
　　　　'上川地方（旭川）':"1200",
　　　　'留萌地方（留萌）':"1300",
　　　　'石狩地方（札幌）':"1400",
　　　　　　　[略]
　　　　'大東島地方（南大東島）':"9200",
　　　　'宮古島地方（宮古島）':"9300",
　　　　'石垣島地方（石垣島）':"9400",
　　　　'与那国島地方（与那国島）':"9500"
　　};
// const endPointRss='http://feedproxy.google.com/hitokuchi_';
　　const endPointRss='http://feeds.feedburner.com/hitokuchi_';


と書いており uri は function getWeatherXMLFile() の最初の行

コード:
　　function getWeatherXMLFile(){
　　　　var uri=endPointRss+hutteNippon.hLocationCode[hutteNippon.region];


に記述しています。hutteNippon.region は関数 getLocation() で設定しています ( ダイアログ風の別のウインドウで選択しています )。

　なお manifest.json では

コード:
　　"permissions": [
　　　　"storage",
　　　　"http://feeds.feedburner.com/*"
　　]


としています。


P.S.
　ひょっとして XMLHttpRequest は backgournd page か content script 以外では使えないのでしょうか？
作成者:  mitsugu [ 2016年12月28日(水) 20:29 ]
記事の件名:  Re: XMLHttpRequestが機能しない。
　まったく解決しているわけではないですが。

　Firefox Developer Edition で開発作業をしていたのですが、12 月 23 日の Firefox Developer Edition のアップデートから、開発中のアドオンがソースをまったく変更していないにもかかわらず動かなくなりました。19 日までの Firefox Developer Edition では動作していました( 19 日の Firefox Developer Edition を再インストールしたら動作しましたので Firefox Developer Edition のアップデートが原因と思われます )。原因は不明です。
　なので Firefox での開発をあきらめて、Google Chrome での開発に切り替えました。

　Google Chrome で開発していてわかったことがあります。
　Google Chrome では XMLHttpRequest は background script もしくは content script でないと使えないことがわかりました。正確には拡張の GUI を定義する HTML で script 要素を使って外部 JavaScript を呼んでいる場合に、その外部 JavaScript 内で XMLHttpRequest を使用すると、クロスオリジンのアクセス制限によりリクエストがエラーになります。
　少なくとも background script 上でクロスオリジン XMLHttpRequest を実行したところ、うまくデータを取得することができました。

　Firefox が同じ仕様になるのか不明ですが、WebExtensions に XMLHttpRequest が実装されたら ( 現時点では background script でも XMLHttpRequest が動きません。テスト済みです。なので WebExtensions には XMLHttpRequest は未実装と判断しました ) 同様の仕様になるのかもしれません。

　とりあえず経過報告ということで。
作成者:  mitsugu [ 2017年1月03日(火) 14:10 ]
記事の件名:  Re: XMLHttpRequestが機能しない。
　2017年１月2日版の Firefox Developer Edition で開発作業が再度できるようになりました。

　クロスオリジンの XMLHttpRequest が background script で可能なことを確認しました。

　以上報告まで。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/