外部ドメインjavascriptとの通信

前へ 次へ
このQ&Aのポイント
  • 別サーバにあるjavascriptファイルとPHPファイルを通信させて呼び出し元サイトにデータを埋め込もうとしていますが、別サーバに移動させた際にデータが返らなくなってしまいます。
  • この問題の原因を調査するために、両方のサーバでApache2が動作していることや、APIファイルとPHPファイルのアドレスが正しく書かれていることを確認しました。
  • しかし、問題の解決には至っていないため、具体的な解決策を教えていただけると助かります。
回答を見る
  • ベストアンサー

外部ドメインjavascriptとの通信

WebAPIみたいなのを作りたくって、GoogleAｄSenseとかを参考に色々やっていました。 そこで、別サーバにある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 ｈｔｔｐObj.status 0」とかでググって出てきた原因を自分なりにチェックしてみたのですが、 中々うまくいかず苦労しています。 できれば具体的にどうすればいいのか教えて頂けると助かります。 宜しくお願いします。

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

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.1

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

hayu-14
質問者

お礼

お早いご回答ありがとうございます! XMLHttpRequest Level 2は少し調べたのですが、ちょっとよく分からず断念してしまいました。 が、JSONP方式は以下のような簡単にできるサイトを見つけ、その通りにしたら無事できました。 http://zblog.sakura.ne.jp/javascript/jsonp_sum.html XMLHｔｔｐRequestはずっと使っていたので、恥ずかしながら別ドメインでは使えないことを知りませんでした。 また1つ勉強になりました。 ありがとうございました。

hayu-14
質問者

補足

すいません、別の質問を立てようと思ったのですが、関連しているのでここでもう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が使えなかったのが衝撃だったのですが、 何か理由があるのでしょうか? それとも使い方が間違っているのでしょうか・・・?

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

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
質問者

お礼

ご回答ありがとうございます。 やはり、document.writeはどうやっても駄目なようですね。 使い慣れてるものが使えないと不便です・・・ 現在はなんとかappendChildを利用して埋め込むようにしています。 勉強になりました。ありがとうございました。

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

#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
質問者

お礼

※補足の補足 説明不足に気付いたので追記致します。 >>まず、具体的にどうダメだったのかを詳しく聞かせていただかないとクリティカルな回答はできません。 駄目な時には、「API呼び出し元サイト：from.html」には何も書き込まれませんでした。 appendChildをする直前に、alert(put_code)とした所、思い通りのtableタグが生成されていましたが、 innerHTML以外では全て白紙の状態でした。

hayu-14
質問者

補足

