今さらだけど、「JSONPってなんだ？」って思ったのでまとめてみる。

まず、JSONとAjaxについて整理。

JSON(JavaScript Object Notation)

• オブジェクトまたは配列として実現されるデータ記述言語。フォーマット。
• MIMEタイプは”application/json” 拡張子は”.json”
• （殆ど）そのままJavaScriptの配列/オブジェクトとして扱えるので便利
• 単純で軽量。パースのコストもXMLなどに比べて安い。
• Ajaxの普及と共に注目を浴びた。

（AjaxのxはXMLだけど、）今ではJSONを使っている非同期アプリケーションのが多いよね。

Ajax(Asynchronous JavaScript + XML)

• JavaScriptのXMLHttpRequestとXML（今はJSONが多い）を使った非同期通信
• セキュリティーの都合のため、XMLHttpRequestはクロスドメイン間の通信は出来ない。

ここで、他のサイトのAPIをAjaxで触りたいとかとなってくると問題になる。
解決策としては、

1. JSONPを使う。
2. XMLHttpRequest以外で通信する

があるけれど、とりあえずここではJSONPについて。

JSONP(JSON with padding)

• HTMLタグのscript#srcにはクロスドメイン制限がないので、それを利用してクロスドメイン間の通信を実現する手法
• 予めコールバック関数を定義しておき、パラメーターにコールバックを指定し呼び出してもらう。

具体的に書いてみると、
[html]


[/html]
みたいにすること。

jQueryを用いたJSONPの実装

でも、結局はjQueryを使うと簡単に出来ちゃうよ、ってお話です。

[javascript]
// $.getJSONでも出来るみたいだけど。
$.ajax({
url: “http://crossdomain/json”,
data: {
hoge: “hogu”
},
dataType: ‘jsonp’, // これは固定
callback: ‘callbackname’, // コールバック関数を指定するためのパラメーター名
success: function(data, status){
// 何かをする
}
});
[/javascript]

jQuery使えば、JSONPのことを知らなくてもクロスドメイン間の通信も実装できちゃいそうだね。

公開されたばかりのGoogle製のJavaScriptライブラリをちょっとだけ触ってみた。
GoogleAppsEngineも凄かったけど、
これも並ぶくらいにヤバいんじゃない？って思ってる。
こんなライブラリを自由時間に作っちゃって、
ひょいひょい公開するGoogleはホント鳥肌たつ。

Gmailとかもこのライブラリで作られてるんだって。

以下、せっかくなので要点だけまとめてみた。

英語読める方はGoogleLabsのドキュメント読んだ方がいいかも。

まず、ソースはSVNから落としてくる。
[code]

http://closure-library.googlecode.com/svn/trunk/

[/code]

HTMLファイルにはbase.jsだけ読み込むだけで良い。
[html]

[/html]

但し、JavaScriptソースにはJavaなどに似た記法で使うソースの宣言が必要。
[javascript]
goog.require(‘goog.dom’);
[/javascript]

名前空間の概念がある。最上位は”goog”である。
jQueryとは異なり、階層構造になっているから注意。（Javaとかに慣れてる人は大丈夫）

また、継承も出来る。詳しくは追々かな。
[javascript]
goog.inherits(goog.ui.MenuButton, goog.ui.Button);
[/javascript]

jQueryみたいに、独自のイベントハンドラがあるし、ユーザー独自のイベントも作れる。
（ブラウザ毎の差異を吸収できる）
[javascript]
goog.events.listen(this.elHeader_, goog.events.EventType.CLICK, this.onHeaderClick_, false, this);
[/javascript]
ここは、覚えないとダメそう。
Event Handling

—

ClosureLibraryはClosureToolsの一部で、
その他にコードを最適化するCompilerなどがあるみたい。
様子見てつかってみたいです

ブラウザによってAタグのhref属性の値が違う。

[html]
link
[/html]

みたいなソースで、

[javascript]
var href = $(“a#takotako”).attr(“href”);
alert(“href = ” + href);
[/javascript]

JSとかで取得する場面があった。

• モダンブラウザ(FF, Opera, IE8.etc)
  href = “#kumakuma”
  これが普通だと思うけど。
• IE7(IE6もかも？)
  href = “http://thleave.com/#kumakuma”
  ご丁寧に全部出る。

これにすげーハマった。
ってきり、JSON（も扱っているのでその）周りかと思ったら全然違う。
みなさん是非、IEはIEでもIE8を使いましょう！