动态JSONP方法

时间:2011-04-28 23:12:34

标签: javascript ajax jsonp prototypejs

我想知道我对JSONP的态度是否正确,如果没有,我可以改变。

我的标准JSONP方法:

服务器

标准?jsonp =回调参数

客户端

  1. 调用该函数(例如: jsonp(url,callback))* 1
  2. 创建<script>代码* 2
  3. 执行脚本
  4. 删除脚本标记
  5. 代码
    注意:我刚刚在stackoverflow编辑器中编写了所有这些,代码未经测试
    1:

    jsonp("http://example.com/sampleAPI", function(result) {  
        // Do something  
    });
    

    2:

    var callbackID = 0;
    var jsonp = function(url, callback) {
        var callbackName = 'callback' + callbackID;
        // put the callback in the URL
        callbackID++;
        if (url.indexOf('?') != -1) {
            url += '&jsonp=' + callbackName;
        } else {
            url += '?jsonp=' + callbackName;
        }
    
        // create the callback
        window[callbackName] = function(result) {
            $('jsonpScriptElement' + callbackID).remove();
            callback(result);
            window.splice(callbackName);
        }
    
        // Create the actual element (do this as the last thing because of caching)
        // Assuming prototype.js usage
        $$('body')[0].insert(new Element('script', {'href': url, 'id': 'jsonpScriptElement' + callbackID}));
    }
    

1 个答案:

答案 0 :(得分:3)

我看到的唯一问题是这部分:

window[callbackName] = function(result) {
    $('jsonpScriptElement' + callbackID).remove();
    callback(result);
    window.splice(callbackName);
}

您为每个通话拨打新功能。尝试通过制作一个仍然可以安全地异步使用的泛型函数来避免这种情况。不应该太难以提供某些东西,例如,您可以将序列号传递给JSONp调用并返回到回调,这样您就可以将不同的请求分开。

是的,JSONp真的很容易:P

此外,您可以将JSONp功能更改为:

var jsonp = (function() {
    var callbackID = 0;
    return function (url, callback) {
         //.. function body ..
    }
}());

因此您不必在全局范围内声明callbackID