Scriptタグでクロスドメイン通信

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： hei ： 2007/04/02（月） 15:15  ID:.4cJNw8w sub-A2
こんばんは。

JavaScript初挑戦です。
ページ遷移することなくサーバーと通信したいのですが、
XMLHTTPRequestではクロスドメイン制限のためできません。
調べてみると、Scriptタグを使えばクロスドメイン制限を回避できることは分かりました。
http://www.itmedia.co.jp/enterprise/articles/0608/25/news010.html
などを参考にしてやってみたのですが、
全く動きません。
単純化したものを示しますので、どこがいけないのかご指摘下さい。

クライアント側では
ボタンが押されると新たなScriptタグを生成しsrcでサーバーに「value=aiueo」を渡します。
サーバー側では<script>eval(CallBack(aiueo))</script>という文字列を出力します。
「CallBack」はクライアント側で実装されているメソッドで、
これが動的に実行されることを期待しているのですが、なりません。

【test.html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無題のページ</title>
<script type ="text/javascript" id="scriptNode"></script>
<script type="text/javascript">
function Button1_onclick() {
var url="192.168.0.???/test.php?arg=aiueo";
//古いノード
var originalNode=document.getElementById("scriptNode");
//新しくノードを作る
var newScriptNode=document.createElement("script");
newScriptNode.src=url;
newScriptNode.id="scriptNode";
originalNode.parentNode.replaceChild(newScriptNode,originalNode);
}
function CallBack(arg){//渡された値を足して返す←これが呼ばれない
alert(arg+arg)
}
</script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
</body>
</html>


【test.php】
<?php
$value="CallBack('".$_GET['value']."')";
print($value);
?>
http://image.itmedia.co.jp/l/im/enterprise/articles/0608/25/l_fig02.gif
にある「（サーバー側で）JavaScriptのコードを返す」とは、
PHPならprintで出力するということではないのでしょうか？
なお、"<script>".$vaule."</script>"と<script>タグで囲んで出力すると何も起きませんでした。

ＯＳ：Windows VistとXp
ブラウザ：IE7
Apache2.2.4
PHP:5.2.1
です。

よろしくお願い致します。
1   名前： ラブーフ ： 2007/04/02（月） 15:15  ID:Z2Vl5EuX sub-9G
var url="192.168.0.???/test.php?arg=aiueo";

となっているので、test.phpの内容を
<?php
 echo 'CallBack("'.$_GET['arg'].'");';
?>

とするだけのような気がします（valueをargに変えただけ）。
2   名前： 匿名 ： 2007/04/02（月） 15:15  ID:SHqbFxHj sub-Cz
ヒント：Content-Type
3   名前： hei ： 2007/04/02（月） 15:15  ID:PCN1.KPj sub-FQ
回答ありがとうございます。

>ラブーフさん
質問するときにコピペしなかったので、
書き間違えました。すいません。
ここを正しくしても動きませんでした。

>匿名さん
test.htmlの<head>内に
<meta http-equiv="Content-Type" content="text/html" />

test.phpの先頭行に
<meta http-equiv="Content-Script-Type" content="text/javascript" />
としたり、
<php>内に
print ("Content-Type: application/x-javascript\n\n");
を追加したのですがダメでした。

また、単にIEで開いてボタンを押すと、
ランタイムエラー「ライン２　文字１　エラー　文字が正しくありません」
が発生するようになりました。
主にVisualStudio2005を使っているのですが、
その場合はエラーになりません。
休日なので昨日とPCは違うのですが、IEの設定は同じにしているはずで、
違うのはローカルのApcaheに接続していることくらいだと思うのですが・・・

もう少しお力を貸して下さい。
よろしくお願いします。




4   名前： 匿名 ： 2007/04/02（月） 15:15  ID:SHqbFxHj sub-Cz
ヒント：文字化け
5   名前： hei ： 2007/04/02（月） 15:15  ID:PCN1.KPj sub-FQ
できません・・・

そこで、さらに単純化してローカルPCの同じパスにあるtest.jsを参照するようにしてみました。

【test.html】
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>テスト</title>
    <script type="text/javascript" src="test.js">
        function CallBack(){
            alert("CallBack called");
        }
    </script>

</head>
<body>
    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />

</body>
</html>

次のようにCallBackしない場合はだたしく動きます。
【test.js】
function Button1_onclick(){
	alert("Button1_onclick called");
}

しかし、次のようにすると、ブラウザに文字列として表示されるだけです。
function Button1_onclick(){
	document.write("CallBack()");
}

次のようにすると、エラーになります。
function Button1_onclick(){
	eval("CallBack()");
}

ご教授よろしくお願いします。


6   名前： hei ： 2007/04/02（月） 15:15  ID:PCN1.KPj sub-FQ
先にあげた２つがうまくいかない理由はわかりました。
しかし、次のもオブジェクトを指定してくださいとエラーになります。

【test.js】
function Button1_onclick(){
	CallBack();
}
7   名前： 匿名 ： 2007/04/02（月） 15:15  ID:SHqbFxHj sub-Cz
何だか話が混乱してきたような。ごめん。

> <script type="text/javascript" src="test.js">

HTML の基本ルールとして、script 要素に src 属性がある場合、その内容（開始タグと終了タグに挟まれた範囲）は無視される。だから、>>5 では CallBack() は定義されず、

> オブジェクトを指定してくださいとエラー

になる。

とりあえず、スクリプトを含め、全部 UTF-8/16 に統一して試してみてはどうか（Content-Type: application/x-javascript; charset=UTF-8）。『ランタイムエラー……が発生するようになりました』（>>3）ということは、スクリプトとして認識・実行するところまでは行ってる。
8   名前： hei ： 2007/04/02（月） 15:15  ID:.4cJNw8w sub-A2
動きました！

全てのコードを乗せなおします。

【test.html】（文字コードの変更と２箇所追加）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>無題のページ</title>
<script type="text/javascript" id="scriptNode" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function Button1_onclick() {

var url="http://192.168.0.161/test.php?value=aiueo";//http://追加！
//古いノード
var originalNode=document.getElementById("scriptNode");
//新しくノードを作る
var newScriptNode=document.createElement("script");
newScriptNode.src=url;
newScriptNode.charset="utf-8";
newScriptNode.id="scriptNode";
originalNode.parentNode.replaceChild(newScriptNode,originalNode);
}
function CallBack(arg){
alert(arg+arg);//セミコロン追加！
}
</script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
</body>
</html>

【test.php】
<?php
$value="CallBack('".$_GET['value']."');";
//print("Content-Type: application/x-javascript; charset=UTF-8;\n\n");
print($value);
?>

ただ疑問なのは、test.phpの３行目のコメントをはずすと
「エラー　；がありません」となることです。

とにかく動いたので、先に進むことができます。
ありがとうございました！
一覧へ戻る