言葉足らずで申し訳ない。 データベース参照部分などもあるので全ては出せませんが、根幹となる部分だけ以下に載せました。 (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')"; ?>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascriptの外部サーバーからの読み込み(greybox)

    いつも参考にさせていただいてます。 greyboxを使ってページを表示したいのですが、 使っているサーバーはjsファイルなどがアップロードできない、CMSサービスのサイトなので、 別のレンタルサーバーにアップロードしたjsファイルを読み込んで動かしたところうまくいきません。 模範例では、 ----------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "./greybox/"; // --></script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> </head> <body> <h1>GreyBox サンプル</h1> <a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]"> 毎日就職ナビのページ表示 </a> </body> </html> ----------------------------------- なのですが、パスを絶対パスに変えて ----------------------------------- <link rel="stylesheet" href="http://mydomain/greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "http://mydomain/greybox/"; // --></script> <script type="text/javascript" src="http://mydomain/greybox/AJS.js"></script> <script type="text/javascript" src="http://mydomain/greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/http://mydomain/gb_scripts.js"></script> ----------------------------------- と変更しました。 成功例(jsファイル同一サーバー上)：http://greybox.main.jp/test_ng/index2.html 失敗例(jsファイル別サーバー上)：http://greybox.main.jp/test_ok/index1.html 対応方法をお教え下さい。よろしくお願い致します。

  • 外部JavaScriptの書き方

    外部JavaScriptの書き方 <script language="JavaScript" src="data.js"></script> 上記data.jsから、他サーバーの外部javascriptを読み出すには 以下のよな書き方で正しいでしょうか？ document.open(); document.write('<script language="JavaScript" src="http://hoge.com/data.js"></script>'); document.close();

  • 外部javascriptファイルをjavascriptから動的に呼び出したい

    呼び出し元のURLによって動作を変えたいJAVASCRIPTがあります。 普段外部のJAVASCRIPTを呼び出すときはよくこうするのですが <script type="text/javascript" src="js.php?key=url"></script> これでは「key=url」が固定になってしまいます。そこで下記のように <script> var commentname=document.URL; var str=encodeURIComponent(commentname); document.write('<script type="text/javascript" src="read.php?key=',str,'"><\/script>'); </script> document.writeを使って無理やり外部Javascriptファイルの呼び出しスクリプトを書いているのですが、この書き方はどうもエレガントさにかけるというか、いまいち気に入りません。 もっとほかに良い方法がある気がするのですが、調べてもわかりませんでした。おわかりになる方がいらっしゃったらご教示頂けないでしょうか。

  • javascriptの外部ファイル読み込みの不具合

    質問させて頂きます。 javascript初心者です。 現在サイト作成にあたり、jsを組み込んでおります。 ajaxmailを設置しようと、参考サイトの手順通りに行ったのですが、 <script type="text/javascript" src="./js/protoculous-effects-packer.js"></script> の記述をすると、他のjsが動作しなくなってしまいます。 現在読み込んでいるものをコピペさせて頂きます。 <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script src="./js/mapstyle.js"></script> <script src="./js/modernizr.custom.min.js"></script> <script src="./js/jquery-1.10.2.js"></script> <script src="./js/hoge.js"></script> <script src="./js/jquery.smooth-scroll.min.js"></script> <script src="./js/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript" src="./js/protoculous-effects-packer.js"></script> <script type="text/javascript" src="./js/lightview.js"></script> 下２行がajax設置の際に読み込むものです。 lightview.jsだけの場合は機能しています。 どなたかご教示の程、よろしくお願い致します。

  • JAVASCRIPTで背景を切り替える方法

    以下の２つのjsファイルをボタンで切り替えれるようにするにはどういうソースで可能でしょうか？ <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/heartdrop.js"></SCRIPT> <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/stardrop.js"></SCRIPT> ２つとも動く背景のjsファイルです。 bodyに置けば作動しますので、ボタンを押して２つを切り替えれるようにしたいのですがどうしても方法がわかりません。 どなたかご教授いただけないでしょうか？ よろしくお願いします。

  • JavaScriptの外部ファイル読み込み

    JavaScriptの外部ファイル読み込みについてご教授下さい。 現在、Webサイトを作ろうとPHPとJavaScriptをレンタルサーバーにアップしたのですが、 ローカルではPHPから外部ファイルのJavaScriptを読み込めるのに、 サーバーにアップするとPHPからJavaScriptを読み込めなくなってしまいます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>TEST</title> <meta charset=utf-8" /> <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script> ・・・ 上記のようにしてもjquery-1.4.2.min.jsが読み込まれず、jQueryが使えません。 FireBugでスクリプトを確認すると以下のようなエラーが出ていました。 1Failed to load source for: http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.js ちなみに以下のようにJavaScriptファイルを開こうとするとブラウザは真っ白なのですが、 http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.js テキストファイルに変更したものだと中身を見ることができました。 http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.txt ブラウザはFireFox3.0.11とIE8.0の両方でダメでした。 なぜJavaScriptファイルだけ読み込めないのでしょうか。 ご教授お願いいたします。 ※ちなみに、別のレンタルサーバーにアップロードしたら問題なく読み込めました。 しかし、そこにはDBがなかったので、なるべく今のレンタルサーバーを使いたいのです。。

  • javascriptファイルは１つに統合できますか

    javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 ＜現状＞ <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか？ （単純に1箇所にコピー＆ペーストするようなイメージで） お手数ですが、ご教示のほど、宜しくお願い致します。

  • Javascript外部ファイルの読み込みについて（ブラウザにキャッシュさせたい）

    現在、製作中のサイトにおいて、webページが表示されるまで、5秒～15秒程度かかる事態が発生しています。 該当サイトでは、prototype.js等のjavascriptのライブラリを使用しており、合計で5個のjsファイルを読み込んでいます。 jsファイルの読み込み箇所を削除するとサクサクと快適になるので、jsファイルの読み込みに問題があると考え、jsファイルを圧縮したり（http://dean.edwards.name/packer/等）、ブラウザにキャッシュさせるために<script src=""での読み込み時に引数「?version=1」を追加してみたりしていますが、あまり改善しません。 読み込みの数を減らすため、prototype.jsとjquery.jsを統合するなども試してみました。（統合後のサイズは116KB） 利用環境によってはそれほど気にならない速度なのですが、IE6の環境でかなり重い場合がありますので、改善方法を探しています。 一回目の表示はともかく、2回目以降も毎回トップページ表示に5秒以上かかるのは問題がありますので…。 現時点で原因は、外部jsファイルがキャッシュされず毎回サーバーに読みにいっているために遅くなっていると思うのですが…。 ブラウザに外部ファイルをキャッシュさせる方法は何かないのでしょうか？ ちなみに、重くなる環境で、他のサイト（外部JSファイル読み込み多数）のサイトを表示しても、2回目以降は重くなりません。ブラウザのキャッシュの削除も一度試しています。 参考に、現在のスクリプト呼び出し部分を記述します。 ---------------------ソースここから--------------------------- <script type='text/javascript' src='js/prototype-1602-and_jquery.js?version=1'></script> <script type='text/javascript' src='js/js.js?version=1'></script> <script type="text/javascript" src="js/lib/jquery_auto_j.js?version=1"></script> <script type='text/javascript' src='js/scriptaculous-js-181/src/scriptaculous.js?load=effects'></script> <script type='text/javascript' src='js/lightview.js?version=1'></script> ---------------------ソースここまで--------------------------- また、スクリプトはPHPで作っていますので、キャッシュを許可する記述を以下のようにしています。 ---------------------ソースここから--------------------------- session_cache_limiter('private_no_expire'); session_start(); ---------------------ソースここまで--------------------------- また、現状ではjsファイルの読み込みが原因かと考えていますが、それ以外でも改善点などがあれば、それをご指摘頂ければありがたいです。 宜しくお願い致します。 確認環境：windows XP、 IE6 HP作成スクリプト：PHP

  • jQueryとprototypeの共存

    prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { 　　　　jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>

  • 外部JavaScriptの読み込み

    超初心者です。よろしくお願いします。 Macromedia Dream waverMX2004でホームページを作成しているのですが、見た目を良くしたくてスワップイメージやポップアップメニューなどを加えたところ、xxx.jsと自動的にファイルが作成され、 <script language="JavaScript" src="xxx.js"></script> と外部から読み込めるようになっていました。 しかし、<script language="JavaScript" type="text/JavaScript">○○○○○</script> という記述が残されているのですが、この○○○○○の部分を外部ファイルにすることは出来るのですか？（ソフトでの操作ではなく、Notepadなどで）

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する