-PR-
  • すぐに回答を!
  • 質問No.6896534
解決
済み

外部ドメインjavascriptとの通信

  • 閲覧数579
  • ありがとう数3
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 77% (35/45)

WebAPIみたいなのを作りたくって、GoogleAdSenseとかを参考に色々やっていました。
そこで、別サーバにあるjavascriptファイルとPHPファイルを通信させて呼び出し元サイトにdocument.writeでデータを埋め込もうとしています。

構成としては、
(1)API呼び出し元サイト:from.html
(2)呼び出されAPIファイル:api.js
(3)api.jsと通信してデータを渡すphpファイル:sample.php

手順としては、
(1)では、
 <script type="text/javascript" src="api.js">
 として、APIファイルの呼び出し。
(2)と(3)では、
 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1411752859
 を参考に、api.jsからsample.phpを呼び出す。
 sample.phpではサーバ内のデータベース検索結果をapi.jsに返す。
 受け取った値をdocument.writeでfrom.htmlに埋め込む。

上記の構成・手順で、全て同一サーバ内にあるときにはうまくいっていました。
しかし、from.htmlを別のサーバに移動させて動作させた時、
httpObj.status=0となってしまい、phpからデータが返ってこなくなってしまいました。

自分で調べた所、
・両方のサーバでApache2は動いている
・<script type="text/javascript" src="api.js">のapi.jsの所は、ちゃんと置かれているサーバのアドレスも含めて書いている(もちろん、api.jsが呼び出すPHPファイル名も)
・from.htmlはhtmlファイルをダブルクリックなどしてるわけではなく、ちゃんとブラウザからHTTPでアクセスしている

「javascript httpObj.status 0」とかでググって出てきた原因を自分なりにチェックしてみたのですが、
中々うまくいかず苦労しています。

できれば具体的にどうすればいいのか教えて頂けると助かります。
宜しくお願いします。
通報する
  • 回答数3

質問者が選んだベストアンサー

  • 回答No.1
レベル12

ベストアンサー率 59% (283/479)

XMLHttpRequest は基本的に異なるドメインにリクエストを発行できません。
対策としては XMLHttpRequest Level 2 を使用するか、JSONP方式にするか、です。
http://vird2002.s8.xrea.com/javascript/XMLHttpRequest.html#XMLHttpRequest_cross-domain
補足コメント
hayu-14

お礼率 77% (35/45)

すいません、別の質問を立てようと思ったのですが、関連しているのでここでもう1つ質問させていただきます。
PHPファイルから受信した文字列を、API呼び出し元ファイルに埋め込もうとしたのですが、
(1)document.getElementById("result").innerHTML = result; //OK
(2)document.write(result); //ダメ
(3)document.getElementsByTagName("body")[0].innerHTML = result; //OK
(4)document.getElementsByTagName("div")[0].innerHTML = result; //OK
(5)document.getElementsByTagName("body")[0].appendChild(result); //ダメ
(6)document.getElementsByTagName("div")[0].appendChild(result); //ダメ

※呼び出し元ファイルでは、<div id="result"></div>を埋め込んでいます

私的に、document.writeが使えなかったのが衝撃だったのですが、
何か理由があるのでしょうか? それとも使い方が間違っているのでしょうか・・・?
投稿日時 - 2011-07-24 23:30:59
お礼コメント
hayu-14

お礼率 77% (35/45)

お早いご回答ありがとうございます!

XMLHttpRequest Level 2は少し調べたのですが、ちょっとよく分からず断念してしまいました。
が、JSONP方式は以下のような簡単にできるサイトを見つけ、その通りにしたら無事できました。
http://zblog.sakura.ne.jp/javascript/jsonp_sum.html

XMLHttpRequestはずっと使っていたので、恥ずかしながら別ドメインでは使えないことを知りませんでした。
また1つ勉強になりました。
ありがとうございました。
投稿日時 - 2011-07-24 23:03:48
-PR-
-PR-

その他の回答 (全2件)

  • 回答No.2
レベル12

ベストアンサー率 59% (283/479)

