タイトルがシンプルすぎますが…。一言で書くのが難しすぎる！ということで、正確にはこうです。
このブログのトップ（お知らせ）で、「新館」の更新告知に使用していたjQueryによるコードがうまく動かなくなったのでJavaScript標準のコードのみにしてみる。
要は、これが出なくなったので、何とかしようというわけでした。
原因はわかっていて、ココログでは画像のポップアップ用にMultiBoxというライブラリを組み込んでいるのですが、これがjQueryとぶつかるようです。これは、画像のポップアップ表示をFancyboxでやろうとして失敗したこともあるので、以前からわかっていたことなのですが。
なので、インデックス画面に限り、MultiBoxを無効化していたのですが、さすがにこれは具合が悪いので、やっぱりMultiBoxも有効にするということにしたら、jQueryのコードもうまく動かなくなってきたのです。
では、たいしたコードではないのでjQueryに頼らず、JavaScript素のコードで書いてしまえということにしました。
これまでは、こんなコードでした。
<script type="text/javascript">
<!–
$.ajax( {
url: ‘http://www.naosan.jp/whatsnew.aspx’,
dataType: ‘jsonp’,
jsonp: ‘callback’,
error: function(XMLHttpRequest, status, errorThrown) { $("#whatsnew").text(status);},
success: function(data) {
html = ‘<ul>’;
$.each(data, function() {
aopen = ”;
aclose = ”;
if( this.url != null ) {
aopen = ‘<a href="’+this.url+’">’;
aclose = ‘</a>’;
}
html += ‘<li>’+'[‘+this.date+’]’+aopen+this.title+aclose+'</li>’;
});
html += ‘</ul>’;
$("#whatsnew").html(html);
}
});
//–>
</script>
それなりに長いコードなのですが、要は$.ajax()メソッドの呼び出し<script>タグに書き換えるだけです。
<script>
function js(data) {
html = ‘<ul>’;
for(i=0; i<data.length; i++) {
var item = data[i];
aopen = ”;
aclose = ”;
if( item["url"] != null ) {
aopen = ‘<a href="’+item["url"]+’">’;
aclose = ‘</a>’;
}
html += ‘<li>’+'[‘+item["date"]+’]’+aopen+item["title"]+aclose+'</li>’;
}
html += ‘</ul>’;
document.getElementById("whatsnew").innerHTML = html;
}
</script>
<script src="http://www.naosan.jp/whatsnew.aspx?callback=js"></script>
JSONPでデータをもらってコールバック！とかいうとカッコよいのですが、ライブラリを使っているとそのあたりの動きをよく知らないというケースは多いようです。やっぱり、JavaScriptだけでコードを書いてみれば、どのような理屈で動くのかがわかってよいものです。
最後の<script>タグでは、src属性で指定したWebサービスからJSONPでJSON形式のデータが返りますが、callbackにに指定されている関数名jsの引数に、返ったデータを与えて呼び出すという処理が行われます。
js( JSON形式データ );
js自体は上の方で定義されていますが、これはjQueryを使う場合の成功関数と同じものです。
このような動きによって、クロスドメインのメソッド呼び出しを可能にするJSONPの仕組みがよくわかると思います。$.ajax()メソッドは、このへんをカプセル化するものです。