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

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

森含械

轻量级示例（支持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

邪罗逢确胃

什么是JSONP？使用jsonp时要记住的重要一点是，它实际上不是协议或数据类型。它只是一种动态加载脚本并处理引入页面的脚本的方法。本着JSONP的精神，这意味着将新的javascript对象从服务器引入到客户端应用程序/脚本中。何时需要JSONP？这是一种允许一个域异步访问/处理同一页面中另一个域的数据的一种方法。首先，它用于覆盖XHR（ajax）请求可能发生的CORS（跨源资源共享）限制。脚本加载不受CORS限制。怎么做从服务器引入新的javascript对象可以通过多种方式来实现，但是最常见的做法是让服务器通过向其传递所需的对象来实现\ callback函数的执行。回调函数只是您已经在客户端上设置的函数，加载的脚本会在脚本加载时调用该函数以处理传递给它的数据。例：我有一个将所有物品记录在某人家中的应用程序。我的应用程序已设置好，现在我要检索主卧室中的所有物品。我的申请是在app.home.com上。我需要从中加载数据的api是api.home.com。除非服务器被明确设置为允许它，否则我无法使用Ajax加载此数据，因为即使单独子域上的页面也受XHR CORS限制。理想情况下，将其设置为允许x域XHR 理想情况下，由于api和应用程序位于同一个域中，因此我可能有权在api.home.com上设置标头。如果可以，我可以添加一个Access-Control-Allow-Origin:标头项目，以授予对app.home.com的访问权限。假设标头设置如下：“ 8”，这比设置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);

这将加载脚本并立即以服务器写入/回显/打印的形式调用“ 16”。作为参数传递给函数的数据现在存储在dataFromServer局部变量中，您可以根据需要进行处理。清理一旦客户有了数据，即。在将脚本添加到DOM之后，可以立即从DOM中删除script元素：

script.parentNode.removeChild(script);

谦响局豢报

我的理解是您实际上将脚本标签与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并执行它。

体悉

我使用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);
});

参考：使用JsonP的JavaScript XMLHttpRequest http://www.w3ctech.com/topic/721（谈论Promise的使用方式）

蔬谢窗港

我有一个纯JavaScript库可以做到这一点https://github.com/robertodecurnex/J50Npi/blob/master/J50Npi.js 查看一下，如果您在使用或理解代码方面需要任何帮助，请告诉我。顺便说一句，您在这里有一个简单的用法示例：http://robertodecurnex.github.com/J50Npi/

姬第柔炒

/**
 * 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\');

恋卡

我写了一个库来尽可能地处理这个问题。无需将其外部化，它只是一项功能。与某些其他选项不同，此脚本会自行清除，并且被通用化以在运行时发出进一步的请求。 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);
                };
        });
}

疏腔傻小雹

请在下面的JavaScript示例中查找，以在没有JQuery的情况下进行JSONP调用：另外，您可以参考我的“ 28”存储库以供参考。 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);
    }
}

踩什不

/**
 * 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\' );

厘恼轨

如果您将ES6与NPM一起使用，则可以尝试节点模块\“ fetch-jsonp \”。 Fetch API提供对将JsonP调用作为常规XHR调用的支持。先决条件：您应该在堆栈中使用isomorphic-fetch节点模块。

撕吠

只需粘贴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)
    })
}

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

12 个回复

发起人

jsonp

javascript

问题状态

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

与内容相关的链接

12 个回复

发起人

jsonp

javascript

问题状态