jQuery と JSONP と $.ajax() と無名関数

JavaScript のコードをほとんど書いたことがなく、jQueryJSONP も初めてだったので、戸惑うことが多かった。

Bing で callback で利用する関数を指定するパラメーター名は JsonCallback

Bing のように callback 関数を明示的に指定する必要がある場合は、

$.ajax({
    url: 'http://localhost/ajax',
    dataType: 'jsonp',
    query: 'hoge',
    type: 'fuga',
    data: {
        ...
    },
    jsonp: 'JsonCallback', // jsonp: に callback 関数を指定するパラメータ名を設定する
    error: function({ ... }),
    success: function({ ... }),
    completed: function({ ... })
});

のように「jsonp:」にパラメータ名を指定する必要があることが最初わからなかった。

jsonp:」が指定されない場合

jQueryAJAX を利用するサンプルコードで「jsonp:」に値が設定されていないものを見かけるが、「jsonp:」が設定されていない場合、callback 関数を指定するパラメータ名は、callback が指定される(ややこしい)。
どういうことかというと、例えば「jsonp: JsonCallback」でパラメータ名を明示している場合は、
http://localhost/ajax?query=hoge&type=fuga&JsonCallback=callbackの関数名
となる。では、「jsonp:」でパラメータ名が指定されていない場合は、
http://localhost/ajax?query=hoge&type=fuga&callback=callbackの関数名
というように、「callback」がデフォルトで設定されているようになっている。そのため、Yahoo WEB API のように明示しなくても、JSONP での処理ができる。
だからこそかもしれないが、Bing のように callback のパラメータ名ではない場合、初心者は戸惑うように思う。

callback を指定するパラメータ名とパラメータ値としての「?」

これを調べている際に、「jsonp:」を明示しないで JSONP を処理するための方法を示しているページをいくつか見つけた。
その方法は、

$.ajax({
    // callback 関数を指定するパラメータ名の値に「?」を指定する URL を
    // 「url:」に指定する
    url: 'http://localhost/ajax?JsonCallback=?&',
    dataType: 'jsonp',
    query: 'hoge',
    type: 'fuga',
    data: {
        ...
    },
    error: function({ ... }),
    success: function({ ... }),
    completed: function({ ... })
});

callback 関数を指定するパラメータ名の値に「?」を指定する方法だった。こうすることで、上記と同様に「?」が無名関数に置換されてサーバーにリクエストが送られている。
http://localhost/ajax?JsonCallback=callbackの関数名&query=hoge&type=fuga&
ここまで理解するのに、ほぼ丸一日を費やした…。

雑感

いま思うことは、

  1. Bing API を使っている日本人は少ないのでは…。
  2. Microsoft のリファレンスページは、MS製品を利用するユーザーを対象に作られているように思える。
  3. JSONP ではまっても、たいていの WEB APIXML のレスポンスを用意しているので、逃げ道が用意されている。

から、Bing を jQuery で使おうというサンプルコードが掲載されているページが少なかったのではないかな…。