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

Question

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

Answer 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

Answer 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

Answer 3

什么是 JSONP？

使用 jsonp 要记住的重要一点是它实际上不是协议或数据类型。它只是动态加载脚本并处理引入页面的脚本的一种方式。本着 JSONP 的精神，这意味着将一个新的 javascript 对象从服务器引入到客户端应用程序/脚本中。

什么时候需要 JSONP？

这是一种允许一个域异步访问/处理同一页面中另一个域的数据的方法。首先，它用于覆盖 XHR (ajax) 请求会发生的 CORS（跨源资源共享）限制。脚本加载不受 CORS 限制。

怎么做的

可以通过多种方式从服务器引入新的 javascript 对象，但最常见的做法是让服务器实现“回调”函数的执行，并将所需的对象传递给它。回调函数只是您已经在客户端上设置的一个函数，您加载的 脚本 在加载时调用 脚本 以处理传递给它的数据。

示例：

我有一个应用程序可以记录某人家中的所有物品。我的应用程序已设置好，现在我想检索主卧室中的所有物品。

我的申请在app.home.com。我需要从中加载数据的 api 位于 api.home.com。

除非服务器明确设置为允许，否则我无法使用 ajax 加载此数据，因为即使是单独子域上的页面也受 XHR CORS 限制。

理想情况下，设置允许 x 域 XHR

理想情况下，由于 api 和应用程序位于同一域中，我可能有权在 api.home.com 上设置标头。如果我这样做，我可以添加一个Access-Control-Allow-Origin: 标题项，以授予对app.home.com 的访问权限。假设 header 设置如下：Access-Control-Allow-Origin: "http://app.home.com"，这比设置 JSONP 安全得多。这是因为app.home.com 可以从api.home.com 获得它想要的一切，而无需api.home.com 允许CORS 访问整个互联网。

上述 XHR 解决方案是不可能的。设置 JSONP 在我的客户端脚本上：我设置了一个函数来在我进行 JSONP 调用时处理来自服务器的响应。：

function processJSONPResponse(data) {
    var dataFromServer = data;
}

需要将服务器设置为返回类似于"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');" 的迷你脚本。如果调用//api.home.com?getdata=room&room=main_bedroom 之类的内容，它可能会被设计为返回这样的字符串。

然后客户端这样设置一个脚本标签：

var script = document.createElement('script');
script.src = '//api.home.com?getdata=room&room=main_bedroom';

document.querySelector('head').appendChild(script);

这会加载脚本并立即调用window.processJSONPResponse()，因为服务器已写入/回显/打印出来。作为函数参数传入的数据现在存储在 dataFromServer 局部变量中，您可以根据需要使用它。

清理

一旦客户端有数据，即。将脚本添加到 DOM 后，可以立即从 DOM 中删除脚本元素：

script.parentNode.removeChild(script);

Answer 4

我的理解是，您实际上是在 JSONP 中使用脚本标签，所以...

第一步是创建处理 JSON 的函数：

function hooray(json) {
    // dealin wit teh jsonz
}

确保此函数可在全局级别访问。

接下来，向 DOM 添加一个脚本元素：

var script = document.createElement('script');
script.src = 'http://domain.com/?function=hooray';
document.body.appendChild(script);

脚本将加载 API 提供者构建的 JavaScript，并执行它。

Answer 5

我使用jsonp的方式如下：

function jsonp(uri) {
    return new Promise(function(resolve, reject) {
        var id = '_' + Math.round(10000 * Math.random());
        var callbackName = 'jsonp_callback_' + id;
        window[callbackName] = function(data) {
            delete window[callbackName];
            var ele = document.getElementById(id);
            ele.parentNode.removeChild(ele);
            resolve(data);
        }

        var src = uri + '&callback=' + callbackName;
        var script = document.createElement('script');
        script.src = src;
        script.id = id;
        script.addEventListener('error', reject);
        (document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script)
    });
}

然后像这样使用'jsonp'方法：

jsonp('http://xxx/cors').then(function(data){
    console.log(data);
});

参考：

JavaScript XMLHttpRequest using JsonP

http://www.w3ctech.com/topic/721（说说Promise的使用方式）

Answer 6

我有一个纯 JavaScript 库可以做到这一点https://github.com/robertodecurnex/J50Npi/blob/master/J50Npi.js

看看它，如果您在使用或理解代码时需要任何帮助，请告诉我。

顺便说一句，这里有简单的用法示例：http://robertodecurnex.github.com/J50Npi/