#1 です。 まず、具体的にどうダメだったのかを詳しく聞かせていただかないとクリティカルな回答はできません。 さしつかえなければ、再現可能なコードを一式開示してください。 http://jsfiddle.net/ にUPしていただければ検証しやすいです。 考えられる可能性としては、 1. XHTML なので document.write を使えない 2. document をロードした後に doc ...続きを読む
#1 です。

まず、具体的にどうダメだったのかを詳しく聞かせていただかないとクリティカルな回答はできません。
さしつかえなければ、再現可能なコードを一式開示してください。
http://jsfiddle.net/ にUPしていただければ検証しやすいです。
考えられる可能性としては、

1. XHTML なので document.write を使えない
2. document をロードした後に document.write を呼び出したので既存のDOMが初期化されてしまった

通常、XMLHttpRequest は非同期なので 2. の可能性は十分にあります。appendChild が使えない理由にはならないので別の原因もありそうですが…。
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1006298752
https://developer.mozilla.org/ja/DOM/document.write
補足コメント
hayu-14

お礼率 77% (35/45)

言葉足らずで申し訳ない。

データベース参照部分などもあるので全ては出せませんが、根幹となる部分だけ以下に載せました。


(1)API呼び出し元サイト:from.html
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content-"text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript" src="http://SERVER'S ADDRESS/api.js"></script>
<div id="result"></div>
</body>
</html>

(2)呼び出されAPIファイル:api.js
var script = document.createElement("script");
script.type = "text/javascript";
script.charset = "utf-8";
script.src = "http://SERVER'S ADDRESS/sample.php?arg1=ARG1";
document.body.appendChild(script);

function callback(result){
var put_code = "<table><tr><td>"+result+</td></tr></table>";
document.getElementById("result").innerHTML = put_code;
}

(3)api.jsと通信してデータを渡すphpファイル:sample.php
<?php
mb_http_output("UTF-8");
$arg1 = $_GET['arg1'];
/*
postgresqlへアクセス
$arg1で検索をかけ、結果を文字列として格納
*/
echo "callback('$result')";
?>
投稿日時 - 2011-07-25 01:27:08
お礼コメント
hayu-14

お礼率 77% (35/45)

※補足の補足

説明不足に気付いたので追記致します。

>>まず、具体的にどうダメだったのかを詳しく聞かせていただかないとクリティカルな回答はできません。
駄目な時には、「API呼び出し元サイト:from.html」には何も書き込まれませんでした。
appendChildをする直前に、alert(put_code)とした所、思い通りのtableタグが生成されていましたが、
innerHTML以外では全て白紙の状態でした。
投稿日時 - 2011-07-25 01:39:13
  • 回答No.3
レベル14

ベストアンサー率 51% (3827/7415)

document.writeはどこまでいってもだめです (5)(6)はアペンドするにはテキストノードを作る必要があります。 <html> <head> <script> window.onload=function(){ var result="test"; document.getElementById("result ...続きを読む
document.writeはどこまでいってもだめです

(5)(6)はアペンドするにはテキストノードを作る必要があります。

<html>
<head>
<script>
window.onload=function(){
var result="test";
document.getElementById("result").innerHTML = result+"(1)";
document.getElementsByTagName("body")[0].innerHTML += result+"(3)";
document.getElementsByTagName("div")[1].innerHTML = result+"(4)";
document.getElementsByTagName("body")[0].appendChild(document.createTextNode(result+"(5)"));
document.getElementsByTagName("div")[2].appendChild(document.createTextNode(result+"(6)"));
}
</script>
</head>
<body>
<div id="result"></div>
<div ></div>
<div ></div>
</body>
</html>
お礼コメント
hayu-14

お礼率 77% (35/45)

ご回答ありがとうございます。

やはり、document.writeはどうやっても駄目なようですね。
使い慣れてるものが使えないと不便です・・・

現在はなんとかappendChildを利用して埋め込むようにしています。
勉強になりました。ありがとうございました。
投稿日時 - 2011-07-26 11:49:49
  • 回答数3
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