id:memamii
ポイントあり300ptベストアンサーあり
インターネットウェブ制作

XMLHttpRequestによる非同期通信がうまくできません


javascriptとXMLHttpRequestを使用して、ローカルで非同期通信を行いたい(file://c:/...)のですが、うまく動作させることができません。
OSはWindowsXp Pro SP3で、今日時点までのWindowsUpdate適用済みです。

ブラウザとその動作結果は以下の通りです。
-----------------------------------
Chrome 16.0.912.77, Opera11.61
　・1回目のalert結果
　　「エラー0」
　・2回目のalert結果
　　alert表示されず

firefox9.0.1, IE8.0.6001.18702
　・1回目のalert結果
　　「エラー0」
　・2回目のalert結果
　　「エラー0」
-----------------------------------
また、ソースの抜粋は、コメントにつけます。
よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2012/02/02 10:41:57
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:windofjuly No.1

回答回数2625ベストアンサー獲得回数1149

ポイント200pt

過去質問でjQuery使っているので、
今回もjQuery使えば楽だと思いますが・・・
http://hisasann.com/housetect/2008/06/javascript_4.html
jQueryは使わないということなら、
こちらの記事を参照して書き直してみると良いでしょう
http://hisasann.com/housetect/2008/08/jqueryieajax.html

別の話題ですが、こんなのもあります
http://ascii.jp/elem/000/000/559/559105/

id:memamii

回答ありがとうございました。
示して下さったページを読んで、jQueryのgetメソッドで成功しました。
ローカルに関してはIE,FireFoxのみ成功で、サーバにupload後は、OperaもChromeも成功しました。
有り難うございました。

2012/02/02 10:25:08

その他の回答（4件）

id:windofjuly No.1

回答回数2625ベストアンサー獲得回数1149ここでベストアンサー

ポイント200pt

過去質問でjQuery使っているので、
今回もjQuery使えば楽だと思いますが・・・
http://hisasann.com/housetect/2008/06/javascript_4.html
jQueryは使わないということなら、
こちらの記事を参照して書き直してみると良いでしょう
http://hisasann.com/housetect/2008/08/jqueryieajax.html

別の話題ですが、こんなのもあります
http://ascii.jp/elem/000/000/559/559105/

id:memamii

回答ありがとうございました。
示して下さったページを読んで、jQueryのgetメソッドで成功しました。
ローカルに関してはIE,FireFoxのみ成功で、サーバにupload後は、OperaもChromeも成功しました。
有り難うございました。

2012/02/02 10:25:08
id:oil999 No.2

回答回数1728ベストアンサー獲得回数320

ポイント30pt

ローカルでhttpサーバは動作しているでしょうか?
ご確認ください。

IISでしょうか、それともApacheでしょうか？
種類とバージョンをお知らせください。

id:memamii

すみません。No.1の方の回答で、事足りましたので・・。
ちなみに、WindowsXp付属のIIS5では、XMLHttpRequest自体エラーでした。
WindowsVista付属のIIS7,及びIIS6互換モードではWeb.configが必要でした。(当然と言えば当然なのですが)

2012/02/02 10:29:00
id:rikuba No.3

回答回数26ベストアンサー獲得回数12

ポイント40pt

OperaではXMLHttpRequestでローカルファイルにアクセスする方法はなさそうです。
Chromeでは、起動オプションに「--allow-file-access-from-files」を付ければ可能です。
ローカルファイスにアクセスした場合のステータスコードは200ではなく0になります。

ご提示のコードでは、XMLHttpRequestによるアクセスが完了しないままにそのXMLHttpRequestを次のアクセスのために使いまわしてしまっています。非同期通信なので、1度目のアクセスが完了しないうちに2度目のリクエスト送信に入ってしまう可能性があります。
1つのXMLHttpRequestオブジェクトを使いまわす方法もありますが、複数のXMLHttpRequestオブジェクトを使う方が簡単です。

簡単な例を用意しました。

  • XMLHttpRequestよりもActiveXObjectを優先していますが、これはIEのXMLHttpRequestではローカルファイルにアクセスできないからです。Webで使う場合はXMLHttpRequestを優先してください。
  • エラーを投げるべき場所でalertしていますが、Webで使う場合は書き換えてください。

function GetXMLHttpRequest() {
  try { return new ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch (err) {}
  try { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); } catch (err) {}
  if (typeof XMLHttpRequest !== 'undefined') {
    return new XMLHttpRequest;
  }
  return null;
}

function AsyncGetRequest(url, onload) {
  var xhr = GetXMLHttpRequest();
  if (!xhr) {
    alert('XMLHttpRequest is not supported');
    return;
  }
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if ({0: true, 200: true, 201: true}[xhr.status]) {
      onload(xhr.responseText);
    } else {
      alert('XMLHttpRequest error status: ' + xhr.status);
    }
    xhr = onload = null;
  };
  xhr.send(null);
}