Answer 7

/**
 * Loads data asynchronously via JSONP.
 */
const load = (() => {
  let index = 0;
  const timeout = 5000;

  return url => new Promise((resolve, reject) => {
    const callback = '__callback' + index++;
    const timeoutID = window.setTimeout(() => {
      reject(new Error('Request timeout.'));
    }, timeout);

    window[callback] = response => {
      window.clearTimeout(timeoutID);
      resolve(response.data);
    };

    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = url + (url.indexOf('?') === -1 ? '?' : '&') + 'callback=' + callback;
    document.getElementsByTagName('head')[0].appendChild(script);
  });
})();

使用示例：

const data = await load('http://api.github.com/orgs/kriasoft');

Answer 8

我写了一个库来处理这个，尽可能简单。无需将其设置为外部，它只是一个功能。与其他一些选项不同，此脚本会自行清理，并泛化为在运行时发出进一步的请求。

https://github.com/Fresheyeball/micro-jsonp

function jsonp(url, key, callback) {

    var appendParam = function(url, key, param){
            return url
                + (url.indexOf("?") > 0 ? "&" : "?")
                + key + "=" + param;
        },

        createScript = function(url, callback){
            var doc = document,
                head = doc.head,
                script = doc.createElement("script");

            script
            .setAttribute("src", url);

            head
            .appendChild(script);

            callback(function(){
                setTimeout(function(){
                    head
                    .removeChild(script);
                }, 0);
            });
        },

        q =
            "q" + Math.round(Math.random() * Date.now());

    createScript(
        appendParam(url, key, q), function(remove){
            window[q] =
                function(json){
                    window[q] = undefined;
                    remove();
                    callback(json);
                };
        });
}

Answer 9

请在下面找到 JavaScript 示例以在没有 JQuery 的情况下进行 JSONP 调用：

另外，您可以参考我的 GitHub 存储库以供参考。

https://github.com/shedagemayur/JavaScriptCode/tree/master/jsonp

window.onload = function(){
    var callbackMethod = 'callback_' + new Date().getTime();

    var script = document.createElement('script');
    script.src = 'https://jsonplaceholder.typicode.com/users/1?callback='+callbackMethod;

    document.body.appendChild(script);

    window[callbackMethod] = function(data){
        delete window[callbackMethod];
        document.body.removeChild(script);
        console.log(data);
    }
}

Answer 10

/**
 * Get JSONP data for cross-domain AJAX requests
 * @private
 * @link http://cameronspear.com/blog/exactly-what-is-jsonp/
 * @param  {String} url      The URL of the JSON request
 * @param  {String} callback The name of the callback to run on load
 */
var loadJSONP = function ( url, callback ) {

    // Create script with url and callback (if specified)
    var ref = window.document.getElementsByTagName( 'script' )[ 0 ];
    var script = window.document.createElement( 'script' );
    script.src = url + (url.indexOf( '?' ) + 1 ? '&' : '?') + 'callback=' + callback;

    // Insert script tag into the DOM (append to <head>)
    ref.parentNode.insertBefore( script, ref );

    // After the script is loaded (and executed), remove it
    script.onload = function () {
        this.remove();
    };

};

/** 
 * Example
 */

// Function to run on success
var logAPI = function ( data ) {
    console.log( data );
}

// Run request
loadJSONP( 'http://api.petfinder.com/shelter.getPets?format=json&key=12345&shelter=AA11', 'logAPI' );

Answer 11

如果你使用 ES6 和 NPM，你可以试试 node 模块“fetch-jsonp”。 Fetch API 支持将 JsonP 调用作为常规 XHR 调用。

先决条件： 您应该在堆栈中使用 isomorphic-fetch 节点模块。

Answer 12

只需粘贴一个 ES6 版本的 sobstel 的好答案：

send(someUrl + 'error?d=' + encodeURI(JSON.stringify(json)) + '&callback=c', 'c', 5)
    .then((json) => console.log(json))
    .catch((err) => console.log(err))

function send(url, callback, timeout) {
    return new Promise((resolve, reject) => {
        let script = document.createElement('script')
        let timeout_trigger = window.setTimeout(() => {
            window[callback] = () => {}
            script.parentNode.removeChild(script)
            reject('No response')
        }, timeout * 1000)

        window[callback] = (data) => {
            window.clearTimeout(timeout_trigger)
            script.parentNode.removeChild(script)
            resolve(data)
        }

        script.type = 'text/javascript'
        script.async = true
        script.src = url

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