如何在没有JQuery的情况下从Javascript发出JSONP请求？

javascript jsonp

2022-08-30 04:37:31

我可以在不使用jQuery或其他外部库的情况下在JavaScript中发出跨域JSONP请求吗？我想使用JavaScript本身，然后解析数据并使其成为一个对象，以便我可以使用它。我必须使用外部库吗？如果没有，我该怎么做？

答案 1

function foo(data)
{
    // do stuff with JSON
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo'

document.getElementsByTagName('head')[0].appendChild(script);
// or document.head.appendChild(script) in modern browsers

答案 2

轻量级示例（支持 onSuccess 和 onTimeout）。如果需要，您需要在 URL 中传递回调名称。

var $jsonp = (function(){
  var that = {};

  that.send = function(src, options) {
    var callback_name = options.callbackName || 'callback',
      on_success = options.onSuccess || function(){},
      on_timeout = options.onTimeout || function(){},
      timeout = options.timeout || 10; // sec

    var timeout_trigger = window.setTimeout(function(){
      window[callback_name] = function(){};
      on_timeout();
    }, timeout * 1000);

    window[callback_name] = function(data){
      window.clearTimeout(timeout_trigger);
      on_success(data);
    }

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = src;

    document.getElementsByTagName('head')[0].appendChild(script);
  }

  return that;
})();

示例用法：

$jsonp.send('some_url?callback=handleStuff', {
    callbackName: 'handleStuff',
    onSuccess: function(json){
        console.log('success!', json);
    },
    onTimeout: function(){
        console.log('timeout!');
    },
    timeout: 5
});

在 GitHub： https://github.com/sobstel/jsonp.js/blob/master/jsonp.js