动态JSONP方法

Question

我想知道我对JSONP的方法是否正确，如果不是，我可以改变什么。

我的标准JSONP方法：

服务器

标准?jsonp=callback参数

客户端

script

• Remove

• 调用函数(例如: jsonp(url，回调))*1

• 创建<script>标记*2

• 执行脚本标记

码

注意:我刚刚在堆栈溢出编辑器中编写了所有这些代码，代码是未经测试的。

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}));
}

Answer 1

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

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