function OnReady(text) {
  alert(text);
}

function NonSyncReadData() {
  AsyncGetRequest('a.html', OnReady);
  AsyncGetRequest('b.html', OnReady);
}

可能ならローカルにサーバ環境を用意することをおすすめします

id:memamii

ソースまで書いて頂き有り難うございました。
今回は、jQueryにひかれてしまいました。

2012/02/02 10:34:21
id:Cherenkov No.4

回答回数1504ベストアンサー獲得回数493

ポイント30pt

ローカルサーバを立てずにローカルファイルを読み込むには制限があります。

chromeで「Origin null is not allowed by Access-Control-Allow-Origin.」がでる場合は、起動オプションの「--allow-file-access-from-files」。


firefoxはアドレスバーに
about:config と打ち込んでEnter。
security.fileuri.strict_origin_policy
の値をfalseにすればローカルでもajaxのファイル読み込みができるようになると思います。


jquery + colorboxに関する質問です。 colorboxというモジュール.. - 人力検索はてな

id:memamii

これは、WEBからローカルファイルにアクセスできると言うことでしょうか?
完全に裏技ですね。ありがとうございました。

2012/02/02 10:36:12
id:Cherenkov

webじゃなくてローカル環境だけだと思いますよ

2012/02/02 10:44:07
id:a-kuma3 No.5

回答回数4966ベストアンサー獲得回数2151

お話は、ほぼ収束した感じですかね。
XMLHttpRequest 　　っちゅうくらいなので、
http: じゃない file: なんかで、同じ動作を期待すんなよ、ってことでしょうか。

Firefox だと、ドキュメントに file プロトコルもサポートするぜ、とは書いてあるんですけれど。
https://developer.mozilla.org/ja/XMLHttpRequest

はてなグループの方で、こんな書き込みを見つけたので、参考まで。
http://subtech.g.hatena.ne.jp/mala/20110425/1303730089

file プロトコルをサポートしてる（Firefox）とは言っても、自由に好きなところを読みに行っちゃいけないよね、というのは、当たり前と言えば、当たり前の話。

id:memamii

実現したかったのは、WEB上でのやりとりです。それをローカルでテストしているときにどうにかできないのかなと思い、質問しました。
文字でのコミュニケーションは難しいのは承知ですが、書き方をもう少し柔らかにして頂けませんか?　文面そのものを読んだとき、かなり不快感でしたから。

2012/02/02 10:39:34

コメント（1件)

  • id:memamii
    mamekko 2012/01/30 21:13:09
    [script/Common.js]------------------------------------
    var xmlhttp;
    function OnReady() {
    if(xmlhttp.readyState == 4) {
    if(xmlhttp.status == 200 || xmlhttp.status == 201) {
    // リクエストの処理
    alert(xmlhttp.responseText);
    } else {
    // エラー処理
    alert("エラー" + xmlhttp.status );
    }
    }
    }

    function NonSyncReadData() {
    xmlhttp=false;

    /* XMLHttpRequestオブジェクト作成 */
    if(typeof ActiveXObject!="undefined"){ /* IE5, IE6 */
    try {
    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); /* MSXML3 */
    }
    catch(e){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); /* MSXML2 */
    }
    }
    if(!xmlhttp && typeof XMLHttpRequest!="undefined"){
    xmlhttp=new XMLHttpRequest(); /* Firefox, Safari, IE7 */
    }
    if(!xmlhttp){
    alert("XMLHttpRequest非対応ブラウザ");
    return false;
    }

    /* HTTPリクエスト初期化＋HTTPメソッドおよびリクエスト先URLの設定 */
    xmlhttp.open("GET","a.html",true);
    // 非同期で戻ってくる関数の設定
    xmlhttp.onreadystatechange = OnReady;
    /* リクエスト送信 */
    xmlhttp.send(null);

    /* HTTPリクエスト初期化＋HTTPメソッドおよびリクエスト先URLの設定 */
    xmlhttp.open("GET","b.html",true);
    xmlhttp.onreadystatechange = OnReady;
    /* リクエスト送信 */
    xmlhttp.send(null);
    }
    ------------------------------------------------------

    [index.html]------------------------------------------
    <html>
    <head>
    <script type="text/javascript" src="script/Common.js"></script>
    <title>てすと</title>
    <body onLoad='NonSyncReadData();'>
    適当なHTML
    </body>
    </html>
    ------------------------------------------------------

    [a.html]------------------------------------------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>右</title>
    </head>
    <body>
    右
    </body>
    </html>

    ------------------------------------------------------

    [b.html]------------------------------------------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>左</title>
    </head>
    <body>
    左
    </body>
    </html>

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