AjaxのリクエストファイルでJavascriptを読み込む際の注意

Javascript

どうやら、ajaxでファイルを呼び出す際、呼び出されるファイル内でjavascriptファイルを読み込んでいると、
読み込まれるはずのjavascriptが認識されていないようだ。
しかも、IEでのみ。Firefox上では予想通りの動作をしてくれた。
こんなところでもクロスブラウザか〜・・・と思いながら考えてみた。


※prototype.jsのAjax.Updater()で再現してみた。


再現させた時のコードと、回避策をメモしておこう。

ajax呼び出し元のファイル(ajaxtest.html)
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<title>ajaxtest</title>
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript">
getResponse = function()
{
    new Ajax.Updater('into_here',
                  './ajaxresponse.html',
                  {
                      evalScripts:true,
                      method:'get',
                      onComplete:insertResponse
                  });
}

insertResponse = function(req)
{
    alert(req.responseText);
}
</script>
</head>
<body>
<h2>ajaxtest</h2>
<a href="#" onclick="getResponse(); return false;">呼び出し</a>
<br><br>
Response into belong div Element<br>
<div id="into_here">ここにレスポンスが入る</div>
</body>
</html>
レスポンスファイル(ajaxresponse.html)
<script type="text/javascript" src="request.js"></script>
<a href="#" onclick="fnc(); return false;">レスポンス内容</a>
呼び出し先が読み込むjavascriptファイル(request.js)
fnc = function()
{
    alert("test");
}


これだとAjax.Updater()のオプションでevalScriptsをtrueにしていても読み込まれない。
（このくらいのファイルなら直接scriptタグの中に書けよ、というツッコミはおいといて・・・）


なので、結果こういう回避の仕方をした。

レスポンスファイル(ajaxresponse.html)
<script type="text/javascript">
var scriptTag = document.createElement("script");
scriptTag.type="text.javascript";
scriptTag.src="request.js";

document.getElementsByTagName("head")[0].appendChild(scriptTag);
</script>
<a href="#" onclick="fnc(); return false;">レスポンス内容</a>


これで、呼び出し元ファイルのheadにscriptタグを追加して新しいjavascriptファイルを読み込ませる
という方法をになる。


コレならIEでもうまく動作してくれる♪


う〜ん・・・ややっこしいったらないですね。


jqueryだったら再現するのかどうかもチェックしておく必要がありますね・・・

json_encode関数

php

PHPver5.2.0からの実装ですが、

json_encode( mixed $value )

て関数があるみたいですね。

引数に入れる値によって、返されるJSONの形式が変わります。

例を挙げると、こんな感じです。

配列：

<?php
$array = array("hoge", "hoge2", "hoge3");
echo "array：". json_encode($array2);
?>

これは

array2：["hoge","hoge2","hoge3"]

配列形式ですね。

連想配列：

<?php
$associative_array = array('test'   => "hoge",
                                     'test2' => "hoge2",
                                     'test3' => "hoge3"
                             );

echo "array：". json_encode($associative_array);
?>

とすると

array1：{"test":"hoge","test2":"hoge2","test3":"hoge3"}

オブジェクト形式になります。

クラスインスタンス：

<?php
class JsonEncode
{
    public $hoge1 = "hoge";
    public $hoge2 = "hoge2";
    public $hoge3 = "hoge3";
}

$json = new JsonEncode();
echo "class instance：". json_encode($json);
?>

とくれば

class instance：{"hoge1":"hoge","hoge2":"hoge2","hoge3":"hoge3"}

オブジェクト形式ですね。


う〜んややっこしいなぁ・・・

参考：
導入JSON（日本語版） http://www.json.org/json-ja.html