いまさらJSONPのスニペットをつくってみる

これまた職場関係でJSONPの前後処理を行う関数＋αをつくってみました（こちらのサイトを参考に）。

問い合わせ先のURLと関数を引数にわたすと、JSONPとして実行可能な関数としての登録から、SCRIPT要素の挿入、JSONP実行後の同要素と関数そのものの削除までをすべて行います。

(function(){

// Settings
var strMyjsonp = "myjsonp";
var strCallbackBase = "_myjsonp";

// Callbacks Base
var base = window[strCallbackBase] = {};

// Myjsonp
window[strMyjsonp] = function(strUrl, funCallback){
    
    var strReqId = strUrl.replace(/[^A-Za-z0-9]/ig, "") + (new Date()).getTime(),
        callbackName = "_" + strReqId,
        elmScript = document.createElement("script");

    base[callbackName] = function(objData){
        funCallback(objData);
        delete base[strReqId];
        elmScript.parentNode.removeChild(elmScript);
    };

    elmScript.src = strUrl 
        + (strUrl.indexOf("?") >= 0 ? "&" : "?") 
        + "callback=" + strCallbackBase + "." + callbackName;
    elmScript.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(elmScript);
    
};

})();

使用方法としては、以下のようにします。コールバック関数は無名関数で構いません。

// myjsonp(url :String, callback :Function) :void
// ※コールバック関数のシグネチャは、
// 　anonymous(json :Object) :void

myjsonp("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Cat",
    function(objJson){ ... });　

※リクエストを受け付けるサーバー側では、callback=callback_name形式のパラメータを読み取って以下のようなレスポンス（もちろんコンテンツタイプはtext/javascript）を返します。

callback_name ({
    // JSON
});