jQuery を使って JSONP でリクエストする方法を２通り紹介するよ。

その１: $("<script>")

document.createElement() を $() を使って実現する。

$("<script>")
    .attr('type', 'text/javascript')
    .attr('src', "http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback")
    .appendTo($("head"));

function myCallback(json){
    // ロード完了時にここが呼ばれる
}

http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback にリクエストがいく。

callback のところは、サービスによって指定の仕方が違うかもね。

その２: $.ajax

$.ajax の dataType で jsonp が使える。

$.ajax({
    url : "http://www.example.com/jsonp.cgi",
    dataType : "jsonp",
    data : {
        param1 : "value1"
    },
    success : function(json){
        // ロード完了時にここが呼ばれる
    },
    error : function(){
        alert('error');
    }
});

こっちの方がシンプルに書ける。コールバック用の関数は jQuery が自動的に生成して、結果に応じて success や error を呼び出してくれる。

API によってはコールバックを指定するためのパラメータが callback ではなくて、別の名前の場合がある。このときは jsonp パラメータを指定する。

$.ajax({
    url : "http://www.example.com/jsonp.cgi",
    dataType : "jsonp",
    data : {
        param1 : "value1"
    },
    jsonp : "jsoncallback", // ← !!!これ!!!
    success : function(json){
        // ロード完了時にここが呼ばれる
    },
    error : function(){
        alert('error');
    }
});

裏側では、http://www.example.com/jsonp.cgi?jsoncallback=jsonp1197507452843&_=1197507453671&param1=value1 という URL にリクエストが行く。jsonp1197507452843 というのが jQuery が動的に生成するコールバック関数。呼び終わったら、ちゃんと自分自身を undefined にしているので、グローバル名前空間を汚すのも一瞬で済むようだ。